Skip to content

Commit 31b4fb3

Browse files
theiam79Keboo
theiam79
authored and
Keboo
committed
Fix #855 Add ability to adjust Expander header padding (#1190)
* Fix 855 Add ability to adjust head padding * Adding examples of custom header padding to demo app.
1 parent 1238fba commit 31b4fb3

File tree

4 files changed

+131
-38
lines changed

4 files changed

+131
-38
lines changed

‎MainDemo.Wpf/Expander.xaml

Lines changed: 55 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,7 @@
1818
</Grid.ColumnDefinitions>
1919
<smtx:XamlDisplay Key="explander_1">
2020
<StackPanel>
21-
<Expander HorizontalAlignment="Stretch"
22-
Header="Expander Example 1a">
21+
<Expander HorizontalAlignment="Stretch" Header="Expander Example 1a">
2322
<StackPanel Orientation="Vertical"
2423
TextBlock.Foreground="{DynamicResource MaterialDesignBody}"
2524
Margin="24,8,24,16">
@@ -28,8 +27,7 @@
2827
TextWrapping="Wrap"/>
2928
</StackPanel>
3029
</Expander>
31-
<Expander HorizontalAlignment="Stretch"
32-
Header="Expander Example 1b">
30+
<Expander HorizontalAlignment="Stretch" Header="Expander Example 1b">
3331
<StackPanel Orientation="Vertical"
3432
TextBlock.Foreground="{DynamicResource MaterialDesignBody}"
3533
Margin="24,8,24,16">
@@ -38,8 +36,7 @@
3836
TextWrapping="Wrap"/>
3937
</StackPanel>
4038
</Expander>
41-
<Expander HorizontalAlignment="Stretch"
42-
Header="Expander Example 1c">
39+
<Expander HorizontalAlignment="Stretch" Header="Expander Example 1c">
4340
<StackPanel Orientation="Vertical"
4441
TextBlock.Foreground="{DynamicResource MaterialDesignBody}"
4542
Margin="24,8,24,16">
@@ -48,43 +45,49 @@
4845
TextWrapping="Wrap"/>
4946
</StackPanel>
5047
</Expander>
51-
48+
<Expander HorizontalAlignment="Stretch" Header="Custom Header Padding"
49+
materialDesign:ExpanderAssist.DownHeaderPadding="35,2,24,2">
50+
<StackPanel Orientation="Vertical"
51+
TextBlock.Foreground="{DynamicResource MaterialDesignBody}"
52+
Margin="24,8,24,16">
53+
<TextBlock Text="Your Content" />
54+
<TextBlock Opacity=".68" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
55+
TextWrapping="Wrap"/>
56+
</StackPanel>
57+
</Expander>
5258
</StackPanel>
5359
</smtx:XamlDisplay>
5460

