TabControl.Resource DataTemplate 使用图标代替文本

问题描述

我有一个项目,它使用 TabControlDataTemplates 将选项卡添加到视图中,如下所示:

<TabControl Name="dcTabControl"
            ItemsSource="{Binding Tabs}"
            SelectedItem="{Binding SelectedTabViewModel}"
            Height="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type Window}},Path=DataContext.MainContentHeight}">
    <TabControl.Resources>

        <!-- Removed numerous other tabs to save space -->

        <!-- System Setup tab -->
        <DataTemplate DataType="{x:Type vm:SystemSetupViewModel}">
            <ScrollViewer HorizontalScrollBarVisibility="Auto" 
                          VerticalScrollBarVisibility="Auto">
                <v:SystemSetupUserControl />
            </ScrollViewer>
        </DataTemplate>

        <!-- About tab -->
        <DataTemplate DataType="{x:Type vm:AboutViewModel}">
            <ScrollViewer HorizontalScrollBarVisibility="Auto" 
                          VerticalScrollBarVisibility="Auto">
                <v:AboutUserControl />
            </ScrollViewer>
        </DataTemplate>

    </TabControl.Resources>
</TabControl>

每个 ViewModel 都有一个 Header 属性,用于填充选项卡的文本(例如“关于”)。

我现在需要将“关于”文本更改为图标。我试过了,但它没有改变任何东西。

         <!-- About tab -->
        <DataTemplate DataType="{x:Type vm:AboutViewModel}">
            <TabItem>
                <TabItem.Header>
                    <Image Name="AboutTabImage" Height="auto" Width="auto" Source="Images/About.png" />                        
                </TabItem.Header>
                <TabItem.Content>
                    <ScrollViewer HorizontalScrollBarVisibility="Auto" 
                                  VerticalScrollBarVisibility="Auto">
                        <v:AboutUserControl />
                    </ScrollViewer>                        
                </TabItem.Content>
            </TabItem> 
        </DataTemplate>

如何用图标代替文本?

UPDATE 添加代码以显示 Header 属性如何绑定到 Tab。

使用此 HeaderTab 绑定到 Style

<!-- Standard Tab Style -->
<Style x:Key="TabStyle" TargetType="{x:Type TabItem}">
    <Setter Property="Header" Value="{Binding Header}" />
    <Setter Property="Width" Value="Auto" />
    <Setter Property="Padding" Value="10,5,10,5" />
</Style>

我现在想我必须创建一个新样式才能使用图标而不是文本,但不确定如何将该样式应用于数据模板。

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)