WPF 自定义Expander

Posted 2020-08-04 唐宋元明清的博客

1、

<Expander IsExpanded="True" Grid.Row="1" Cursor="Hand" Template="{DynamicResource ExpanderControlTemplate1}"></Expander>

2、

<ControlTemplate x:Key="ExpanderControlTemplate1" TargetType="{x:Type Expander}">
<Border x:Name="ExpanderBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3" SnapsToDevicePixels="True">
<Border.Background>
<ImageBrush ImageSource="..\Assets\NewImages\未标题-1.png"></ImageBrush>
</Border.Background>
<DockPanel>
<ToggleButton x:Name="HeaderSite" HorizontalAlignment="Center" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" DockPanel.Dock="Top" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" MinWidth="0" MinHeight="0" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<Grid x:Name="ToggleGrid">
<StackPanel Orientation="Horizontal">
<Border x:Name="ToggleBoder1" Height="30" Width="30" Background="#FF5A83CF" CornerRadius="60,0,0,0"></Border>
<Border x:Name="ToggleBoder2" Height="30" Width="30" Background="#FF5A83CF" CornerRadius="0,60,0,0"></Border>
</StackPanel>
<Canvas Height="30" Width="60">
<Path x:Name="TogglePath" Data="M16,25 L30,10 46,25" Stroke="White" StrokeThickness="3"></Path>
</Canvas>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Data" TargetName="TogglePath" Value="M16,10 L30,25 46,10"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="ToggleBoder1" Value="#FF3C7FB1"/>
<Setter Property="BorderBrush" TargetName="ToggleBoder2" Value="#FF3C7FB1"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="BorderBrush" TargetName="ToggleBoder1" Value="#FF3C7FB1"/>
<Setter Property="BorderBrush" TargetName="ToggleBoder2" Value="#FF3C7FB1"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="BorderBrush" TargetName="ToggleBoder1" Value="Transparent"/>
<Setter Property="BorderBrush" TargetName="ToggleBoder2" Value="Transparent"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

</ToggleButton.Template>
</ToggleButton>
<ContentPresenter x:Name="ExpandSite" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" DockPanel.Dock="Bottom" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</DockPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Setter Property="Visibility" TargetName="ExpandSite" Value="Visible"/>
</Trigger>
<Trigger Property="IsExpanded" Value="False">
<Setter Property="Background" TargetName="ExpanderBorder" Value="{x:Null}"/>
</Trigger>
<Trigger Property="ExpandDirection" Value="Up">
<Setter Property="DockPanel.Dock" TargetName="ExpandSite" Value="Top"/>
<Setter Property="DockPanel.Dock" TargetName="HeaderSite" Value="Bottom"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>