5561
<smtx:XamlDisplay Key="expander_2" Grid.Column="0" Grid.Row="1" Margin="4 24 0 0">
5662
<materialDesign:Card Background="{DynamicResource MaterialDesignBackground}">
5763
<StackPanel>
58-
<Expander HorizontalAlignment="Stretch"
59-
Header="Expander Example 2a">
64+
<Expander HorizontalAlignment="Stretch" Header="Expander Example 2a">
6065
<StackPanel Orientation="Vertical"
61-
TextBlock.Foreground="{DynamicResource MaterialDesignBody}"
62-
Margin="24,8,24,16">
66+
TextBlock.Foreground="{DynamicResource MaterialDesignBody}"
67+
Margin="24,8,24,16">
6368
<TextBlock Text="Your Content" />
6469
<TextBlock Opacity=".68" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
65-
TextWrapping="Wrap"/>
70+
TextWrapping="Wrap"/>
6671
</StackPanel>
6772
</Expander>
6873
<Border Background="{DynamicResource MaterialDesignDivider}" Height="1" HorizontalAlignment="Stretch" SnapsToDevicePixels="True" />
69-
<Expander HorizontalAlignment="Stretch"
70-
Header="Expander Example 2b">
74+
<Expander HorizontalAlignment="Stretch" Header="Expander Example 2b">
7175
<StackPanel Orientation="Vertical"
72-
TextBlock.Foreground="{DynamicResource MaterialDesignBody}"
73-
Margin="24,8,24,16">
76+
TextBlock.Foreground="{DynamicResource MaterialDesignBody}"
77+
Margin="24,8,24,16">
7478
<TextBlock Text="Your Content" />
7579
<TextBlock Opacity=".68" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
76-
TextWrapping="Wrap"/>
80+
TextWrapping="Wrap"/>
7781
</StackPanel>
7882
</Expander>
7983
<Border Background="{DynamicResource MaterialDesignDivider}" Height="1" HorizontalAlignment="Stretch" SnapsToDevicePixels="True" />
80-
<Expander HorizontalAlignment="Stretch"
81-
Header="Expander Example 2c">
84+
<Expander HorizontalAlignment="Stretch" Header="Expander Example 2c">
8285
<StackPanel Orientation="Vertical"
83-
TextBlock.Foreground="{DynamicResource MaterialDesignBody}"
84-
Margin="24,8,24,16">
86+
TextBlock.Foreground="{DynamicResource MaterialDesignBody}"
87+
Margin="24,8,24,16">
8588
<TextBlock Text="Your Content" />
8689
<TextBlock Opacity=".68" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
87-
TextWrapping="Wrap"/>
90+
TextWrapping="Wrap"/>
8891
</StackPanel>
8992
</Expander>
9093
</StackPanel>
@@ -102,12 +105,12 @@
102105
</TextBlock>
103106
</Expander.Header>
104107
<StackPanel Orientation="Vertical"
105-
TextBlock.Foreground="{DynamicResource MaterialDesignBody}"
106-
Margin="8,24,16,24">
108+
TextBlock.Foreground="{DynamicResource MaterialDesignBody}"
109+
Margin="8,24,16,24">
107110
<TextBlock Text="Your Content" />
108111
<TextBlock Opacity=".68" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
109-
MaxWidth="180"
110-
TextWrapping="Wrap"/>
112+
MaxWidth="180"
113+
TextWrapping="Wrap"/>
111114
</StackPanel>
112115
</Expander>
113116
<Border Background="{DynamicResource MaterialDesignDivider}" Width="1" VerticalAlignment="Stretch" SnapsToDevicePixels="True" />
@@ -120,12 +123,12 @@
120123
</TextBlock>
121124
</Expander.Header>
122125
<StackPanel Orientation="Vertical"
123-
TextBlock.Foreground="{DynamicResource MaterialDesignBody}"
124-
Margin="8,24,16,24">
126+
TextBlock.Foreground="{DynamicResource MaterialDesignBody}"
127+
Margin="8,24,16,24">
125128
<TextBlock Text="Your Content" />
126129
<TextBlock Opacity=".68" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
127-
MaxWidth="180"
128-
TextWrapping="Wrap"/>
130+
MaxWidth="180"
131+
TextWrapping="Wrap"/>
129132
</StackPanel>
130133
</Expander>
131134
<Border Background="{DynamicResource MaterialDesignDivider}" Width="1" VerticalAlignment="Stretch" SnapsToDevicePixels="True" />
@@ -138,12 +141,30 @@
138141
</TextBlock>
139142
</Expander.Header>
140143
<StackPanel Orientation="Vertical"
141-
TextBlock.Foreground="{DynamicResource MaterialDesignBody}"
142-
Margin="8,24,16,24">
144+
TextBlock.Foreground="{DynamicResource MaterialDesignBody}"
145+
Margin="8,24,16,24">
143146
<TextBlock Text="Your Content" />
144147
<TextBlock Opacity=".68" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
145-
MaxWidth="180"
146-
TextWrapping="Wrap"/>
148+
MaxWidth="180"
149+
TextWrapping="Wrap"/>
150+
</StackPanel>
151+
</Expander>
152+
<Border Background="{DynamicResource MaterialDesignDivider}" Width="1" VerticalAlignment="Stretch" SnapsToDevicePixels="True" />
153+
<Expander ExpandDirection="Right" materialDesign:ExpanderAssist.RightHeaderPadding="0,35,0,5">
154+
<Expander.Header>
155+
<TextBlock Text="Custom Header Padding" RenderTransformOrigin=".5,.5">
156+
<TextBlock.LayoutTransform>
157+
<RotateTransform Angle="90" />
158+
</TextBlock.LayoutTransform>
159+
</TextBlock>
160+
</Expander.Header>
161+
<StackPanel Orientation="Vertical"
162+
TextBlock.Foreground="{DynamicResource MaterialDesignBody}"
163+
Margin="8,24,16,24">
164+
<TextBlock Text="Your Content" />
165+
<TextBlock Opacity=".68" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
166+
MaxWidth="180"
167+
TextWrapping="Wrap"/>
147168
</StackPanel>
148169
</Expander>
149170
</StackPanel>

