Skip to content

Commit d0ea60b

Browse files
nicolaihenriksennicolaihenriksen
authored
Fix vertical tab "selection animation" (#2785)
Instead of relying on the VisualStates, we now statically define the animation, but create 2 different ones (horiz and vert), which are then triggered depending on TabItem.IsSelected AND TabControl.TabStripPlacement.
1 parent 6dfcc1c commit d0ea60b

File tree

1 file changed

+86
-41
lines changed

1 file changed

+86
-41
lines changed

‎MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.TabControl.xaml

Lines changed: 86 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,52 @@
200200
<Setter Property="Template">
201201
<Setter.Value>
202202
<ControlTemplate TargetType="{x:Type TabItem}">
203+
<ControlTemplate.Resources>
204+
<Storyboard x:Key="SelectHorizontalTabItem">
205+
<DoubleAnimation Storyboard.TargetName="ScaleTransform"
206+
Storyboard.TargetProperty="ScaleY"
207+
From="0"
208+
To="1"
209+
Duration="0">
210+
</DoubleAnimation>
211+
<DoubleAnimation Storyboard.TargetName="ScaleTransform"
212+
Storyboard.TargetProperty="ScaleX"
213+
From="0"
214+
To="1"
215+
Duration="0:0:0.3">
216+
<DoubleAnimation.EasingFunction>
217+
<SineEase EasingMode="EaseOut" />
218+
</DoubleAnimation.EasingFunction>
219+
</DoubleAnimation>
220+
<DoubleAnimation Storyboard.TargetName="PART_BackgroundSelection"
221+
Storyboard.TargetProperty="Opacity"
222+
To="0.12"
223+
BeginTime="0:0:0.3"
224+
Duration="0" />
225+
</Storyboard>
226+
<Storyboard x:Key="SelectVerticalTabItem">
227+
<DoubleAnimation Storyboard.TargetName="ScaleTransform"
228+
Storyboard.TargetProperty="ScaleX"
229+
From="0"
230+
To="1"
231+
Duration="0">
232+
</DoubleAnimation>
233+
<DoubleAnimation Storyboard.TargetName="ScaleTransform"
234+
Storyboard.TargetProperty="ScaleY"
235+
From="0"
236+
To="1"
237+
Duration="0:0:0.3">
238+
<DoubleAnimation.EasingFunction>
239+
<SineEase EasingMode="EaseOut" />
240+
</DoubleAnimation.EasingFunction>
241+
</DoubleAnimation>
242+
<DoubleAnimation Storyboard.TargetName="PART_BackgroundSelection"
243+
Storyboard.TargetProperty="Opacity"
244+
To="0.12"
245+
BeginTime="0:0:0.3"
246+
Duration="0" />
247+
</Storyboard>
248+
</ControlTemplate.Resources>
203249
<Grid x:Name="Root">
204250
<!-- This is the Header label ColorZone. -->
205251
<wpf:ColorZone
@@ -236,52 +282,13 @@
236282
RenderTransformOrigin="0.5,0.5"
237283
Visibility="Hidden">
238284
<Border.RenderTransform>
239-
<ScaleTransform x:Name="ScaleTransform" ScaleX="0" ScaleY="1" />
285+
<ScaleTransform x:Name="ScaleTransform" ScaleX="0" ScaleY="0" />
240286
</Border.RenderTransform>
241287
<Rectangle
242288
x:Name="PART_BackgroundSelection"
243289
Fill="{TemplateBinding Background}"
244-
Opacity="0.12" />
290+
Opacity="0.0" />
245291
</Border>
246-
247-
<VisualStateManager.VisualStateGroups>
248-
<VisualStateGroup x:Name="SelectionStates">
249-
<VisualState x:Name="Selected">
250-
<Storyboard>
251-
<DoubleAnimation
252-
Storyboard.TargetName="ScaleTransform"
253-
Storyboard.TargetProperty="ScaleX"
254-
From="0"
255-
To="1"
256-
Duration="0:0:0.3">
257-
<DoubleAnimation.EasingFunction>
258-
<SineEase EasingMode="EaseOut" />
259-
</DoubleAnimation.EasingFunction>
260-
</DoubleAnimation>
261-
<DoubleAnimation
262-
BeginTime="0:0:0.3"
263-
Storyboard.TargetName="PART_BackgroundSelection"
264-
Storyboard.TargetProperty="Opacity"
265-
To="0.12"
266-
Duration="0" />
267-
</Storyboard>
268-
</VisualState>
269-
<VisualState x:Name="Unselected">
270-
<Storyboard>
271-
<DoubleAnimation
272-
Storyboard.TargetName="ScaleTransform"
273-
Storyboard.TargetProperty="ScaleX"
274-
To="0"
275-
Duration="0" />
276-
<DoubleAnimation
277-
Storyboard.TargetName="PART_BackgroundSelection"
278-
Storyboard.TargetProperty="Opacity"
279-
To="0"
280-
Duration="0" />
281-
</Storyboard>
282-
</VisualState>
283-
</VisualStateGroup>
284-
</VisualStateManager.VisualStateGroups>
285292
</Grid>
286293
<ControlTemplate.Triggers>
287294
<Trigger Property="IsEnabled" Value="False">
@@ -301,6 +308,44 @@
301308
<Setter TargetName="SelectionHighlightBorder" Property="BorderThickness" Value="2,0,0,0" />
302309
</DataTrigger>
303310

311+
<!-- Selected TabItem animations (vary depending on TabControl.TabStripPlacement value) -->
312+
<MultiDataTrigger>
313+
<MultiDataTrigger.Conditions>
314+
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsSelected}" Value="True" />
315+
<Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Top" />
316+
</MultiDataTrigger.Conditions>
317+
<MultiDataTrigger.EnterActions>
318+
<BeginStoryboard Storyboard="{StaticResource SelectHorizontalTabItem}" />
319+
</MultiDataTrigger.EnterActions>
320+
</MultiDataTrigger>
321+
<MultiDataTrigger>
322+
<MultiDataTrigger.Conditions>
323+
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsSelected}" Value="True" />
324+
<Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Bottom" />
325+
</MultiDataTrigger.Conditions>
326+
<MultiDataTrigger.EnterActions>
327+
<BeginStoryboard Storyboard="{StaticResource SelectHorizontalTabItem}" />
328+
</MultiDataTrigger.EnterActions>
329+
</MultiDataTrigger>
330+
<MultiDataTrigger>
331+
<MultiDataTrigger.Conditions>
332+
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsSelected}" Value="True" />
333+
<Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Left" />
334+
</MultiDataTrigger.Conditions>
335+
<MultiDataTrigger.EnterActions>
336+
<BeginStoryboard Storyboard="{StaticResource SelectVerticalTabItem}" />
337+
</MultiDataTrigger.EnterActions>
338+
</MultiDataTrigger>
339+
<MultiDataTrigger>
340+
<MultiDataTrigger.Conditions>
341+
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsSelected}" Value="True" />
342+
<Condition Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Right" />
343+
</MultiDataTrigger.Conditions>
344+
<MultiDataTrigger.EnterActions>
345+
<BeginStoryboard Storyboard="{StaticResource SelectVerticalTabItem}" />
346+
</MultiDataTrigger.EnterActions>
347+
</MultiDataTrigger>
348+
304349
<!-- Force the header foreground do be MaterialDesignBody by default (only for not filled tabs) -->
305350
<Trigger Property="wpf:TabAssist.HasFilledTab" Value="False">
306351
<Setter TargetName="ColorZoneHeader" Property="wpf:ColorZoneAssist.Foreground" Value="{DynamicResource MaterialDesignBody}" />

0 commit comments

Comments
 (0)