WPF扩展器，顶部有标题

Question

我想添加如下的扩展器：

HeaderExpander

|＆GT; {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>

Answer 1

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

只需编辑Grid.Row =＆＃34; 1＆＃34;包含椭圆和Path元素并设置Grid.Row =＆＃34; 0＆＃34;在ContentPresenter元素

中

<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属性中交换这些行。