‎MaterialDesignThemes.Wpf/ExpanderAssist.cs

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
using System.Windows;
2+
3+
namespace MaterialDesignThemes.Wpf
4+
{
5+
public static class ExpanderAssist
6+
{
7+
public static readonly DependencyProperty LeftHeaderPaddingProperty =
8+
DependencyProperty.RegisterAttached(
9+
"LeftHeaderPadding", typeof(Thickness), typeof(ExpanderAssist),
10+
new FrameworkPropertyMetadata(new Thickness(0, 0, 0, 0), FrameworkPropertyMetadataOptions.Inherits));
11+
12+
public static void SetLeftHeaderPadding(DependencyObject element, Thickness value)
13+
{
14+
element.SetValue(LeftHeaderPaddingProperty, value);
15+
}
16+
17+
public static Thickness GetLeftHeaderPadding(DependencyObject element)
18+
{
19+
return (Thickness)element.GetValue(LeftHeaderPaddingProperty);
20+
}
21+
22+
public static readonly DependencyProperty RightHeaderPaddingProperty =
23+
DependencyProperty.RegisterAttached(
24+
"RightHeaderPadding", typeof(Thickness), typeof(ExpanderAssist),
25+
new FrameworkPropertyMetadata(new Thickness(0, 0, 0, 0), FrameworkPropertyMetadataOptions.Inherits));
26+
27+
public static void SetRightHeaderPadding(DependencyObject element, Thickness value)
28+
{
29+
element.SetValue(RightHeaderPaddingProperty, value);
30+
}
31+
32+
public static Thickness GetRightHeaderPadding(DependencyObject element)
33+
{
34+
return (Thickness)element.GetValue(RightHeaderPaddingProperty);
35+
}
36+
37+
public static readonly DependencyProperty UpHeaderPaddingProperty =
38+
DependencyProperty.RegisterAttached(
39+
"UpHeaderPadding", typeof(Thickness), typeof(ExpanderAssist),
40+
new FrameworkPropertyMetadata(new Thickness(0, 0, 0, 0), FrameworkPropertyMetadataOptions.Inherits));
41+
42+
public static void SetUpHeaderPadding(DependencyObject element, Thickness value)
43+
{
44+
element.SetValue(UpHeaderPaddingProperty, value);
45+
}
46+
47+
public static Thickness GetUpHeaderPadding(DependencyObject element)
48+
{
49+
return (Thickness)element.GetValue(UpHeaderPaddingProperty);
50+
}
51+
52+
public static readonly DependencyProperty DownHeaderPaddingProperty =
53+
DependencyProperty.RegisterAttached(
54+
"DownHeaderPadding", typeof(Thickness), typeof(ExpanderAssist),
55+
new FrameworkPropertyMetadata(new Thickness(0, 0, 0, 0), FrameworkPropertyMetadataOptions.Inherits));
56+
57+
public static void SetDownHeaderPadding(DependencyObject element, Thickness value)
58+
{
59+
element.SetValue(DownHeaderPaddingProperty, value);
60+
}
61+
62+
public static Thickness GetDownHeaderPadding(DependencyObject element)
63+
{
64+
return (Thickness)element.GetValue(DownHeaderPaddingProperty);
65+
}
66+
}
67+
}

