[英]WPF expander with header at the top
我想添加如下扩展器:
HeaderExpander
|> {element1,element2,element3}
但是它创建了这个(我想要在文本下方显示扩展按钮):
XAML:
<Expander Grid.Row="3"
Header="Wechselkonto: "
ExpandDirection="Right"
FlowDirection="LeftToRight">
<StackPanel
Grid.ColumnSpan="2"
Orientation="Horizontal">
<!--some buttons-->
.....
我找到了默认模板,但没有找到更改样式的正确方法:
<Style x:Key="ExpanderRightHeaderStyleCustom" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Padding="{TemplateBinding Padding}">
<Grid Background="Red" SnapsToDevicePixels="False">
<Grid.RowDefinitions>
<RowDefinition Height="19"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" />
<Grid Grid.Row="1">
<Grid.LayoutTransform>
<TransformGroup>
<TransformGroup.Children>
<TransformCollection>
<RotateTransform Angle="-90"/>
</TransformCollection>
</TransformGroup.Children>
</TransformGroup>
</Grid.LayoutTransform>
<Ellipse Grid.Row="0"
x:Name="circle"
HorizontalAlignment="Center"
Height="19"
Stroke="DarkGray"
VerticalAlignment="Center"
Width="19"/>
<Path Grid.Row="0"
x:Name="arrow"
Data="M 1,1.5 L 4.5,5 L 8,1.5"
HorizontalAlignment="Center"
SnapsToDevicePixels="false"
Stroke="#666"
StrokeThickness="2"
VerticalAlignment="Center"/>
</Grid>
<ContentPresenter HorizontalAlignment="Left"
Margin="0,4,0,0"
Grid.Row="1"
RecognizesAccessKey="True"
SnapsToDevicePixels="True"
VerticalAlignment="Bottom"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter Property="Data" TargetName="arrow" Value="M 1,4.5 L 4.5,1 L 8,4.5"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Stroke" TargetName="circle" Value="#FF3C7FB1"/>
<Setter Property="Stroke" TargetName="arrow" Value="#222"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Stroke" TargetName="circle" Value="#FF526C7B"/>
<Setter Property="StrokeThickness" TargetName="circle" Value="1.5"/>
<Setter Property="Stroke" TargetName="arrow" Value="#FF003366"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
好的,我找到了解决方案:
只需编辑包含椭圆和路径元素的Grid的Grid.Row =“ 1”并在ContentPresenter元素中设置Grid.Row =“ 0”
<Style x:Key="ExpanderRightHeaderStyleCustom2" 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="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<Grid.LayoutTransform>
<TransformGroup>
<TransformGroup.Children>
<TransformCollection>
<RotateTransform Angle="-90"/>
</TransformCollection>
</TransformGroup.Children>
</TransformGroup>
</Grid.LayoutTransform>
<Ellipse x:Name="circle"
HorizontalAlignment="Center"
Height="19"
Stroke="DarkGray"
VerticalAlignment="Center"
Width="19"/>
<Path x:Name="arrow"
Data="M 1,1.5 L 4.5,5 L 8,1.5"
HorizontalAlignment="Center"
SnapsToDevicePixels="false"
Stroke="#666"
StrokeThickness="2"
VerticalAlignment="Center"/>
</Grid>
<ContentPresenter HorizontalAlignment="Center"
Margin="0,4,0,0"
Grid.Row="0"
RecognizesAccessKey="True"
SnapsToDevicePixels="True"
VerticalAlignment="Top"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter Property="Data" TargetName="arrow" Value="M 1,4.5 L 4.5,1 L 8,4.5"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Stroke" TargetName="circle" Value="#FF3C7FB1"/>
<Setter Property="Stroke" TargetName="arrow" Value="#222"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Stroke" TargetName="circle" Value="#FF526C7B"/>
<Setter Property="StrokeThickness" TargetName="circle" Value="1.5"/>
<Setter Property="Stroke" TargetName="arrow" Value="#FF003366"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Expander控制模板(在此处可在MDSN上获得)定义了一个具有2行的网格。 一个用于扩展按钮,另一个用于内容。
<RowDefinition Height="Auto" />
<RowDefinition x:Name="ContentRow" Height="0" />
您应该能够使用模板创建新样式,在其中交换声明和在两个边框上设置的Grid.Row属性中的这些行。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.