Tab 控制鼠标悬停

问题描述 投票：0回答：2

我正在尝试创建一个选项卡控件，其样式类似于 Google 的厨房水槽示例。 当鼠标移到选项卡上时，我希望能够更改其颜色，当我单击该选项卡时，其内容背景颜色会发生变化以匹配，并且选项卡也会发生变化。但是，如果您不单击选项卡并且鼠标移动，我希望它返回到原始颜色。我希望选项卡具有不同的颜色。

我现在所拥有的是当我将鼠标悬停在介绍选项卡内容“介绍内容”上时

内容字体变为红色。我必须将其更改为前台，以便我可以看到它正在工作。请记住，我对 xaml 和 wpf 很陌生。我正在尝试自学，我的书里有一小部分是关于样式的。

这是我想要实现的谷歌厨房示例。 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>
wpf
2个回答
2
投票

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

<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>
0
投票

如果我们选择鼠标单击选项卡，那么我们必须单击操作按钮，以便它执行分配给它的操作。

如果我们选择将鼠标悬停在选项卡上，那么我们可以将鼠标指针悬停在操作按钮上，它将对其执行操作

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.