Стилизованный шаблон управления Expander и не может просматривать расширенное содержимое при нажатии

Question

Я просто оформляю Expander Control в WPF. Я определил только стили в 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 собственность, связывая это

1. к ToggleButton.IsChecked
2. к Border.Visibility с помощью BooleanToVisibilityConverter (на заказ или встроенный)
3. Установите высоту строки содержимого в 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>

РЕДАКТИРОВАТЬ

Если вы хотите, чтобы весь заголовок можно было развернуть / свернуть Expander вам нужно принести ContentPresenter за Header в Content из ToggleButton, В твоем случае в основном приносят заголовок 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>