Skip to content

Commit 1a4a1c6

Browse files
committed
Merge branch 'ExpanderDirections' of https://github.com/l1pton17/MaterialDesignInXamlToolkit into l1pton17-ExpanderDirections
2 parents 78588c7 + d116879 commit 1a4a1c6

File tree

1 file changed

+182
-38
lines changed

1 file changed

+182
-38
lines changed

MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Expander.xaml

Lines changed: 182 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66

77
<converters:MathMultipleConverter x:Key="MathMlpMultipleConverter" Operation="Multiply" />
88

9+
10+
911
<Style x:Key="MaterialDesignExpanderToggleButton" TargetType="{x:Type ToggleButton}">
1012
<Setter Property="Width" Value="16"/>
1113
<Setter Property="Height" Value="16"/>
@@ -90,15 +92,119 @@
9092
</Setter>
9193
</Style>
9294

93-
<Style x:Key="MaterialDesignExpanderHeaderToggleButton" TargetType="{x:Type ToggleButton}">
95+
<Style x:Key="MaterialDesignRightHeaderStyle" TargetType="{x:Type ToggleButton}">
96+
<Setter Property="Background" Value="Transparent" />
97+
<Setter Property="HorizontalAlignment" Value="Left" />
98+
<Setter Property="VerticalAlignment" Value="Stretch" />
99+
<Setter Property="Template">
100+
<Setter.Value>
101+
<ControlTemplate TargetType="{x:Type ToggleButton}">
102+
<Grid>
103+
<Grid.RowDefinitions>
104+
<RowDefinition Height="Auto"/>
105+
<RowDefinition />
106+
</Grid.RowDefinitions>
107+
<ToggleButton Grid.Row="0"
108+
HorizontalAlignment="Left"
109+
IsChecked="{Binding Path=IsChecked, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
110+
Style="{StaticResource MaterialDesignExpanderToggleButton}"
111+
RenderTransformOrigin="0.5,0.5">
112+
<ToggleButton.RenderTransform>
113+
<RotateTransform Angle="90"/>
114+
</ToggleButton.RenderTransform>
115+
</ToggleButton>
116+
<ContentPresenter Grid.Row="1"
117+
HorizontalAlignment="Center"
118+
Content="{TemplateBinding Content}" VerticalAlignment="Top" />
119+
</Grid>
120+
</ControlTemplate>
121+
</Setter.Value>
122+
</Setter>
123+
</Style>
124+
125+
<Style x:Key="MaterialDesignLeftHeaderStyle" TargetType="{x:Type ToggleButton}">
94126
<Setter Property="Background" Value="Transparent" />
95127
<Setter Property="HorizontalAlignment" Value="Left" />
128+
<Setter Property="VerticalAlignment" Value="Stretch" />
129+
<Setter Property="Template">
130+
<Setter.Value>
131+
<ControlTemplate TargetType="{x:Type ToggleButton}">
132+
<Grid>
133+
<Grid.RowDefinitions>
134+
<RowDefinition Height="Auto"/>
135+
<RowDefinition />
136+
</Grid.RowDefinitions>
137+
<ToggleButton Grid.Row="0"
138+
HorizontalAlignment="Left"
139+
IsChecked="{Binding Path=IsChecked, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
140+
Style="{StaticResource MaterialDesignExpanderToggleButton}"
141+
RenderTransformOrigin="0.5,0.5">
142+
<ToggleButton.RenderTransform>
143+
<RotateTransform Angle="-90"/>
144+
</ToggleButton.RenderTransform>
145+
</ToggleButton>
146+
<ContentPresenter Grid.Row="1"
147+
HorizontalAlignment="Center"
148+
Content="{TemplateBinding Content}" VerticalAlignment="Top" />
149+
</Grid>
150+
</ControlTemplate>
151+
</Setter.Value>
152+
</Setter>
153+
</Style>
154+
155+
<Style x:Key="MaterialDesignDownHeaderStyle" TargetType="{x:Type ToggleButton}">
156+
<Setter Property="Background" Value="Transparent" />
157+
<Setter Property="HorizontalAlignment" Value="Stretch" />
158+
<Setter Property="VerticalAlignment" Value="Center" />
159+
<Setter Property="Template">
160+
<Setter.Value>
161+
<ControlTemplate TargetType="{x:Type ToggleButton}">
162+
<Grid>
163+
<Grid.ColumnDefinitions>
164+
<ColumnDefinition Width="Auto"/>
165+
<ColumnDefinition />
166+
</Grid.ColumnDefinitions>
167+
<Grid Margin="16 0 16 0">
168+
<ToggleButton Grid.Column="0"
169+
VerticalAlignment="Center"
170+
IsChecked="{Binding Path=IsChecked, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
171+
Style="{StaticResource MaterialDesignExpanderToggleButton}"/>
172+
</Grid>
173+
<ContentPresenter Grid.Column="1"
174+
Content="{TemplateBinding Content}"
175+
VerticalAlignment="Center"/>
176+
</Grid>
177+
</ControlTemplate>
178+
</Setter.Value>
179+
</Setter>
180+
</Style>
181+
182+
<Style x:Key="MaterialDesignUpHeaderStyle" TargetType="{x:Type ToggleButton}">
183+
<Setter Property="Background" Value="Transparent" />
184+
<Setter Property="HorizontalAlignment" Value="Stretch" />
96185
<Setter Property="VerticalAlignment" Value="Center" />
97-
<Setter Property="Margin" Value="16,0,0,0" />
98186
<Setter Property="Template">
99187
<Setter.Value>
100188
<ControlTemplate TargetType="{x:Type ToggleButton}">
101-
<ContentPresenter Content="{TemplateBinding Content}" VerticalAlignment="Center" />
189+
<Grid>
190+
<Grid.ColumnDefinitions>
191+
<ColumnDefinition Width="Auto"/>
192+
<ColumnDefinition />
193+
</Grid.ColumnDefinitions>
194+
<Grid Margin="16 0 16 0">
195+
<ToggleButton IsChecked="{Binding Path=IsChecked, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
196+
VerticalAlignment="Center"
197+
Style="{StaticResource MaterialDesignExpanderToggleButton}"
198+
RenderTransformOrigin="0.5,0.5">
199+
<ToggleButton.RenderTransform>
200+
<RotateTransform Angle="-180"/>
201+
</ToggleButton.RenderTransform>
202+
</ToggleButton>
203+
</Grid>
204+
<ContentPresenter Grid.Column="1"
205+
VerticalAlignment="Center"
206+
Content="{TemplateBinding Content}" />
207+
</Grid>
102208
</ControlTemplate>
103209
</Setter.Value>
104210
</Setter>
@@ -110,7 +216,7 @@
110216
<Setter Property="Template">
111217
<Setter.Value>
112218
<ControlTemplate TargetType="{x:Type Expander}">
113-
<Grid>
219+
<Grid HorizontalAlignment="Left">
114220
<VisualStateManager.VisualStateGroups>
115221
<VisualStateGroup x:Name="ExpansionStates">
116222
<VisualStateGroup.Transitions>
@@ -163,41 +269,79 @@
163269
</VisualState>
164270
</VisualStateGroup>
165271
</VisualStateManager.VisualStateGroups>
166-
<Grid.RowDefinitions>
167-
<RowDefinition MinHeight="25" />
168-
<RowDefinition />
169-
</Grid.RowDefinitions>
170-
<Border BorderThickness="0" Cursor="Hand">
171-
<Grid>
172-
<Grid.ColumnDefinitions>
173-
<ColumnDefinition Width="16" />
174-
<ColumnDefinition Width="100*" />
175-
</Grid.ColumnDefinitions>
176-
<ToggleButton IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
177-
OverridesDefaultStyle="True"
178-
Style="{StaticResource MaterialDesignExpanderToggleButton}" />
179-
<ToggleButton Grid.Column="1"
180-
IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
181-
Style="{StaticResource MaterialDesignExpanderHeaderToggleButton}">
182-
<ContentPresenter ContentSource="Header" HorizontalAlignment="Stretch" RecognizesAccessKey="True" VerticalAlignment="Top" />
183-
</ToggleButton>
184-
</Grid>
185-
</Border>
186-
<Border Grid.Row="1">
187-
<StackPanel x:Name="ContentPanel">
188-
<StackPanel.Tag>
189-
<system:Double>0.0</system:Double>
190-
</StackPanel.Tag>
191-
<StackPanel.Height>
192-
<MultiBinding Converter="{StaticResource MathMlpMultipleConverter}">
193-
<Binding ElementName="PART_Content" Path="ActualHeight"/>
194-
<Binding RelativeSource="{RelativeSource Self}" Path="Tag"/>
195-
</MultiBinding>
196-
</StackPanel.Height>
197-
<ContentPresenter Name="PART_Content" />
198-
</StackPanel>
199-
</Border>
272+
<DockPanel>
273+
<ToggleButton Name="HeaderSite"
274+
DockPanel.Dock="Top"
275+
BorderThickness="0" Cursor="Hand"
276+
MinHeight="25"
277+
IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
278+
Style="{StaticResource MaterialDesignDownHeaderStyle}"
279+
Content="{TemplateBinding Header}"
280+
ContentTemplate="{TemplateBinding HeaderTemplate}"
281+
ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
282+
ContentStringFormat="{TemplateBinding HeaderStringFormat}"/>
283+
<Border Name="ContentSite"
284+
DockPanel.Dock="Bottom">
285+
<StackPanel Name="ContentPanel"
286+
HorizontalAlignment="Left">
287+
<StackPanel.Tag>
288+
<system:Double>0.0</system:Double>
289+
</StackPanel.Tag>
290+
<StackPanel.Height>
291+
<MultiBinding Converter="{StaticResource MathMlpMultipleConverter}">
292+
<Binding ElementName="PART_Content" Path="ActualHeight"/>
293+
<Binding RelativeSource="{RelativeSource Self}" Path="Tag"/>
294+
</MultiBinding>
295+
</StackPanel.Height>
296+
<StackPanel.Width>
297+
<MultiBinding Converter="{StaticResource MathMlpMultipleConverter}">
298+
<Binding ElementName="PART_Content" Path="ActualWidth"/>
299+
<Binding RelativeSource="{RelativeSource Self}" Path="Tag"/>
300+
</MultiBinding>
301+
</StackPanel.Width>
302+
<ContentPresenter Name="PART_Content" Focusable="False"
303+
ContentTemplate="{TemplateBinding ContentTemplate}"
304+
ContentStringFormat="{TemplateBinding ContentStringFormat}"
305+
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"/>
306+
</StackPanel>
307+
</Border>
308+
</DockPanel>
200309
</Grid>
310+
<ControlTemplate.Triggers>
311+
<Trigger Property="ExpandDirection" Value="Right">
312+
<Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Left"/>
313+
<Setter Property="DockPanel.Dock" TargetName="ContentSite" Value="Right"/>
314+
<Setter Property="Orientation" TargetName="ContentPanel" Value="Horizontal"/>
315+
<!--Setter Property="MinWidth" TargetName="ContentSite" Value="{Binding ElementName=PART_Content, Path=ActualWidth}"/-->
316+
<Setter Property="Height" TargetName="ContentPanel" Value="Auto"/>
317+
<Setter Property="Style" TargetName="HeaderSite" Value="{StaticResource MaterialDesignRightHeaderStyle}"/>
318+
</Trigger>
319+
320+
<Trigger Property="ExpandDirection" Value="Left">
321+
<Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Right"/>
322+
<Setter Property="DockPanel.Dock" TargetName="ContentSite" Value="Left"/>
323+
<Setter Property="Orientation" TargetName="ContentPanel" Value="Horizontal"/>
324+
<Setter Property="Height" TargetName="ContentPanel" Value="Auto"/>
325+
<Setter Property="Style" TargetName="HeaderSite" Value="{StaticResource MaterialDesignLeftHeaderStyle}"/>
326+
</Trigger>
327+
328+
<Trigger Property="ExpandDirection" Value="Up">
329+
<Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Bottom"/>
330+
<Setter Property="DockPanel.Dock" TargetName="ContentSite" Value="Top"/>
331+
<!--Setter Property="MinHeight" TargetName="ContentSite" Value="{Binding ElementName=PART_Content, Path=ActualHeight}"/-->
332+
<Setter Property="Orientation" TargetName="ContentPanel" Value="Vertical"/>
333+
<Setter Property="Width" TargetName="ContentPanel" Value="Auto"/>
334+
<Setter Property="Style" TargetName="HeaderSite" Value="{StaticResource MaterialDesignUpHeaderStyle}"/>
335+
</Trigger>
336+
337+
<Trigger Property="ExpandDirection" Value="Down">
338+
<Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Top"/>
339+
<Setter Property="DockPanel.Dock" TargetName="ContentSite" Value="Bottom"/>
340+
<Setter Property="Orientation" TargetName="ContentPanel" Value="Vertical"/>
341+
<Setter Property="Width" TargetName="ContentPanel" Value="Auto"/>
342+
<Setter Property="Style" TargetName="HeaderSite" Value="{StaticResource MaterialDesignDownHeaderStyle}"/>
343+
</Trigger>
344+
</ControlTemplate.Triggers>
201345
</ControlTemplate>
202346
</Setter.Value>
203347
</Setter>

0 commit comments

Comments
 (0)