Expander控件有一个箭头按钮。单击箭头时,Expander中的子元素将显示或隐藏。箭头“展开”控件,使其子控件可见。
接下来,我们可以在扩展器中添加元素——这些元素将被扩展器箭头隐藏或显示。在这里,我向扩展器添加了一个 ImageRadioButton 按钮。
注意我修改了 Expander 元素的“Header”属性。单击此处的扩展器会显示说明。
IsExpanded我将 IsExpanded 属性修改为 false。这意味着当程序启动时,描述是不可见的。
TextBlock在 TextBlock 上,我修改了“Text”属性和“Margin”属性——这些并不重要。
展开方向。Expander 上的一个重要选项是 ExpandDirection。这可以设置为向下、向左、向右或向上。箭头将更改为指向指定的方向。然后,内容在该区域中扩展。
在这个示例中屏幕截图中,我使用了右扩展方向。单击箭头后,出现在右侧。
先看下Expander自定义样式代码:
<Style TargetType="{x:Type Expander}">
<Setter Property="Cursor" Value="Hand" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Foreground" Value="#383838" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Expander}">
<Border SnapsToDevicePixels="True">
<DockPanel>
<ToggleButton
x:Name="HeaderSite"
MinWidth="0"
MinHeight="0"
FocusVisualStyle="{x:Null}"
Padding="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
DockPanel.Dock="Top"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
FontStretch="{TemplateBinding FontStretch}"
FontStyle="{TemplateBinding FontStyle}"
FontWeight="{TemplateBinding FontWeight}"
Foreground="{TemplateBinding Foreground}"
Style="{StaticResource ToggleButtonStyle}"
IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
</ToggleButton>
<ContentPresenter
x:Name="ExpandSite"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
ContentTemplate="{TemplateBinding ContentTemplate}"
DockPanel.Dock="Bottom"
Focusable="False"
Visibility="Collapsed" />
</DockPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Setter TargetName="ExpandSite" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="ExpandDirection" Value="Right">
<Setter TargetName="ExpandSite" Property="DockPanel.Dock" Value="Right" />
<Setter TargetName="HeaderSite" Property="DockPanel.Dock" Value="Left" />
<Setter TargetName="HeaderSite" Property="Style">
<Setter.Value>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Padding="{TemplateBinding Padding}">
<Grid Background="Transparent" SnapsToDevicePixels="False">
<Grid.RowDefinitions>
<RowDefinition Height="19" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid>
<Grid.LayoutTransform>
<TransformGroup>
<RotateTransform Angle="-90" />
</TransformGroup>
</Grid.LayoutTransform>
<Ellipse
x:Name="circle"
Width="19"
Height="19"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="White"
Stroke="#FF333333" />
<Path
x:Name="arrow"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M1,1.5L4.5,5 8,1.5"
SnapsToDevicePixels="False"
Stroke="#FF333333"
StrokeThickness="2" />
</Grid>
<ContentPresenter
Grid.Row="1"
Margin="0,4,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Content="{TemplateBinding Content}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
ContentTemplate="{TemplateBinding ContentTemplate}"
RecognizesAccessKey="True"
SnapsToDevicePixels="True" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="arrow" Property="Data" Value="M1,4.5L4.5,1 8,4.5" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="circle" Property="Stroke" Value="#FF5593FF" />
<Setter TargetName="circle" Property="Fill" Value="#FFF3F9FF" />
<Setter TargetName="arrow" Property="Stroke" Value="Black" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="circle" Property="Stroke" Value="#FF3C77DD" />
<Setter TargetName="circle" Property="StrokeThickness" Value="1.5" />
<Setter TargetName="circle" Property="Fill" Value="#FFD9ECFF" />
<Setter TargetName="arrow" Property="Stroke" Value="Black" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="circle" Property="Stroke" Value="#FFBCBCBC" />
<Setter TargetName="circle" Property="Fill" Value="#FFE6E6E6" />
<Setter TargetName="arrow" Property="Stroke" Value="#FF707070" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="ExpandDirection" Value="Up">
<Setter TargetName="ExpandSite" Property="DockPanel.Dock" Value="Top" />
<Setter TargetName="HeaderSite" Property="DockPanel.Dock" Value="Bottom" />
<Setter TargetName="HeaderSite" Property="Style">
<Setter.Value>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Padding="{TemplateBinding Padding}">
<Grid Background="Transparent" SnapsToDevicePixels="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="19" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid>
<Grid.LayoutTransform>
<TransformGroup>
<RotateTransform Angle="180" />
</TransformGroup>
</Grid.LayoutTransform>
<Ellipse
x:Name="circle"
Width="19"
Height="19"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="White"
Stroke="#FF333333" />
<Path
x:Name="arrow"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M1,1.5L4.5,5 8,1.5"
SnapsToDevicePixels="False"
Stroke="#FF333333"
StrokeThickness="2" />
</Grid>
<ContentPresenter
Grid.Column="1"
Margin="4,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Content="{TemplateBinding Content}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
ContentTemplate="{TemplateBinding ContentTemplate}"
RecognizesAccessKey="True"
SnapsToDevicePixels="True" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="arrow" Property="Data" Value="M1,4.5L4.5,1 8,4.5" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="circle" Property="Stroke" Value="#FF5593FF" />
<Setter TargetName="circle" Property="Fill" Value="#FFF3F9FF" />
<Setter TargetName="arrow" Property="Stroke" Value="Black" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="circle" Property="Stroke" Value="#FF3C77DD" />
<Setter TargetName="circle" Property="StrokeThickness" Value="1.5" />
<Setter TargetName="circle" Property="Fill" Value="#FFD9ECFF" />
<Setter TargetName="arrow" Property="Stroke" Value="Black" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="circle" Property="Stroke" Value="#FFBCBCBC" />
<Setter TargetName="circle" Property="Fill" Value="#FFE6E6E6" />
<Setter TargetName="arrow" Property="Stroke" Value="#FF707070" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="ExpandDirection" Value="Left">
<Setter TargetName="ExpandSite" Property="DockPanel.Dock" Value="Left" />
<Setter TargetName="HeaderSite" Property="DockPanel.Dock" Value="Right" />
<Setter TargetName="HeaderSite" Property="Style">
<Setter.Value>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Padding="{TemplateBinding Padding}">
<Grid Background="Transparent" SnapsToDevicePixels="False">
<Grid.RowDefinitions>
<RowDefinition Height="19" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid>
<Grid.LayoutTransform>
<TransformGroup>
<RotateTransform Angle="90" />
</TransformGroup>
</Grid.LayoutTransform>
<Ellipse
x:Name="circle"
Width="19"
Height="19"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="White"
Stroke="#FF333333" />
<Path
x:Name="arrow"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M1,1.5L4.5,5 8,1.5"
SnapsToDevicePixels="False"
Stroke="#FF333333"
StrokeThickness="2" />
</Grid>
<ContentPresenter
Grid.Row="1"
Margin="0,4,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Content="{TemplateBinding Content}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
ContentTemplate="{TemplateBinding ContentTemplate}"
RecognizesAccessKey="True"
SnapsToDevicePixels="True" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="arrow" Property="Data" Value="M1,4.5L4.5,1 8,4.5" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="circle" Property="Stroke" Value="#FF5593FF" />
<Setter TargetName="circle" Property="Fill" Value="#FFF3F9FF" />
<Setter TargetName="arrow" Property="Stroke" Value="Black" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="circle" Property="Stroke" Value="#FF3C77DD" />
<Setter TargetName="circle" Property="StrokeThickness" Value="1.5" />
<Setter TargetName="circle" Property="Fill" Value="#FFD9ECFF" />
<Setter TargetName="arrow" Property="Stroke" Value="Black" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="circle" Property="Stroke" Value="#FFBCBCBC" />
<Setter TargetName="circle" Property="Fill" Value="#FFE6E6E6" />
<Setter TargetName="arrow" Property="Stroke" Value="#FF707070" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Cursor光标样式是Hand,FocusVisualStyle焦点样式为空,HorizontalContentAlignment和VerticalContentAlignment对齐为填充,SnapsToDevicePixels转换给设备像素显示,Content="{TemplateBinding Header}"绑定头部内容,DockPanel.Dock="Top" 默认显示在顶部,IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"> 选择时绑定IsExpanded是否折叠或隐藏,当折叠IsExpanded=True,下拉内容显示出来,设置ExpandDirection等于上下左右时显示不同布局,这里可根据自己需求自己改变样式。
调用示例代码:
<Expander
Margin="0,10,0,0"
Header="收藏的歌单"
IsExpanded="False">
<StackPanel>
<controls:ImageRadioButton
Content="Dream.Machine 1"
GroupName="Menu"
Image="{StaticResource Icon_MusicList}"
ImageWidth="16"
IsChecked="{Binding SelectMenu, Mode=TwoWay, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter=Home}" />
<controls:ImageRadioButton
Content="Dream.Machine 2"
GroupName="Menu"
Image="{StaticResource Icon_MusicList}"
ImageWidth="16"
IsChecked="{Binding SelectMenu, Mode=TwoWay, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter=Home}" />
<controls:ImageRadioButton
Content="Dream.Machine 3"
GroupName="Menu"
Image="{StaticResource Icon_MusicList}"
ImageWidth="16"
IsChecked="{Binding SelectMenu, Mode=TwoWay, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter=Home}" />
<controls:ImageRadioButton
Content="Dream.Machine 4"
GroupName="Menu"
Image="{StaticResource Icon_MusicList}"
ImageWidth="16"
IsChecked="{Binding SelectMenu, Mode=TwoWay, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter=Home}" />
</StackPanel>
</Expander>
推荐一款WPF MVVM框架开源项目:Newbeecoder.UI
Newbeecoder.UI开源项目
Demo下载: