Pozwól użytkownikom na zmianę rozmiaru Expander w WPF

Question

Mam wiele doświadczeń C# i WinForm, ale jestem początkującym w WPF. Mam okno z ekspanderem, które rozszerza się w dół. Podobnie jak w przypadku pola pytania, które obecnie wpisuję, chciałbym, aby użytkownicy mogli dynamicznie zmieniać rozmiar Expander, klikając nad glifem na dole (jak to pytanie) i przeciągając ekspander do żądanego rozmiaru.

Czy ktoś może dostarczyć XAML (i dowolny dodatkowy kod), aby to zrobić?

To, co mam tak daleko:

<Expander Header="Live Simulations" Name="expandLiveSims" Grid.Row="0" ExpandDirection="Down" IsExpanded="True"> 
    <Expander.Background> 
     <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> 
      <GradientStop Color="White" Offset="0" /> 
      <GradientStop Color="LightGray" Offset="0.767" /> 
      <GradientStop Color="Gainsboro" Offset="1" /> 
     </LinearGradientBrush> 
    </Expander.Background> 
    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="Auto" /> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*" /> 
      <ColumnDefinition Width="Auto" /> 
      <ColumnDefinition Width="Auto" /> 
     </Grid.ColumnDefinitions> 
     <DataGrid Height="250" Margin="5" Name="gridLiveProducts" VerticalAlignment="Top" Grid.Row="0" Grid.Column="0"> 
     </DataGrid> 
     <GridSplitter Grid.Row="0" Grid.Column="1" Width="3" VerticalAlignment="Stretch" HorizontalAlignment="Center"> 
      <GridSplitter.Background> 
       <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> 
        <GradientStop Color="White" Offset="0" /> 
        <GradientStop Color="DarkGray" Offset="0.25" /> 
        <GradientStop Color="DarkGray" Offset="0.75" /> 
        <GradientStop Color="Gainsboro" Offset="1" /> <!-- Gainsboro matches the expander --> 
       </LinearGradientBrush> 
      </GridSplitter.Background> 
     </GridSplitter> 
     <Border Grid.Row="0" Grid.Column="2" Background="White" BorderBrush="Black" BorderThickness="1" Margin="5" > 
      <Image Height="250" HorizontalAlignment="Right" Name="imgShares" Stretch="Fill" VerticalAlignment="Top" Width="250"> 
      </Image> 
     </Border> 
     <GridSplitter Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Height="3" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="3"> 
      <GridSplitter.Background> 
       <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5"> 
        <GradientStop Color="Gainsboro" Offset="0" /> 
        <GradientStop Color="DarkGray" Offset="0.25" /> 
        <GradientStop Color="DarkGray" Offset="0.75" /> 
        <GradientStop Color="Gainsboro" Offset="1" /> 
       </LinearGradientBrush> 
      </GridSplitter.Background> 
     </GridSplitter> 
    </Grid> 
</Expander> 

Answer 1

Musisz użyć Grid z GridSplitter.

Jak to:

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height="auto"/> 
     <RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 
    <Expander Grid.Row="0" Background="Azure"></Expander> <!--this is you Expander--> 
    <GridSplitter Grid.Row="1" Height="10" Background="Red" ResizeDirection="Rows" HorizontalAlignment="Stretch"/> <!--this GridSplitter represents the glyph--> 
</Grid> 

w celu sukcesu w ten sposób, boki tow Przepasz musi być height = "*"