如何在xaml中使用触发器来改变tabitem的背景?

时间:2014-05-22 12:20:01

标签: wpf

这是我的Xaml代码

<Window.Resources>
        <Style x:Key="SimpleTabControl" TargetType="{x:Type TabItem}">
            <!--<Setter Property = "TabStripPlacement" Value = "Top"/>-->
            <Setter Property = "Background" Value= "Gray"/>
            <Setter Property="FontSize" Value="15"/>
            <Setter Property="Width" Value="200"/>
            <Setter Property="Height" Value="40"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="IsSelected" Value="False"/>
            <Setter Property="Margin" Value="3,0"/>
            <Style.Triggers>
                <Trigger Property="TabItem.IsMouseOver" Value="true">
                    <Setter Property="Background" Value="LightGreen"></Setter>
                </Trigger>
            </Style.Triggers>

        </Style>


                <EventTrigger RoutedEvent="MouseEnter">
                    <EventTrigger.Actions>

                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
        <Style TargetType="{x:Type TabPanel}">
            <Setter Property="Background" Value="LightGreen"></Setter>
        </Style>

    </Window.Resources>
    <Grid Background="White" Height="1000"  Width="auto" IsEnabled="True">
        <TabControl Name="MainTab" Background="LightGray" SelectionChanged="MainTab_SelectionChanged">
            <TabControl.Resources>
                <Style TargetType="{x:Type TabPanel}">
                    <Setter Property="HorizontalAlignment" Value="Left" />
                    <Setter Property="Background" Value="White"/>
                </Style>
            </TabControl.Resources>

            <TabItem Header="Input" x:Name="tabAlert1" Style="{StaticResource SimpleTabControl}" MouseEnter="TabItem_Enter" MouseLeave="TabItem_Leave" MouseDoubleClick="TabItem_Click" >

                <!--<TabItem.Header>
                    <Border Padding="0,0">
                        <StackPanel Orientation="Horizontal"  Background="Gray" HorizontalAlignment="Left" Width="200" Height="40" Margin="0,0">
                            <TextBlock Text="Input" Foreground="White" FontSize="15" TextAlignment="Right"/>
                        </StackPanel>
                    </Border>

                </TabItem.Header>-->
                <Label Content="Content goes here..." />
            </TabItem>
            <TabItem Header="Analysis" x:Name="tabAlert2"  Style="{StaticResource SimpleTabControl}" />
            <TabItem Header="Action???" x:Name="tabAlert3" Style="{StaticResource SimpleTabControl}"/>
        </TabControl>
</Grid>

我不知道由于某种原因isMouseOver的触发器没有触发标签项目的背景颜色变化。

我也尝试了c#,代码隐藏,但没有成功,但如果更改前景属性,它可以工作,但不是后台属性。

这是我的C#Way

private void TabItem_Enter(object sender, System.Windows.Input.MouseEventArgs e)
    {
        //var tabItem = sender as TabItem;
        //tabAlert2.Background = Brushes.Red;
        //tabItem.Background = Brushes.Green;
        var tabItem = sender as TabItem;
        tabItem.Background = new SolidColorBrush(Colors.Gray);

    }

我已经将鼠标输入事件绑定到选项卡项目。这是非常基本的但我很沮丧这不工作?任何帮助非常感谢。

1 个答案:

答案 0 :(得分:1)

我不确定,但我认为你想改变标题的颜色?

如果是这样,您可以更改标题模板,尝试使用此代码,如果它适用于您,请添加其他属性。

<Window.Resources>     
    <Style TargetType="TabItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TabItem">
                    <Grid Name="Panel">
                        <Border Name="Border" BorderThickness="1,1,1,0" BorderBrush="Gainsboro" CornerRadius="4,4,0,0" Margin="2,0">
                            <ContentPresenter x:Name="ContentSite" 
                                    VerticalAlignment="Center" 
                                    HorizontalAlignment="Center" 
                                    ContentSource="Header" 
                                    Margin="10,2"/>
                        </Border>

                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="LightGreen"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="False">
                            <Setter TargetName="Border" Property="Background" Value="White" />
                        </Trigger>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="LightBlue"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</Window.Resources>

<Grid>
    <TabControl Name="MainTab">
        <TabItem Header="Input" x:Name="tabAlert1"/>
        <TabItem Header="Analysis" x:Name="tabAlert2"/>
        <TabItem Header="Action???" x:Name="tabAlert3"/>
    </TabControl>

</Grid>

(鼠标在第二个标签上) Mouse is over second tab