TextBlock color animation in TabControl - wpf

I am currently working in wpf. I was animating the color of textblock control inside the tab item. When the tab is selected, i want to change the foreground to white, i-e
<ColorAnimation
Storyboard.TargetName="buttonText"
Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
To="White" Duration="0:0:.1" />
the tab control code is;
<TabControl Name="tabSteps" Template="{StaticResource OfficeTabControl}">
<TabItem Header="Info" IsSelected="True">
<TextBlock>Info content</TextBlock>
</TabItem>
<TabItem Header="Recent">
<TextBlock>Recent content tab</TextBlock>
</TabItem>
<TabItem Header="New">
<TextBlock>New content tab</TextBlock>
</TabItem>
<TabItem Header="Print">
<TextBlock>Print content tab</TextBlock>
</TabItem>
<TabItem Header="Save & Send">
<TextBlock>Save & send content tab</TextBlock>
</TabItem>
<TabItem Header="Help">
<TextBlock>Help tab</TextBlock>
</TabItem>
</TabControl>
I want to target the textblock.
But it isn't working.
Any help will be appreciated.
I am following this work
http://www.codeproject.com/Articles/155211/Building-a-control-template-style-for-the-tabContr.aspx

Using the VisualStateManager, create a state for when your TabItem is selected. You can then specify the animation you mentioned to start as a transition to and from the selected state (see http://blogs.intuidev.com/post/2010/01/26/TabControlStyling_PartTwo.aspx for a tutorial).
The default style for the TabControl is here (http://msdn.microsoft.com/en-us/library/cc645035(v=vs.95).aspx), or you can easily generate it if you use Expression Blend.
You could also use this approach (a programmatic trigger) : https://stackoverflow.com/a/4958562/914602

Related

WPF Tabcontrol not showing TabItem content until selection changes

I have the following Tabcontrol definition:
<TabControl Grid.Row="0" SelectedItem="{Binding SelectedTab}" >
<TabItem Header="Foo" IsSelected="True" >
One
</TabItem>
<TabItem Header="Bar">
Two
</TabItem>
<TabItem Header="Smeh">
Three
</TabItem>
</TabControl>
I would expect the "Foo" tab to be selected and the 'One' text to be visible. This is not the behaviour I'm seeing. It appears all tabs are unselected and until I click on a different tab (clicking on the one that is supposedly already selected does nothing), then the tab looks selected and shows content.
Does anyone know why the TabControl works like this and how to fix it to work correctly?
By default there is no selected item in the TabControl. If you want to synchronize some model with the selected item, try
<TabControl Grid.Row="0" SelectedItem="{Binding SelectedTab, Mode=OneWayToSource}" >

TabControl: all TabItems collapsed, but content of 1st TabItem still visible

I've got a rather strange behavior on a TabControl, whose TabItems are all collapsed: The content of the first TabItem is still visible (but the header is not).
The TabControl and its TabItems are setup like this:
<TabControl>
<TabItem Header="Data 1"
Visibility="{Binding Path=DataTable1.HasRows,
Converter={StaticResource BoolToVisibility}}">
<UI:ShowData DataContext="{Binding Path=DataTable1}"/>
</TabItem>
<TabItem Header="Data 2"
Visibility="{Binding Path=DataTable2.HasRows,
Converter={StaticResource BoolToVisibility}}">
<UI:ShowData DataContext="{Binding Path=DataTable2}"/>
</TabItem>
</TabControl>
If none of the data tables contains any rows, none of the TabItems should be shown. (I known that I could hide the whole TabControl in that case, but that's not the point here.)
Actually the content of the tab item "Header 1" will be displayed despite the TabItem being collapsed! The TabItem's header itself is collapsed, the TabItems border which contains its content and the content itself are displayed.
Edit/Add:
This can easily be reproduced using this code (note using Collapsed or Hidden does not make any difference:
<TabControl>
<TabItem Header="Test 1" Visibility="Hidden">
<Label>Test1</Label>
</TabItem>
<TabItem Header="Test 2" Visibility="Hidden">
<Label>Test2</Label>
</TabItem>
</TabControl>
So what's wrong here? Any help/hints are appreciated!
Ok, so you've found a real problem here... I looked around online and found several posts that relate to this. Some say that this is a bug, while others say that it is the designed behaviour. don't know which, although it certainly seems to be more of a bug than a feature.
Either way, you want to know how to deal with the problem. .. there are several solutions. One is just to set the TabItem.Content to null whenever you want to hide the tab and another is another involves adding an empty TabItem and selecting that item before hiding (so that it's empty content is shown).
You can attach a handler to the TabItem.IsVisibleChanged Event to be notified when the Visibility property has been changed:
public void TabItemIsVisibleChanged(object sender, DependencyPropertyChangedEventArgs e)
{
// Hide TabItem.Content here
}
Here are some links to the relevant posts:
Bug in TabControl/TabItem`s content visibility?
WPF TabControl - Select different tab when TabItem Visibility changes
Is there a workaround for this tabcontrol/tabitem bug
Another solution that I prefer over the ones suggested: Bind the visibility of the TabItem and its content to the same property (using the BooleanToVisibilityConverter).
Here's a simple example:
<UserControl.Resources >
<BooleanToVisibilityConverter x:Key="boolToVis"/>
</UserControl.Resources>
<Grid>
<TabControl>
<TabItem Header="TabItem 1" Visibility="{Binding Item1Visibility, Converter={StaticResource boolToVis}}">
<Label Content="Content 1" Visibility="{Binding Item1Visibility, Converter={StaticResource boolToVis}}"/>
</TabItem>
<TabItem Header="TabItem 2" Visibility="{Binding Item1Visibility, Converter={StaticResource boolToVis}}">
<Label Content="Content 2" Visibility="{Binding Item1Visibility, Converter={StaticResource boolToVis}}"/>
</TabItem>
</TabControl>
</Grid>
Could be a WPF bug, anyway bypass by binding the content visibility to the tab item visibility.
<TabControl>
<TabItem x:Name="_test1Tab" Header="Test 1" Visibility="Hidden">
<Label Visibility="{Binding ElementName=_test1Tab, Path=Visibility}">Test1</Label>
</TabItem>
<TabItem x:Name="_test2Tab" Header="Test 2" Visibility="Hidden">
<Label Visibility="{Binding ElementName=_test1Tab, Path=Visibility}">Test2</Label>
</TabItem>
</TabControl>
My solution to this was to put the TabItem I wanted to hide in another position. The problem happens only if you want to collapse only the first TabItem.

WPF: How to set background of TabItem?

How to set the background of TabItem? I tried the following code:
<TabControl>
<TabItem Header="Test" Background="Blue" Foreground="Red" />
</TabControl>
Foreground works, but Background does not work.
Any ideas? Thanks
What is happening is that in the case of a single tab, it is always selected, and so you are only seeing the selection style of the tab item.
For example, take a look at the following TabControl:
<TabControl>
<TabItem Header="Tab A" Background="Blue" Foreground="Red">
<Grid />
</TabItem>
<TabItem Header="Tab B" Background="Green" Foreground="Navy" >
<Grid />
</TabItem>
<TabItem Header="Tab C" Background="LightBlue">
<Grid />
</TabItem>
</TabControl>
Tab A will not display its Blue background until you select a different tab. If you truly want the Background to remain the same regardless of whether it is selected or not, you will need to override the control template of the TabItem.
See the question TabItem Background color changes when tabitem selected or hover over for an example of how to do this.

Binding a TextBlock's text to TabControl item in WPF

I have a WPF window with a tab control, and I'm defining the TabItems in the XAML file, like:
<TabControl>
<TabItem Name="tab1" Tag="Transactions"/>
<TabItem Name="tab2" Tag="Promotions" />
...
</TabControl>
Elsewhere on the screen I have a textblock which I want to use to display the Tag value of the selected tab. It works when the screen is initially loaded, and whenever the "transactions" tab is selected, but when a different tab is selected, it's blank. Why is that, and how can I make it display the tag of any selected tab? Here is the TextBlock:
<TextBlock Text="{Binding ElementName=tabControl1, Path=SelectedItem.Tag}"/>
This works as expected for me. (You did set the name of the TabControl, right?)
Note that if the TabControl is populated via ItemsSource unlike your example code the SelectedItem will not contain the TabItem but the data-object from which the TabItem is created, so the binding path SelectedItem.Tag does not work.
Code used:
<!-- Both controls enclosed in a Stackpanel -->
<TabControl Name="tabControl1">
<TabItem Name="tab1" Tag="Transactions"/>
<TabItem Name="tab2" Tag="Promotions" />
</TabControl>
<TextBlock Text="{Binding ElementName=tabControl1, Path=SelectedItem.Tag}"/>
The tab headers are obviously going to be empty but they are selectable.

How do I add horizontal margins to my WPF TabItems without cutting off the tab?

My TabItems before attempting to apply a left margin of 10 look like:
After attempting to apply the left margin of 10 to the blue tab, the blue tab gets cut off like:
How do I do this properly?
There are a few ways to go about this but easiest thing to do is to simply customize the TabItem.Header content like so:
<TabControl Margin="29,29,25,23" Name="tabControl1">
<TabItem Name="tabItem1">
<TabItem.Header>
<TextBlock Margin="20,0,20,0">tabItem1</TextBlock>
</TabItem.Header>
</TabItem>
<TabItem Name="tabItem2">
<TabItem.Header>
<TextBlock Margin="20,0,20,0">tabItem2</TextBlock>
</TabItem.Header>
</TabItem>
<TabItem Header="tabItem3" Name="tabItem3">
<Grid />
</TabItem>
</TabControl>
If you were planning on doing this for every tab, and you probably should, I'd consider using a style to apply these margins.
My guess is you have a Width set on the blue tab. When you add a margin part of the width is taken up by the margin so part of the tab gets cut off. Remove the Width attribute and try to use Padding instead.

Resources