Hi I think this is a beginners questions. I've searched all the related questions. But all of them are answered by .xaml. However, what I need is the back code. I have a TabControl. I need to set the background color of its items. I need to set different colors for the items when it is selected, unselected and hover. Thank you so much for your help. I want to post my codes here. However, currently, all I have is an instance of the TabControl and one property called ActiveTabIndex.
---------------------------------------Edit 1-----------------------------------------------
I have added an event SelectionChanged
(this.myTabControl as System.Windows.Controls.TabControl).SelectionChanged += TabSet_SelectionChanged;
void TabSet_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
{
foreach (System.Windows.Controls.TabItem item in (this.myTabControl as System.Windows.Controls.TabControl).Items)
{
if (item == (this.myTabControl as System.Windows.Controls.TabControl).SelectedItem)
{
item.Background = System.Windows.Media.Brushes.Red;
}
else
item.Background = System.Windows.Media.Brushes.Green;
}
}
However, I can only set the Green actually. The background color of the selected item keeps as the default color instead of red. Any hints about this? Also, I would like to know how to add event for the hover. Haven't find the exact event. Thanks again.
-----------------------Edit 2------------------------------
After a long long long discussion. I've decided (actually not my decision) to use the XAML. Yeah. I am new to WPF. So I still have questions about this (I am so sorry for this, Please bear me). The questions are here: I would like to change the background color to Orange when the mouse is over the TabItem. Now the color is Orange when the mouse is over the ContentPanel and TabItem. I need it to be orange when the mouse is over the TabItem only. (I am not sure I am clear enough.) Another question is that I would let users to set the color instead of setting is to red directly. I need some bindings I think. For this question, I will google later for sure. Just want to be clear. Thank you so much for all of you. Really helpful.
<TabItem x:Class="MyControls.Tab"
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"
d:DesignHeight="300" d:DesignWidth="300">
<TabItem.Style>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border Name="Border" Margin="0,0,-4,0" BorderThickness="1,1,1,1" CornerRadius="2,12,0,0" >
<ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2" RecognizesAccessKey="True"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter TargetName="Border" Property="Background" Value="Red" />
<Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border" Property="Background" Value="Green" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="Background" Value="Orange" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabItem.Style>
</TabItem>
------------- Edit 3 ----------------
I am not clear enough I think.
Here is what it is now:
It's working fine if the mouse is over other tabs:
But When the mouse is over the circled area, the background color of the selected item should be red instead of orange:
---------------Edit 4 -------------------
Thanks for all of you for your reply. Now after a long discussion with my users and some others, we would like to change the background color dynamically. The user wants to set the color by themselves. Basically, I need first do some binding (if this is the term). I've tried the following. However, the selected tab is not with red background. I used the Snoop to check out, it turns out that the Background is set as red locally. I am a little confusing here. I've asked around, and someone gave me the suggestion to use TemplateBinding since it is under ControlTemplate. But, I've tried to create dependency property and something like that. But just I don't understand why should I use TemplateBinding since I read some article said that it is for compile time binding. I am totally confused. I am new to WPF, I am sorry if the question is low level question. Thanks again!
<TabItem x:Class="MyControl.Tab"
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"
d:DesignHeight="300" d:DesignWidth="300">
<TabItem.Style>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border Name="Border" Margin="0,0,-4,0" BorderThickness="1,1,1,1" CornerRadius="2,12,0,0" >
<ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2" RecognizesAccessKey="True"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter TargetName="Border" Property="Background" Value="{Binding SelectedBgClr}" />
<Setter Property="Foreground" Value="Yellow" />
<Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border" Property="Background" Value="Green" />
<Setter Property="Foreground" Value="AliceBlue"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="Background" Value="Orange" />
<Setter Property="Foreground" Value="Black"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabItem.Style>
</TabItem>
The behind code is:
public Tab()
{
SelectedBgClr = new SolidColorBrush(Colors.Red);
//UnSelectedBgClr = new SolidColorBrush(Colors.Green);
//HoverBgClr = new SolidColorBrush(Colors.Orange);
InitializeComponent();
}
public static readonly DependencyProperty SelectedBgClrProperty = DependencyProperty.Register("SelectedBgClr", typeof(Brush), typeof(Tab), new UIPropertyMetadata(null));
public Brush SelectedBgClr
{
get
{
return (Brush)GetValue(SelectedBgClrProperty);
}
set
{
SetValue(SelectedBgClrProperty, value);
}
}
