顶部带有标题的 WPF 扩展器

Question

我想添加如下扩展器：

标头扩展器

|> {元素1，元素2，元素3}

但它会创建这个（我想要文本下方的扩展按钮）：

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>

Answer 1

好的，我找到了解决方案：

只需编辑包含椭圆和路径元素的网格的 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>

Answer 2

Expander 控件模板（在 MDSN here 上可用）定义了一个包含 2 行的网格。 一个用于扩展按钮，另一个用于内容。

<RowDefinition Height="Auto" />
<RowDefinition x:Name="ContentRow" Height="0" />

您应该能够使用模板创建新样式，您可以在其中交换这些行，无论是在声明中还是在两个边框上设置的 Grid.Row 属性中。