I am a starter in wpf programming. The following code shows an error when I tried to animate colour of all rectangles used in grid 2. Do you know why?
<ColorAnimation Storyboard.TargetName="grid2"
Storyboard.TargetProperty="Rectangle.Fill.Color"
To="Indigo"/>
Try this
<Window x:Class="WpfApplication2.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1">
<Window.Resources>
<Style x:Key="AniamateRectangle" TargetType="Grid">
<Style.Resources>
<Style TargetType="Rectangle">
<Style.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="Fill.Color" BeginTime="0:0:0.2" Duration="0:0:0.5" To="Indigo"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Style.Resources>
</Style>
</Window.Resources>
<Grid Style="{StaticResource AniamateRectangle}">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle Height="100" Fill="Transparent" Width="100"/>
<Rectangle Height="100" Fill="Transparent" Width="100" Grid.Column="1"/>
<Rectangle Height="100" Fill="Transparent" Width="100" Grid.Column="2"/>
</Grid>
Related
I was working with some simple animations, when I noticed a strange effect when moving the mouse over a button. The colour of the background seemed to get dark and then lighten again, yet the animation code did not make it do that. Here is a stripped down version of the code that demonstrated this bizarre effect:
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MainWindow" Height="950" Width="800">
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Padding" Value="16,3,16,5" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Name="Border" Background="White" BorderBrush="#33323232" Height="{TemplateBinding Height}" MinWidth="{TemplateBinding MinWidth}" BorderThickness="2" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
<ContentPresenter Name="ContentPresenter" ContentSource="Content" TextElement.FontSize="14" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard DecelerationRatio="0.75">
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" BeginTime="0:0:0" Duration="0:0:2" To="#1A323232" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard DecelerationRatio="0.75">
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" BeginTime="0:0:0" Duration="0:0:2" From="#1A323232" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Button HorizontalAlignment="Center" VerticalAlignment="Center" Width="120" Height="32" Content="Click me" />
</Window>
Note that I slowed the animation right down in this example, to make this weird effect clearer for you. After experimenting, I discovered that if I use a darker colour to animate to, then the animation would go straight to that colour (work properly). I also noticed that if I set the alpha channel to 1 (FF), the problem also disappears. Try replacing the animations in the example above with these two:
<ColorAnimation Storyboard.TargetName="Border"
Storyboard.TargetProperty="Background.Color"
BeginTime="0:0:0" Duration="0:0:2" To="#EAEAEA" />
...
<ColorAnimation Storyboard.TargetName="Border"
Storyboard.TargetProperty="Background.Color"
BeginTime="0:0:0" Duration="0:0:2" From="#EAEAEA" />
Now, you should see the desired effect. This is what I had to do in the end, but I really wanted to use the semi-transparent colours instead. So, my question is does anybody know what is going wrong when animating with semi-transparent colours and how do I fix it?
When you animate an opaque white towards an increasingly transparent gray or black, the color first becomes increasingly gray, but at a certain point the white background starts to shine through more and more, so that finally (at #00000000) only the white background remains.
The effect is not so strange when you try this:
<StackPanel Background="White">
<Rectangle Width="100" Height="20" Fill="#ffff"/>
<Rectangle Width="100" Height="20" Fill="#eeee"/>
<Rectangle Width="100" Height="20" Fill="#dddd"/>
<Rectangle Width="100" Height="20" Fill="#cccc"/>
<Rectangle Width="100" Height="20" Fill="#bbbb"/>
<Rectangle Width="100" Height="20" Fill="#aaaa"/>
<Rectangle Width="100" Height="20" Fill="#9999"/>
<Rectangle Width="100" Height="20" Fill="#8888"/>
<Rectangle Width="100" Height="20" Fill="#7777"/>
<Rectangle Width="100" Height="20" Fill="#6666"/>
<Rectangle Width="100" Height="20" Fill="#5555"/>
<Rectangle Width="100" Height="20" Fill="#4444"/>
<Rectangle Width="100" Height="20" Fill="#3333"/>
<Rectangle Width="100" Height="20" Fill="#2222"/>
<Rectangle Width="100" Height="20" Fill="#1111"/>
</StackPanel>
which creates this output:
It looks entirely different on a black background:
I am working on a UWP windows 10 phone app and having trouble getting a storyboard to rotatetransform a path defined inside a buttons controltemplate.
I would prefer to acheive this in xaml. Do i specify for storyboard.targetproperty a quazi xaml path? => viewer.navbutton.PART_Arrow?
<Grid x:Name="layoutRoot" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="ShowNav">
<VisualState.Setters>
<Setter Target="navigation.(FrameworkElement.Height)" Value="Auto"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="HideNav">
<VisualState.Setters>
<Setter Target="navigation.(FrameworkElement.Height)" Value="0"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.Resources>
<Storyboard x:Name="rotateStoryBoard">
<DoubleAnimation Storyboard.TargetName="rotateDownArrow"
Storyboard.TargetProperty="Angle"
From="0"
To="90"
Duration="0:0:2"/>
</Storyboard>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Row="0" x:Name="navigation">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="1" x:Name="navbar" Margin="0,0,0,0"/>
<Button Grid.Column="0" x:Name="refresh_Copy"
VerticalAlignment="Top"
Content="Refresh"
Click="refresh_Click"
RenderTransformOrigin="1.457,0.562" />
</Grid>
<Grid Grid.Row="1" x:Name="viewer">
<Button x:Name="navButton"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Canvas.ZIndex="1"
Click="navButton_Click">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid HorizontalAlignment="Center">
<Path x:Name="PART_Circle"
Fill="{ThemeResource ButtonBackgroundThemeBrush}"
Stroke="{ThemeResource ButtonBackgroundThemeBrush}"
StrokeThickness="1.5"
Data="M0,0 A30,30 0 0 0 60,0"/>
<Path x:Name="PART_Arrow"
Stroke="GreenYellow"
StrokeThickness="1.5"
Data="M12,6 L30,18 L48,6">
<Path.RenderTransform>
<RotateTransform x:Name="rotateDownArrow"
Angle="0"
CenterX="30"
CenterY="12"/>
</Path.RenderTransform>
</Path>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
<WebView x:Name="Web"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"
NavigationCompleted="Web_NavigationCompleted"
ScriptNotify="Web_OnScriptNotify"
Canvas.ZIndex="0"/>
</Grid>
</Grid>
What is the correct syntax for a storyboard to access a path in a controltemplate?
The Path control you want to access is inside a ControlTemplate. According to the XAML name scopes in templates section of this article:
Templates in XAML provide the ability to reuse and reapply content in a straightforward way, but templates might also include elements with names defined at the template level. That same template might be used multiple times in a page. For this reason, templates define their own XAML name scopes, independent of the containing page where the style or template is applied.
So the ControlTemplate has its own namescopes, you cannot directly access a control inside it by Name. You may need to use VisualTreeHelper class to help you access the controls.
But if you want a storyboard can access the control, you can let the storyboard in a same template with the control and they will be in a same scope.
In additionally, Button control template contains four default VisualStates, trigger the storyboard by one visual state may be recommended. The following code put the storyboard into the ControlTemplate and it is triggered when the button is pressed that you can reference.
<Grid
x:Name="layoutRoot"
Padding="50"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
...
<Grid x:Name="viewer" Grid.Row="1">
<Button
x:Name="navButton"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Canvas.ZIndex="1"
Click="navButton_Click">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid HorizontalAlignment="Center">
<Grid.Resources>
<Storyboard x:Name="rotateStoryBoard">
<DoubleAnimation
BeginTime="0:0:0"
Duration="0:0:2"
From="0"
Storyboard.TargetName="rotateDownArrow"
Storyboard.TargetProperty="Angle"
To="90" />
</Storyboard>
</Grid.Resources>
<Path
x:Name="PART_Circle"
Fill="{ThemeResource ButtonBackgroundThemeBrush}"
Stroke="{ThemeResource ButtonBackgroundThemeBrush}"
StrokeThickness="1.5"
Data="M0,0 A30,30 0 0 0 60,0" />
<Path
x:Name="PART_Arrow"
Stroke="GreenYellow"
StrokeThickness="1.5"
Data="M12,6 L30,18 L48,6">
<Path.RenderTransform>
<RotateTransform x:Name="rotateDownArrow" Angle="0" CenterX="30" CenterY="12" />
</Path.RenderTransform>
</Path>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation
BeginTime="0:0:0"
Duration="0:0:2"
From="0"
Storyboard.TargetName="rotateDownArrow"
Storyboard.TargetProperty="Angle"
To="90" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
...
</Grid>
in the following example, I don't understand how I could make my "Live Updates" groupbox appear/disappear when the upper checkbox is checked/unchecked. I am looking for a fast fade in/fade out effect in XAML but I am a little lost..
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="WpfControlLibrary1.MainControl"
x:Name="MultiVol" MinHeight="520.12" MinWidth="213">
<Grid HorizontalAlignment="Stretch">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0.966"/>
<GradientStop Color="#FFD7D4FF"/>
</LinearGradientBrush>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel x:Name="LayoutRoot" HorizontalAlignment="Stretch" Grid.Row="0">
<GroupBox Margin="8,0" BorderBrush="#FF88B1D8" HorizontalAlignment="Stretch" Height="99">
<GroupBox.Header>
<WrapPanel>
<Label Content="General" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" FontFamily="/WpfControlLibrary1;component/Fonts/#Tahoma" />
</WrapPanel>
</GroupBox.Header>
<UniformGrid Columns="2">
<Label Content="RICs" />
<TextBox AcceptsReturn="False" AcceptsTab="True" AllowDrop="True" IsTabStop="True" />
<Label Content="Preference" />
<UniformGrid VerticalAlignment="Center" Columns="2" Rows="1">
<RadioButton GroupName="preference" Content="Exotic" IsChecked="False" />
<RadioButton GroupName="preference" Content="Flow" IsChecked="True" />
</UniformGrid>
<Label Content="Live updates" />
<CheckBox IsChecked="True" VerticalAlignment="Center"/>
</UniformGrid>
</GroupBox>
</StackPanel>
<DockPanel Grid.Row="1" HorizontalAlignment="Stretch">
<GroupBox Margin="8,0" BorderBrush="#FF88B1D8" HorizontalAlignment="Stretch">
<GroupBox.Header>
<WrapPanel>
<Label Content="Live updates" Background="#00000000" Foreground="#FF0033FF" FontWeight="Bold" FontFamily="/WpfControlLibrary1;component/Fonts/#Tahoma" />
</WrapPanel>
</GroupBox.Header>
<ListView MinHeight="100" Background="{x:Null}">
<ListView.View>
<GridView AllowsColumnReorder="False">
<GridViewColumn Header="RIC" />
<GridViewColumn Header="Last tick" />
</GridView>
</ListView.View>
</ListView>
</GroupBox>
</DockPanel>
</Grid>
</UserControl>
UPDATE : I get the fade in now, and I tried to add the fade out by adding a Trigger tag :
<DockPanel.Style>
<Style TargetType="{x:Type DockPanel}">
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="00:00:0.5" From="0.0" To="1.0" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="Visibility" Value="Hidden">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="00:00:0.5" From="1.0" To="0.0" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</DockPanel.Style>
Two steps.
First Visibility:
Create a BooleanToVisibilityConverter in Resources
<UserControl.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</UserControl.Resources>
Give your CheckBox a name
<CheckBox x:Name="LiveUpdateCheckBox" IsChecked="True" VerticalAlignment="Center" />
Bind the DockPanel.Visibility property per ElementName with BooleanToVisibilityConverter
<DockPanel Grid.Row="1" HorizontalAlignment="Stretch"
Visibility="{Binding ElementName=LiveUpdateCheckBox, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}">
Second Animation:
Create a DockPanel.Style for your LiveUpdates DockPanel
<DockPanel.Style>
<Style TargetType="{x:Type DockPanel}">
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="00:00:01" From="0.0" To="1.0" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</DockPanel.Style>
So, I have a itemsControl which is placed along the bottom of my screen like a status bar.
I have my own usercontrol called "Messenger" which are added to the itemsControl.
The ItemsControl uses a wrappanel with a FlowDirection of RightToLeft so when I add my Messager usercontrol , they start at the right hand side of the screen.
<ItemsControl x:Name="iControl" HorizontalAlignment="Right" VerticalAlignment="Bottom" Height="50" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel FlowDirection="RightToLeft" IsItemsHost="True" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
The messenger looks like the following
<UserControl x:Class="Tester.Messenger"
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"
x:Name="myUserControl"
>
<UserControl.Resources>
<Geometry x:Key="X">M0,0 L1,1 M0,1 L1,0</Geometry>
<Style x:Key="XButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent" >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard Storyboard.TargetName="MouseOverRectangle" Storyboard.TargetProperty="Opacity">
<DoubleAnimation To="1" Duration="00:00:.2"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Path x:Name="path" Margin="2" Data="M0,0 L1,1 M0,1 L1,0" Stroke="LightBlue" Width="10" Height="10" Stretch="Fill"/>
<Rectangle x:Name="MouseOverRectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="White" Opacity="0"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid>
<Grid.RenderTransform>
<TranslateTransform x:Name="translate" Y="50"/>
</Grid.RenderTransform>
<Grid.Triggers>
<EventTrigger RoutedEvent="Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard Storyboard.TargetName="translate" Storyboard.TargetProperty="Y">
<DoubleAnimationUsingKeyFrames>
<LinearDoubleKeyFrame KeyTime="00:00:00" Value="50"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.0" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase Oscillations="1" Springiness="9" EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Grid.Triggers>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Rectangle MinWidth="100" MinHeight="50" Fill="{Binding ElementName=myUserControl,Path=Fill}" Grid.ColumnSpan="2" Grid.RowSpan="2"/>
<Button x:Name="btnClose" Grid.Column="1" VerticalAlignment="Top" Style="{StaticResource XButtonStyle}" Margin="3,3" Click="btnClose_Click"/>
<TextBlock Text="{Binding ElementName=myUserControl,Path=Header, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Foreground="LightGray" FontSize="11" Margin="3,3,0,-3"/>
<TextBlock Grid.Row="1" Grid.ColumnSpan="2" Text="{Binding ElementName=myUserControl,Path=Message, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Foreground="White" FontSize="16" Margin="3,-5"/>
</Grid>
When I add "Messenger" usercontrols to my itemsControl manually such as
essenger m = new Messenger();
m.Height = 50;
m.Width = 135;
m.Header = "Kate";
m.Message = "Download File ?";
iControl.Items.Add(m);
everything works fine as expected. But if I databind the ItemsControl itemsource property to some ObservableCollection and add items to the ObservableCollection, then the "Messenger" usercontrols appear reversed. What I mean, is that the textBlocks appear on the right and the X button is on the left. So its a mirror image. I know its probably got something to do with the wrappanel, But I can't figure it out. I hope this makes sense
I have the same problem in that the images in my user control are reversed. My simplified code
<UserControl x:Class="MyApp.Wpf.MainModule.Controls.ButtonImages"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ViewModels="clr-namespace:TheAA.Road.Dispatch.Eva.App.Wpf.MainModule.ViewModels"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
>
<UserControl.Resources>
<ResourceDictionary>
<DataTemplate x:Key="ButtonImageTemplate" DataType="{x:Type ViewModels:ButtonImageViewModel}">
<Image Source="{Binding ButtonProperty.ImageUri}" />
</DataTemplate>
</ResourceDictionary>
</UserControl.Resources>
<WrapPanel Margin="0" Orientation="Horizontal" HorizontalAlignment="Right" FlowDirection="RightToLeft" >
<ItemsControl ItemsSource="{Binding}" ItemTemplate="{StaticResource ButtonImageTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</WrapPanel>
</UserControl>
i have modify and simplify the TabControl for my work. Now i will Animate the Chang between two TabItems - The Y-Scale not longer as hartcut but with a soft slide - do you know how can i do this?
Thanks a lot.
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
x:Class="tabControl.MainWindow" x:Name="Window" Title="MainWindow" Width="640" Height="480">
<Window.Resources>
<Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid x:Name="grid" ClipToBounds="true" SnapsToDevicePixels="true"
KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="0" />
</Grid.RowDefinitions>
<StackPanel IsItemsHost="True" />
<Border x:Name="ContentPanel" Grid.Column="1"
KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="0"
KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local"
VerticalAlignment="Top">
<ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="Top" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid x:Name="LayoutRoot">
<StackPanel Margin="150,100">
<TabControl Style="{DynamicResource TabControlStyle1}">
<TabItem Header="TabItem">
<Grid Background="red" Height="100" />
</TabItem>
<TabItem Header="TabItem">
<Grid Background="blue" Height="200" />
</TabItem>
<TabItem Header="TabItem">
<Grid Background="yellow" Height="100" />
</TabItem>
</TabControl>
<Border Background="Azure" Height="200" BorderBrush="Black" BorderThickness="1" />
</StackPanel>
</Grid>
<!-- ... -->
Thank you for your help.
i have extend my style with the VisualStateGroup of your example but it doesn't work. Maybe something is different between the ListBox and the TabControl?
<Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid x:Name="grid" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="0"/>
</Grid.RowDefinitions>
<StackPanel IsItemsHost="True"/>
<Grid x:Name="ContentPanel" Grid.Column="1">
<ContentPresenter x:Name="Compact" Opacity="1" ContentSource="SelectedContent" VerticalAlignment="Top">
<ContentPresenter.LayoutTransform>
<ScaleTransform ScaleY="1" />
</ContentPresenter.LayoutTransform>
</ContentPresenter>
<ContentPresenter x:Name="Details" Opacity="0" ContentSource="SelectedContent" VerticalAlignment="Top">
<ContentPresenter.LayoutTransform>
<ScaleTransform ScaleY="0" />
</ContentPresenter.LayoutTransform>
</ContentPresenter>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="SelectionStates">
<VisualState Name="Unselected">
<Storyboard SpeedRatio="2">
<DoubleAnimation To="1" Storyboard.TargetName="Compact" Storyboard.TargetProperty="Opacity" />
<DoubleAnimation To="1" Storyboard.TargetName="Compact" Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleY)" />
<DoubleAnimation To="0" Storyboard.TargetName="Details" Storyboard.TargetProperty="Opacity" />
<DoubleAnimation To="0" Storyboard.TargetName="Details" Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleY)" />
</Storyboard>
</VisualState>
<VisualState Name="Selected">
<Storyboard SpeedRatio="2">
<DoubleAnimation To="0" Storyboard.TargetName="Compact" Storyboard.TargetProperty="Opacity" />
<DoubleAnimation To="0" Storyboard.TargetName="Compact" Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleY)" />
<DoubleAnimation To="1" Storyboard.TargetName="Details" Storyboard.TargetProperty="Opacity" />
<DoubleAnimation To="1" Storyboard.TargetName="Details" Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleY)" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>