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

本文关键字：单击 控件 扩展器 样式 | 更新日期: 2023-09-27 18:26:36

我只是在WPF中设置扩展器控件的样式。我只定义了Expander Control Template中的样式，但是当我单击它时，我无法查看扩展器的内容。我想我还必须定义扩展器三叉戟？但我不知道哪个triger以及如何定义它。这也是为什么当我只是设置扩展器的样式时，我必须定义触发器。

<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>

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

目前没有与ToggleButton相关的操作。您需要通过绑定Expander.IsExpanded属性来利用它

  1. 到ToggleButton.IsChecked
  2. 通过BooleanToVisibilityConverter(自定义或内置(进行Border.Visibility
  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带入ToggleButton Content。在您的情况下，基本上将标头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>
相关文章：