Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Trigger for TabItem.IsSelected doesn't work

I want to have selected tab background set to red and unselected to green. However only unselected tab is colored on green when changing. Selected remains white.

        <TabControl Background="LightGray" Name="MainTabControl">
        <TabControl.Resources>
            <Style TargetType="TabItem">
                <Style.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Background" Value="Red" />
                    </Trigger>
                    <Trigger Property="IsSelected" Value="False">
                        <Setter Property="Background" Value="Green" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </TabControl.Resources>
        <TabItem Header="Main" />
        <TabItem Header="Optimizer" />
    </TabControl>

enter ifdsfdsre

like image 699
stanwar Avatar asked Jan 30 '16 23:01

stanwar


People also ask

Isselected false when selecting a tabitem programmatically?

The default is false. The following example shows how to use the IsSelected property to select a TabItem programmatically.

What is Microsoft's policy on tabitem selection?

Microsoft makes no warranties, express or implied, with respect to the information provided here. Gets or sets a value that indicates whether the TabItem is selected. true if the TabItem is selected; otherwise, false.

How do I bind the selectedindex of a tabcontrol to the tabitem?

The TabItem has an IsSelected property that you can bind to a source property of your view model. But the easiest way is to bind the SelectedIndex property of the TabControl itself to an int property on your view model: <TabControl SelectedIndex="{Binding YourIndexProperty}"> .. </TabControl>


1 Answers

Override the TabItem's ControlTemplate and add the trigger to it

<Style TargetType="{x:Type TabItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid>
                        <Border Name="Border"  >
                            <ContentPresenter  VerticalAlignment="Center" Margin="5"
                          HorizontalAlignment="Center"
                          ContentSource="Header" >                                   
                            </ContentPresenter>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">                                
                            <Setter TargetName="Border" Property="Background" Value="Red" />                                
                        </Trigger>
                        <Trigger Property="IsSelected" Value="False">
                            <Setter TargetName="Border" Property="Background" Value="Green" />                                                                
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

EDIT

to keep the original tabitem style and add you background colors, from vs designer right click on the tabitem and select EditTemplate > Edit a Copy, then update the TabItem.Static.Background Gardian brush which is responsible for the non selected tab color, and TabItem.Selected.Background Brush which is responsible for the Selected tab color:

  //..
  <LinearGradientBrush x:Key="TabItem.Static.Background" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#F0F0F0" Offset="0.0"/>
        <GradientStop Color="Green" Offset="1.0"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="TabItem.Static.Border" Color="#ACACAC"/>
    <LinearGradientBrush x:Key="TabItem.MouseOver.Background" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#ECF4FC" Offset="0.0"/>
        <GradientStop Color="#DCECFC" Offset="1.0"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="TabItem.MouseOver.Border" Color="#7EB4EA"/>
    <SolidColorBrush x:Key="TabItem.Disabled.Background" Color="#F0F0F0"/>
    <SolidColorBrush x:Key="TabItem.Disabled.Border" Color="#D9D9D9"/>
    <SolidColorBrush x:Key="TabItem.Selected.Border" Color="#ACACAC"/>
    <SolidColorBrush x:Key="TabItem.Selected.Background" Color="Red"/>
    //..

Or

or you can use a templateBinding in both the mainBorder and innerBorder to the Background property (initially only the mainBorder was templateBinded to the background property), then add you trigger to the controlTemplate triggers,

<Grid x:Name="templateRoot" SnapsToDevicePixels="true">
                        <Border x:Name="mainBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" Background="{TemplateBinding Background}" Margin="0">
                            <Border x:Name="innerBorder" BorderBrush="{StaticResource TabItem.Selected.Border}" BorderThickness="1,1,1,0"  Background="{TemplateBinding Background}" Margin="-1" Opacity="0"/>
                        </Border>
                        <ContentPresenter x:Name="contentPresenter" ContentSource="Header" Focusable="False" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                    </Grid>

and add your trigger at the end

              <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Background" Value="Red" />
                            </Trigger>
                            <Trigger Property="IsSelected" Value="False">
                                <Setter Property="Background" Value="Green" />
                            </Trigger>

                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

and that should response your second question

like image 158
SamTh3D3v Avatar answered Sep 20 '22 16:09

SamTh3D3v