【问题标题】:WPF app using ExpressionDark theme, want to extend TabItem Header style使用 ExpressionDark 主题的 WPF 应用程序,想要扩展 TabItem Header 样式
【发布时间】:2014-05-09 23:05:45
【问题描述】:

对于使用 ExpressionDark 主题的 WPF 应用,我有一个 TabControl,无需任何修改,选项卡控件的主题样式就可以了。

但是,当我通过样式设置器实现 HeaderTemplate 时,这似乎会覆盖标题模板的主题样式。

我想做的是扩展主题的样式,以便我的选项卡控件的标题可以包含图像(在下面的示例代码中,它是硬编码的,但最终将是绑定和动态的)。

有没有办法指示 TabItemHeaderTemplateTabItemHeaderTemplateSelected 项以某种方式从主题模板中执行 BasedOn?

<UserControl x:Class="WpfApp1.ConfigControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d"
         Background="{DynamicResource WindowBackgroundBrush}">

<UserControl.Resources>
    <DataTemplate x:Key="TabItemHeaderTemplate" >
        <Border>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center" >
                <Image Height="32" Width="32"
                       Source="/Assets/Images/WarningIcon.png" />
                <TextBlock Text="{Binding}" VerticalAlignment="Center" Margin="10 0 0 0" FontSize="16" />
            </StackPanel>
        </Border>
    </DataTemplate>
    <DataTemplate x:Key="TabItemHeaderTemplateSelected">
        <Button>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center" >
                <Image Height="32" Width="32"
                       Source="/Assets/Images/WarningIcon.png" />
                <TextBlock Text="{Binding}" VerticalAlignment="Center" Margin="10 0 0 0" FontSize="16" FontWeight="Bold" />
            </StackPanel>
        </Button>
    </DataTemplate>
    <DataTemplate x:Key="TabItemContentTemplate">
        <ContentControl Content="{Binding}" />
    </DataTemplate>
    <Style x:Key="TabItemContainerStyle" TargetType="TabItem" >
        <Setter Property="Header" Value="{Binding}"/>
        <Setter Property="HeaderTemplate" 
                Value="{StaticResource TabItemHeaderTemplate}"/>
        <Setter Property="Content" Value="{Binding}"/>
        <Setter Property="ContentTemplate" 
                Value="{StaticResource TabItemContentTemplate}"/>
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="true">
                <Setter Property="HeaderTemplate" Value="{StaticResource TabItemHeaderTemplateSelected}" />
            </Trigger>
            <Trigger Property="IsSelected" Value="false">
                <Setter Property="HeaderTemplate" Value="{StaticResource TabItemHeaderTemplate}" />
            </Trigger>
        </Style.Triggers>
    </Style>
</UserControl.Resources>

<Grid Margin="10">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <StackPanel Grid.Row="0" Grid.Column="0" Margin="0 20 0 0">
        <StackPanel Orientation="Horizontal">
            <Label Content="Model Name:" Margin="0 5 2 0" Width="100" />
            <TextBox Text="{Binding Config.ModelName, Mode=TwoWay}" VerticalAlignment="Top" Background="WhiteSmoke" Foreground="DarkBlue" Width="200" />
        </StackPanel>

        <StackPanel Orientation="Horizontal">
            <Label Content="Model Description:" Margin="0 5 2 0" Width="100" />
            <TextBox Text="{Binding Config.Description, Mode=TwoWay}" VerticalAlignment="Top" Background="WhiteSmoke" Foreground="DarkBlue" Width="600" />
        </StackPanel>
    </StackPanel>

    <TabControl Grid.Row="1" Grid.Column="0" 
                ItemsSource="{Binding Parts}"
                ItemContainerStyle="{StaticResource TabItemContainerStyle}"
                SelectedItem="{Binding SelectedConfigPartViewModel, Mode=TwoWay}"
                Margin="0 40 0 0" />


</Grid>

【问题讨论】:

    标签: wpf xaml themes datatemplate tabcontrol


    【解决方案1】:

    而不是:

    <Style x:Key="TabItemContainerStyle" TargetType="TabItem" >
    ....
    ....
    </Style>
    

    试试下面的代码:

    <Style x:Key="TabItemContainerStyle" TargetType="{x:Type TabItem}" BasedOn="{StaticResource {x:Type TabItem}}" >
    ....
    ....
    </Style>
    

    或者如果它不起作用,那么

    改变

    BasedOn="{StaticResource {x:Type TabItem}}"
    

    BasedOn="{StaticResource NameOfYourStyleDeclaredInTheme}"
    

    【讨论】:

    • 非常感谢,第一个选项完全符合我的要求!非常感谢您的帮助。
    • 不客气,请将我的回答标记为已接受,以便将来对某人有所帮助。
    • 我试图做到这一点,但被告知我需要 15 分或更高的分数才能做到这一点:( 最后一个问题你可能会深入了解......在我的原始代码中我有两个DataTemplates,一个用于选择项目时,另一个用于常规选项卡项目(TabItemHeaderTemplate 和 TabItemHeaderTemplateSelected)...这似乎有点矫枉过正,只是字体不同...否则它们是相同的。有没有更好的方法根据 IsSelected 样式触发器执行此操作?再次感谢。ps 刚刚发现必须单击复选标记才能设置为接受的答案,我尝试了向上箭头。
    • 好的,我试试看告诉你。
    • 我试过了。但我无法实现。对不起。我认为您应该为此提出另一个问题。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2010-12-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多