Skip to content

Add new options to the ExpanderAssist class #3294

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Keboo merged 4 commits into from
Aug 17, 2023
Merged

Add new options to the ExpanderAssist class #3294

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a2a4e52
Add new options to the ExpanderAssist class:
AbderrahmaneAhmam Aug 12, 2023
83516f0
Combine the two properties Expand&Collapce icon in a single property …
AbderrahmaneAhmam Aug 14, 2023
d982fbd
Merge branch 'MaterialDesignInXAML:master' into ChangeTheExpanderIcon
AbderrahmaneAhmam Aug 14, 2023
5f92200
Added support for button position on vertical template
Keboo Aug 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions MainDemo.Wpf/Expander.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,10 @@
</Grid.ColumnDefinitions>
<smtx:XamlDisplay UniqueKey="explander_1">
<StackPanel>
<Expander HorizontalAlignment="Stretch" Header="Expander Example 1a">
<Expander HorizontalAlignment="Stretch"
materialDesign:ExpanderAssist.CollapcedIcon="{materialDesign:PackIcon Kind=Plus}"
materialDesign:ExpanderAssist.ExpandedIcon="{materialDesign:PackIcon Kind=Minus}"
Header="Expander Example 1a">
<StackPanel Margin="24,8,24,16"
Orientation="Vertical"
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
Expand All @@ -70,7 +73,9 @@
</StackPanel>
</Expander>

<Expander HorizontalAlignment="Stretch" Header="Expander Example 1c">
<Expander HorizontalAlignment="Stretch"
materialDesign:ExpanderAssist.ExpanderPosition="Start"
Header="Expander Example 1c">
<StackPanel Margin="24,8,24,16"
Orientation="Vertical"
TextBlock.Foreground="{DynamicResource MaterialDesignBody}">
Expand Down
36 changes: 36 additions & 0 deletions MaterialDesignThemes.Wpf/ExpanderAssist.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@

namespace MaterialDesignThemes.Wpf;

public enum ExpanderPosition
{
Start,
End
}

public static class ExpanderAssist
{
private static readonly Thickness DefaultHorizontalHeaderPadding = new Thickness(24, 12, 24, 12);
Expand Down Expand Up @@ -49,4 +55,34 @@ public static readonly DependencyProperty HeaderBackgroundProperty
public static void SetHeaderBackground(Expander element, Brush? value)
=> element.SetValue(HeaderBackgroundProperty, value);
#endregion

#region AttachedProperty : ExpandedIconProperty
public static readonly DependencyProperty ExpandedIconProperty
= DependencyProperty.RegisterAttached("ExpandedIcon", typeof(object), typeof(ExpanderAssist));

public static object? GetExpandedIcon(Expander element)
=> (object?)element.GetValue(ExpandedIconProperty);
public static void SetExpandedIcon(Expander element, object? value)
=> element.SetValue(ExpandedIconProperty, value);
#endregion

#region AttachedProperty : ExpanderCollapcedIconProperty
public static readonly DependencyProperty CollapcedIconProperty
= DependencyProperty.RegisterAttached("CollapcedIcon", typeof(object), typeof(ExpanderAssist));

public static object? GetCollapcedIcon(Expander element)
=> (object?)element.GetValue(CollapcedIconProperty);
public static void SetCollapcedIcon(Expander element, object? value)
=> element.SetValue(CollapcedIconProperty, value);
#endregion

#region AttachedProperty : ExpanderPositionProperty
public static readonly DependencyProperty ExpanderPositionProperty
= DependencyProperty.RegisterAttached("ExpanderPosition", typeof(ExpanderPosition), typeof(ExpanderAssist), new PropertyMetadata(ExpanderPosition.End));

public static ExpanderPosition GetExpanderPosition(Expander element)
=> (ExpanderPosition)element.GetValue(ExpanderPositionProperty);
public static void SetExpanderPosition(Expander element, ExpanderPosition value)
=> element.SetValue(ExpanderPositionProperty, value);
#endregion
}
102 changes: 67 additions & 35 deletions MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Expander.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,44 +9,67 @@
<KeyTime x:Key="ExpandKeyTime">0:0:0.250</KeyTime>
<KeyTime x:Key="CollapseKeyTime">0:0:0.200</KeyTime>

