带样式的扩展器控件模板，无法在单击时查看扩展内容

Question

我只是在 WPF 中设计 Expander Control 的样式。我只在Expander Control Template中定义了样式，但是当我点击它时，我无法查看扩展器的内容。我想我还必须定义扩展触发器？但我不知道哪个触发器以及如何定义它。还有为什么我在设计扩展器样式时必须定义触发器。

<Window x:Class="ExpanderControl.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style TargetType="Expander">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Expander}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="30"></RowDefinition>
                                <RowDefinition Height="0" Name="contentRow"></RowDefinition>
                            </Grid.RowDefinitions>
                            <!--Expander Header-->
                            <Border Background="AliceBlue"
                                    Grid.Row="0"
                                    >
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"></ColumnDefinition>
                                        <ColumnDefinition Width="20"></ColumnDefinition>
                                    </Grid.ColumnDefinitions>
                                    <ContentPresenter Grid.Column="0" ContentSource="Header"
                                                      RecognizesAccessKey="True"
                                                      VerticalAlignment="Center"
                                                      HorizontalAlignment="Left"
                                                      Margin="5"
                                                      ></ContentPresenter>
                                    <ToggleButton Grid.Column="1">
                                        <TextBlock>x</TextBlock>
                                    </ToggleButton>
                                </Grid>
                            </Border>

                            <!--Expander Content-->
                            <Border Background="Aqua" Grid.Row="1">
                                <ContentPresenter  Grid.Row="1"></ContentPresenter>
                            </Border>
                        </Grid>


                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Expander Header="Expander" HorizontalAlignment="Left" Margin="205,95,0,0" VerticalAlignment="Top" Width="200">
            <Grid Background="#FFE5E5E5">
                <Menu>
                    <MenuItem Header="hi"></MenuItem>
                </Menu>

            </Grid>
        </Expander>

    </Grid>
</Window>

Answer 1

目前没有链接到 ToggleButton 的操作。您需要通过绑定

来利用 Expander.IsExpanded 属性

到ToggleButton.IsChecked
通过BooleanToVisibilityConverter（自定义或内置）Border.Visibility
将内容行高设置为Auto

这样改变 ToggleButton.IsChecked 会改变 Expander.IsExpanded，进而影响内容的可见性 Border。当您从外部更改 IsExpanded 属性时，它也会起作用。

这有效XAML

<Window.Resources>
   <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
   <Style TargetType="{x:Type Expander}">
      <Setter Property="Template">
         <Setter.Value>
            <ControlTemplate TargetType="{x:Type Expander}">
               <Grid>
                  <Grid.RowDefinitions>
                     <RowDefinition Height="30"/>
                     <RowDefinition Height="Auto" Name="contentRow"/>
                  </Grid.RowDefinitions>
                  <!--Expander Header-->
                  <Border Background="AliceBlue" Grid.Row="0">
                     <Grid>
                        <Grid.ColumnDefinitions>
                           <ColumnDefinition Width="*"/>
                           <ColumnDefinition Width="20"/>
                        </Grid.ColumnDefinitions>
                        <ContentPresenter Grid.Column="0" ContentSource="Header" RecognizesAccessKey="True" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5" />
                        <ToggleButton Grid.Column="1" Content="x" IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsExpanded}"/>
                     </Grid>
                  </Border>
                  <!--Expander Content-->
                  <Border Background="Aqua" Grid.Row="1" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsExpanded, Converter={StaticResource BooleanToVisibilityConverter}}">
                     <ContentPresenter/>
                  </Border>
               </Grid>
            </ControlTemplate>
         </Setter.Value>
      </Setter>
   </Style>
</Window.Resources>

编辑

如果您希望整个 header 能够 expand/collapse 您的 Expander 您需要将 ContentPresenter for Header 带入 Content ToggleButton 个。在您的情况下，基本上将 header Grid 带入 ToggleButton.Content

<!--Expander Header-->
<ToggleButton IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsExpanded}" HorizontalContentAlignment="Stretch" Grid.Row="0">
   <Grid>
      <Grid.ColumnDefinitions>
         <ColumnDefinition Width="*"/>
         <ColumnDefinition Width="20"/>
      </Grid.ColumnDefinitions>
      <ContentPresenter Grid.Column="0" ContentSource="Header" RecognizesAccessKey="True" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5" />
      <TextBlock Grid.Column="1" Text="x" HorizontalAlignment="Center" VerticalAlignment="Center" />
   </Grid>
</ToggleButton>

带样式的扩展器控件模板，无法在单击时查看扩展内容

Styled Expander Control Template and not able to view Expanded Content on Click

c#

wpf

xaml

expander

controltemplate