Skip to content

Commit 71e091f

Browse files
spiegelpspiegelp
committed
clickable header and animation for the Expander
1 parent 6de847f commit 71e091f

File tree

2 files changed

+56
-17
lines changed

2 files changed

+56
-17
lines changed

‎MainDemo.Wpf/Expander.xaml

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,19 @@
1616
<Expander.Header>
1717
<TextBlock Text="Expander Example 1" />
1818
</Expander.Header>
19-
<TextBlock Text="A short text to proof functionality." />
19+
<Border Background="{StaticResource MaterialDesignBackground}" CornerRadius="5" Padding="5">
20+
<StackPanel Orientation="Vertical">
21+
<TextBlock Text="A short text to proof functionality." />
22+
<TextBlock Margin="0,50,0,0" Text="A short text to proof functionality." />
23+
</StackPanel>
24+
</Border>
2025
</Expander>
2126
<TextBlock Text="Text after the expander." Margin="0,8,0,0" />
2227
</StackPanel>
2328
<StackPanel Grid.Column="1" HorizontalAlignment="Stretch" Margin="8" Orientation="Vertical" VerticalAlignment="Stretch">
2429
<Expander IsExpanded="False" HorizontalAlignment="Stretch">
2530
<Expander.Header>
26-
<TextBlock Text="Expander Example 1" />
31+
<TextBlock Text="Expander Example 2" />
2732
</Expander.Header>
2833
<TextBlock Text="A short text to proof functionality." />
2934
</Expander>

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

Lines changed: 49 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,6 @@
22
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
33
xmlns:wpf="clr-namespace:MaterialDesignThemes.Wpf">
44

5-
<Style x:Key="FocusVisual">
6-
<Setter Property="Control.Template">
7-
<Setter.Value>
8-
<ControlTemplate>
9-
<Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
10-
</ControlTemplate>
11-
</Setter.Value>
12-
</Setter>
13-
</Style>
14-
155
<Style x:Key="MaterialDesignExpanderToggleButton" TargetType="{x:Type ToggleButton}">
166
<Setter Property="Width" Value="32"/>
177
<Setter Property="Height" Value="32"/>
@@ -62,19 +52,46 @@
6252
</Setter.Value>
6353
</Setter>
6454
</Style>
65-
55+
56+
<Style x:Key="MaterialDesignExpanderHeaderToggleButton" TargetType="{x:Type ToggleButton}">
57+
<Setter Property="Background" Value="Transparent" />
58+
<Setter Property="HorizontalAlignment" Value="Left" />
59+
<Setter Property="VerticalAlignment" Value="Center" />
60+
<Setter Property="Margin" Value="8,0" />
61+
<Setter Property="Template">
62+
<Setter.Value>
63+
<ControlTemplate TargetType="{x:Type ToggleButton}">
64+
<ContentPresenter Content="{TemplateBinding Content}" VerticalAlignment="Center" />
65+
</ControlTemplate>
66+
</Setter.Value>
67+
</Setter>
68+
</Style>
69+
6670
<Style x:Key="MaterialDesignExpander" TargetType="{x:Type Expander}">
6771
<Setter Property="Background" Value="{StaticResource MaterialDesignPaper}" />
6872
<Setter Property="Template">
6973
<Setter.Value>
7074
<ControlTemplate TargetType="{x:Type Expander}">
75+
<ControlTemplate.Resources>
76+
<Storyboard x:Key="OpenContent">
77+
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="PART_Content">
78+
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="1"/>
79+
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1"/>
80+
</DoubleAnimationUsingKeyFrames>
81+
</Storyboard>
82+
<Storyboard x:Key="CloseContent">
83+
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="PART_Content">
84+
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0" />
85+
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0" />
86+
</DoubleAnimationUsingKeyFrames>
87+
</Storyboard>
88+
</ControlTemplate.Resources>
7189
<Grid>
7290
<Grid.RowDefinitions>
7391
<RowDefinition MinHeight="25" />
7492
<RowDefinition Name="PART_ContentRow" Height="0" />
7593
</Grid.RowDefinitions>
7694
<Border BorderThickness="0">
77-
<!--<Border BorderBrush="{DynamicResource MaterialDesignDivider}" BorderThickness="0,0,0,1" CornerRadius="2,2,0,0">-->
7895
<Grid>
7996
<Grid.ColumnDefinitions>
8097
<ColumnDefinition Width="25" />
@@ -83,17 +100,34 @@
83100
<ToggleButton IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
84101
Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource TemplatedParent}}" OverridesDefaultStyle="True"
85102
Style="{StaticResource MaterialDesignExpanderToggleButton}" />
86-
<ContentPresenter Grid.Column="1" ContentSource="Header" HorizontalAlignment="Stretch" Margin="8,0" RecognizesAccessKey="True" VerticalAlignment="Center" />
103+
<ToggleButton Grid.Column="1" IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
104+
Style="{StaticResource MaterialDesignExpanderHeaderToggleButton}">
105+
<ContentPresenter ContentSource="Header" HorizontalAlignment="Stretch" RecognizesAccessKey="True" VerticalAlignment="Center" />
106+
</ToggleButton>
87107
</Grid>
88108
</Border>
89109
<Border Grid.Row="1">
90-
<!--<Border Grid.Row="1" x:Name="PART_Content" BorderBrush="{DynamicResource MaterialDesignDivider}" BorderThickness="1" CornerRadius="0,0,2,2">-->
91-
<ContentPresenter />
110+
<ContentPresenter Name="PART_Content">
111+
<ContentPresenter.RenderTransform>
112+
<TransformGroup>
113+
<ScaleTransform ScaleY="0" />
114+
<SkewTransform />
115+
<RotateTransform />
116+
<TranslateTransform />
117+
</TransformGroup>
118+
</ContentPresenter.RenderTransform>
119+
</ContentPresenter>
92120
</Border>
93121
</Grid>
94122
<ControlTemplate.Triggers>
95123
<Trigger Property="IsExpanded" Value="True">
96124
<Setter TargetName="PART_ContentRow" Property="Height" Value="{Binding ElementName=PART_Content, Path=DesiredHeight}" />
125+
<Trigger.EnterActions>
126+
<BeginStoryboard Storyboard="{StaticResource OpenContent}" />
127+
</Trigger.EnterActions>
128+
<Trigger.ExitActions>
129+
<BeginStoryboard Storyboard="{StaticResource CloseContent}" />
130+
</Trigger.ExitActions>
97131
</Trigger>
98132
</ControlTemplate.Triggers>
99133
</ControlTemplate>

0 commit comments

Comments
 (0)