<ControlTemplate x:Key="ToggeleTemplate" TargetType="{x:Type ToggleButton}">
<Border Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpandPathRotateTransform" Storyboard.TargetProperty="Angle">
<EasingDoubleKeyFrame KeyTime="{StaticResource ExpandKeyTime}" Value="180" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpandPathRotateTransform" Storyboard.TargetProperty="Angle">
<EasingDoubleKeyFrame KeyTime="{StaticResource CollapseKeyTime}" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<wpf:PackIcon x:Name="ExpandPath"
Width="24"
Height="24"
Foreground="{TemplateBinding Foreground}"
Kind="ChevronDown"
Opacity="0.38"
RenderTransformOrigin="0.5 0.5">
<wpf:PackIcon.RenderTransform>
<RotateTransform x:Name="ExpandPathRotateTransform" />
</wpf:PackIcon.RenderTransform>
</wpf:PackIcon>
</Border>
</ControlTemplate>

<Style x:Key="MaterialDesignExpanderToggleButton" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpandPathRotateTransform" Storyboard.TargetProperty="Angle">
<EasingDoubleKeyFrame KeyTime="{StaticResource ExpandKeyTime}" Value="180" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpandPathRotateTransform" Storyboard.TargetProperty="Angle">
<EasingDoubleKeyFrame KeyTime="{StaticResource CollapseKeyTime}" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<wpf:PackIcon x:Name="ExpandPath"
Width="24"
Height="24"
Foreground="{TemplateBinding Foreground}"
Kind="ChevronDown"
Opacity="0.38"
RenderTransformOrigin="0.5 0.5">
<wpf:PackIcon.RenderTransform>
<RotateTransform x:Name="ExpandPathRotateTransform" />
</wpf:PackIcon.RenderTransform>
</wpf:PackIcon>
</Border>
<ContentControl>
<ContentControl.Style>
<Style TargetType="ContentControl">
<Setter Property="Content" Value="{Binding RelativeSource={RelativeSource AncestorType=Expander, Mode=FindAncestor}, Path=(wpf:ExpanderAssist.ExpandedIcon)}" />
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ToggleButton, Mode=FindAncestor}, Path=IsChecked}" Value="False">
<Setter Property="Content" Value="{Binding RelativeSource={RelativeSource AncestorType=Expander, Mode=FindAncestor}, Path=(wpf:ExpanderAssist.CollapcedIcon)}" />
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Expander, Mode=FindAncestor}, Path=(wpf:ExpanderAssist.ExpandedIcon)}" Value="{x:Null}">
<Setter Property="Template" Value="{StaticResource ToggeleTemplate}" />
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Expander, Mode=FindAncestor}, Path=(wpf:ExpanderAssist.CollapcedIcon)}" Value="{x:Null}">
<Setter Property="Template" Value="{StaticResource ToggeleTemplate}" />
</DataTrigger>
</Style.Triggers>
</Style>

<Style x:Key="MaterialDesignHorizontalHeaderStyle" TargetType="{x:Type ToggleButton}">
Expand All @@ -58,20 +81,20 @@
<Border Padding="{Binding Path=(wpf:ExpanderAssist.HorizontalHeaderPadding), RelativeSource={RelativeSource AncestorType=Expander, AncestorLevel=1}}" Background="{TemplateBinding Background}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="16" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>

<ContentPresenter Grid.Column="0"
<ContentPresenter x:Name="ExpanderHeader"
Grid.Column="1"
VerticalAlignment="Center"
Content="{TemplateBinding Content}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" />

<ToggleButton x:Name="ExpanderButton"
Grid.Column="2"
VerticalAlignment="Center"
Foreground="{TemplateBinding Foreground}"
IsChecked="{Binding Path=IsChecked, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
Expand All @@ -90,9 +113,18 @@
</Style>
</ToggleButton.Style>
</ToggleButton>

</Grid>
</Border>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Expander, Mode=FindAncestor}, Path=(wpf:ExpanderAssist.ExpanderPosition)}" Value="Start">
<Setter TargetName="ExpanderButton" Property="Grid.Column" Value="0" />
<Setter TargetName="ExpanderButton" Property="Margin" Value="0,0,10,0" />
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Expander, Mode=FindAncestor}, Path=(wpf:ExpanderAssist.ExpanderPosition)}" Value="End">
<Setter TargetName="ExpanderButton" Property="Grid.Column" Value="2" />
<Setter TargetName="ExpanderButton" Property="Margin" Value="0" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
Expand Down