‎MaterialDesignThemes.Wpf/MaterialDesignThemes.Wpf.csproj

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -317,6 +317,7 @@
317317
<Compile Include="DialogHost.cs" />
318318
<Compile Include="DpiHelper.cs" />
319319
<Compile Include="DrawerHost.cs" />
320+
<Compile Include="ExpanderAssist.cs" />
320321
<Compile Include="Extensions.cs" />
321322
<Compile Include="Flipper.cs" />
322323
<Compile Include="HintAssist.cs" />

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@
9393
<Setter Property="Template">
9494
<Setter.Value>
9595
<ControlTemplate TargetType="{x:Type ToggleButton}">
96-
<Border Background="{TemplateBinding Background}" Padding="12,24,12,24">
96+
<Border Background="{TemplateBinding Background}" Padding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:ExpanderAssist.RightHeaderPadding)}">
9797
<Grid>
9898
<Grid.RowDefinitions>
9999
<RowDefinition Height="Auto"/>
@@ -131,7 +131,7 @@
131131
<Setter Property="Template">
132132
<Setter.Value>
133133
<ControlTemplate TargetType="{x:Type ToggleButton}">
134-
<Border Background="{TemplateBinding Background}" Padding="12,24,12,24">
134+
<Border Background="{TemplateBinding Background}" Padding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:ExpanderAssist.LeftHeaderPadding)}">
135135
<Grid>
136136
<Grid.RowDefinitions>
137137
<RowDefinition Height="Auto"/>
@@ -169,7 +169,7 @@
169169
<Setter Property="Template">
170170
<Setter.Value>
171171
<ControlTemplate TargetType="{x:Type ToggleButton}">
172-
<Border Background="{TemplateBinding Background}" Padding="24,12,24,12">
172+
<Border Background="{TemplateBinding Background}" Padding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:ExpanderAssist.DownHeaderPadding)}">
173173
<Grid>
174174
<Grid.ColumnDefinitions>
175175
<ColumnDefinition />
@@ -200,7 +200,7 @@
200200
<Setter Property="Template">
201201
<Setter.Value>
202202
<ControlTemplate TargetType="{x:Type ToggleButton}">
203-
<Border Background="{TemplateBinding Background}" Padding="24,12,24,12">
203+
<Border Background="{TemplateBinding Background}" Padding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(wpf:ExpanderAssist.UpHeaderPadding)}">
204204
<Grid>
205205
<Grid.ColumnDefinitions>
206206
<ColumnDefinition />
@@ -235,6 +235,10 @@
235235
<Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground)}"/>
236236
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
237237
<Setter Property="VerticalContentAlignment" Value="Top"/>
238+
<Setter Property="wpf:ExpanderAssist.DownHeaderPadding" Value="24,12,24,12"/>
239+
<Setter Property="wpf:ExpanderAssist.UpHeaderPadding" Value="24,12,24,12"/>
240+
<Setter Property="wpf:ExpanderAssist.LeftHeaderPadding" Value="12,24,12,24"/>
241+
<Setter Property="wpf:ExpanderAssist.RightHeaderPadding" Value="12,24,12,24"/>
238242
<Setter Property="Template">
239243
<Setter.Value>
240244
<ControlTemplate TargetType="{x:Type Expander}">

0 commit comments

Comments
 (0)