Modèle de contrôle Expander stylé et pas en mesure d'afficher le contenu étendu sur Cliquez

Question

Je suis juste le style du contrôle Expander dans WPF. J'ai défini uniquement les styles dans Expander Control Template, mais je ne suis pas en mesure d'afficher le contenu de l'expandeur lorsque je clique dessus. Je suppose que je dois aussi définir les triggers de l'expandeur? mais je ne sais pas quel triger et comment le définir. Aussi pourquoi je dois définir des déclencheurs quand je ne fais que coiffer l'expandeur.

<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

Actuellement, il n'y a pas d'action liée à ToggleButton. Vous devez utiliser Expander.IsExpanded propriété en le liant

1. Pour ToggleButton.IsChecked
2. Pour Border.Visibility via BooleanToVisibilityConverter (sur commande ou intégré)
3. Set contenu hauteur de ligne à Auto

De cette façon, le changement ToggleButton.IsChecked sera changer Expander.IsExpanded qui à son tour affectera la visibilité du contenu Border. Il fonctionnera également quand vous changez la propriété IsExpanded de l'extérieur.

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

EDIT

Si vous voulez en-tête entier pour pouvoir développer/réduire votre Expander vous devez apporter ContentPresenter pour Header dans Content de ToggleButton. Dans votre cas, porter essentiellement tête Grid dans 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>