Question

我正在尝试使用Google的厨房水槽示例创建一个标签控件。当鼠标移过选项卡时，我希望能够更改其颜色，当我单击该选项卡时，其内容背景颜色会更改以匹配并且选项卡会更改。但是，如果您没有单击选项卡并且鼠标移动，我希望它返回其原始颜色。我希望标签有不同的颜色。

我现在拥有的是当我将鼠标悬停在简介标题内容“Content for intro”

上时

内容字体变为红色。我不得不将它改为前景，所以我可以看到它正在工作。请记住，我是xaml和wpf的新手。我正在努力教自己，这本书的篇幅很小。

这是Google正在努力实现的厨房罪恶榜样。 http://gwt.google.com/samples/KitchenSink/KitchenSink.html

非常感谢任何帮助。

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <SolidColorBrush x:Key="mouseOverColor"
            Color="Red" />
        <Style x:Key="myStyle" TargetType="TabItem">
            <Setter Property="BorderThickness" Value="3"/>
            <Setter Property="BorderBrush" Value="Red"/>
            <Setter Property="Background" Value="LightBlue"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TabItem">
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver"
                                     Value="True">
                                <Setter Property="Foreground"
                                        Value="{StaticResource mouseOverColor}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                        <ContentPresenter />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <TabControl  Background="AliceBlue"  Grid.Column="1"
             Grid.ColumnSpan="2" Margin="92,40,37,80"
             Grid.Row="2">
            <TabItem  Header="Intro" >
                <TabItem Style="{StaticResource myStyle}" >
                    Content for intro
                </TabItem>
            </TabItem>
            <TabItem Header="Widgets">
                Content for widget
            </TabItem>
            <TabItem Header="Panels">
                content for panel
            </TabItem>
        </TabControl>
    </Grid>
</Window>

Answer 1

这有点复杂，因为默认情况下所选选项卡的背景是无色的，因此您需要覆盖控件模板。最好修改默认样式，这样你就不需要重新开始，这在任何情况下都非常冗长：

<ControlTemplate x:Key="TabItemControlTemplate" TargetType="{x:Type TabItem}">
    <Grid SnapsToDevicePixels="True">
        <Border x:Name="Bd" BorderBrush="White" BorderThickness="1,1,1,0" Padding="{TemplateBinding Padding}">
            <Border.Style>
                <Style TargetType="{x:Type Border}">
                    <Setter Property="Background" Value="Gray"/>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected}" Value="True">
                            <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsMouseOver}" Value="True">
                            <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
            <ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}"/>
        </Border>
    </Grid>
    <ControlTemplate.Triggers>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsSelected" Value="False"/>
                <Condition Property="IsMouseOver" Value="True"/>
            </MultiTrigger.Conditions>
            <Setter Property="BorderBrush" TargetName="Bd" Value="#FF3C7FB1"/>
        </MultiTrigger>
        <Trigger Property="TabStripPlacement" Value="Bottom">
            <Setter Property="BorderThickness" TargetName="Bd" Value="1,0,1,1"/>
        </Trigger>
        <Trigger Property="TabStripPlacement" Value="Left">
            <Setter Property="BorderThickness" TargetName="Bd" Value="1,1,0,1"/>
        </Trigger>
        <Trigger Property="TabStripPlacement" Value="Right">
            <Setter Property="BorderThickness" TargetName="Bd" Value="0,1,1,1"/>
        </Trigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsSelected" Value="True"/>
                <Condition Property="TabStripPlacement" Value="Top"/>
            </MultiTrigger.Conditions>
            <Setter Property="Margin" Value="-2,-2,-2,-1"/>
            <Setter Property="Margin" TargetName="Content" Value="0,0,0,1"/>
        </MultiTrigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsSelected" Value="True"/>
                <Condition Property="TabStripPlacement" Value="Bottom"/>
            </MultiTrigger.Conditions>
            <Setter Property="Margin" Value="-2,-1,-2,-2"/>
            <Setter Property="Margin" TargetName="Content" Value="0,1,0,0"/>
        </MultiTrigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsSelected" Value="True"/>
                <Condition Property="TabStripPlacement" Value="Left"/>
            </MultiTrigger.Conditions>
            <Setter Property="Margin" Value="-2,-2,-1,-2"/>
            <Setter Property="Margin" TargetName="Content" Value="0,0,1,0"/>
        </MultiTrigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsSelected" Value="True"/>
                <Condition Property="TabStripPlacement" Value="Right"/>
            </MultiTrigger.Conditions>
            <Setter Property="Margin" Value="-1,-2,-2,-2"/>
            <Setter Property="Margin" TargetName="Content" Value="1,0,0,0"/>
        </MultiTrigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Background" TargetName="Bd" Value="#FFF4F4F4"/>
            <Setter Property="BorderBrush" TargetName="Bd" Value="#FFC9C7BA"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

如果要更改默认颜色，请更改边框上的设置器，指定背景应为灰色。

另外，为了使内容部分与选项卡颜色相同，还需要TabControl中的附加绑定。此外，此控制模板需要通过自动样式或直接引用应用于项目：

<TabControl x:Name="MyControl" Height="200"
            Background="{Binding RelativeSource={RelativeSource Self}, Path=SelectedItem.Background}">
    <TabItem Header="tab1" Background="Red"   Template="{DynamicResource TabItemControlTemplate}"/>
    <TabItem Header="tab2" Background="Green" Template="{DynamicResource TabItemControlTemplate}"/>
    <TabItem Header="tab3" Background="Blue" Template="{DynamicResource TabItemControlTemplate}"/>
</TabControl>

选择第一个标签，将鼠标悬停在最后一个标签上：
Screenshot

用法注释：

<Window ...>
    <Window.Resources>
        <ControlTemplate x:Key="TabItemControlTemplate" TargetType="{x:Type TabItem}">
            ...
        </ControlTemplate>
    </Window.Resources>
    <Grid>
        <!-- You can reference the template anywhere inside the visual tree
             of the Window if it has been declared in the Resources of the
             window, most XML elemnts that are children of the Window element
             are inside its visual tree -->
        <TabControl ...>
            <TabItem Template="{StaticResource TabItemControlTemplate}" .../>
        </TabControl>
    </Grid>
</Window>

标签控制鼠标悬停

1 个答案: