Skip to content

Instantly share code, notes, and snippets.

@jespersh
Created December 6, 2018 14:19
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jespersh/7a9d68b5e88057b2edb767a112e48c5a to your computer and use it in GitHub Desktop.
Save jespersh/7a9d68b5e88057b2edb767a112e48c5a to your computer and use it in GitHub Desktop.
Tabcontrol and tabitem for MaterialDesignTheme
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:wpf="http://materialdesigninxaml.net/winfx/xaml/themes">
<Style x:Key="MaterialDesignTabControl" TargetType="{x:Type TabControl}">
<Setter Property="BorderThickness" Value="1" />
</Style>
<Style x:Key="MaterialDesignTabItem" TargetType="{x:Type TabItem}">
<Setter Property="Background" Value="{DynamicResource MaterialDesignBackground}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<ControlTemplate.Resources>
<Storyboard x:Key="OnSelected">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="clickBorder" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.05" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<DiscreteDoubleKeyFrame KeyTime="0:0:0.6" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<SineEase EasingMode="EaseOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="clickBorder">
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.81" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="border">
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="OnDeselected">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="border">
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Grid Background="{TemplateBinding Background}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Border x:Name="clickBorder" Background="{DynamicResource MaterialDesignFlatButtonClick}" Opacity="0" RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
</Border>
<ContentPresenter x:Name="headerContent" ContentSource="Header" HorizontalAlignment="Center" Margin="16,3,16,3" RecognizesAccessKey="True" VerticalAlignment="Center" />
<Border x:Name="border" Background="{DynamicResource PrimaryHueMidBrush}" Height="2" HorizontalAlignment="Stretch" Padding="8" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Bottom">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource OnSelected}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource OnDeselected}"/>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.23"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment