How can I animate the y-scale in a custom TabControl? - wpf

Question

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>