Skip to content

Instantly share code, notes, and snippets.

@s-fernandez-v
Created September 27, 2022 10:21
Show Gist options
  • Save s-fernandez-v/c140631ac22c8378fa3da165c9b9f2b4 to your computer and use it in GitHub Desktop.
Save s-fernandez-v/c140631ac22c8378fa3da165c9b9f2b4 to your computer and use it in GitHub Desktop.
Fade tabs
<Grid
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid.Resources>
<Storyboard x:Key="ShowAnim" AccelerationRatio="0.5" DecelerationRatio="0.5">
<DoubleAnimation Storyboard.TargetName="Tabs" Storyboard.TargetProperty="RenderTransform.X" To="0" Duration="0:0:0.2"/>
</Storyboard>
<Storyboard x:Key="HideAnim" AccelerationRatio="0.5" DecelerationRatio="0.5">
<DoubleAnimation Storyboard.TargetName="Tabs" Storyboard.TargetProperty="RenderTransform.X" To="-340" Duration="0:0:0.2"/>
</Storyboard>
<DataTemplate x:Key="TabHeader">
<DataTemplate.Resources>
<Storyboard x:Key="ToggleShow">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Show" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Hide" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="ToggleHide">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Show" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Hide" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</DataTemplate.Resources>
<Grid>
<ContentPresenter x:Name="Show" Content="{TemplateBinding Content}"/>
<ContentPresenter x:Name="Hide" Content="{TemplateBinding Content}" Visibility="Collapsed"/>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="False">
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource ToggleShow}"/>
</DataTrigger.EnterActions>
</DataTrigger>
<EventTrigger SourceName="Show" RoutedEvent="MouseDown">
<BeginStoryboard Storyboard="{StaticResource ToggleHide}"/>
<BeginStoryboard Storyboard="{StaticResource ShowAnim}"/>
</EventTrigger>
<EventTrigger SourceName="Hide" RoutedEvent="MouseDown">
<BeginStoryboard Storyboard="{StaticResource ToggleShow}"/>
<BeginStoryboard Storyboard="{StaticResource HideAnim}"/>
</EventTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Grid.Resources>
<TabControl x:Name="Tabs" Width="400" TabStripPlacement="Right" HorizontalAlignment="Left">
<TabControl.RenderTransform>
<TranslateTransform X="-340"/>
</TabControl.RenderTransform>
<TabItem Header="Tab 1" HeaderTemplate="{StaticResource TabHeader}">
<Ellipse Margin="10" Fill="LightBlue"/>
</TabItem>
<TabItem Header="Tab 2" HeaderTemplate="{StaticResource TabHeader}">
<Ellipse Margin="10" Fill="Salmon"/>
</TabItem>
<TabItem Header="Tab 3" HeaderTemplate="{StaticResource TabHeader}">
<Ellipse Margin="10" Fill="LightGreen"/>
</TabItem>
</TabControl>
</Grid>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment