我有很多C#和WinForms经验,但我是WPF的新手。我有一个带扩展器的窗口向下扩展。就像我正在输入的问题框一样,我希望用户能够通过点击底部的字形(如此问题框)并将扩展器拖动到所需的大小来动态调整Expander的大小。
任何人都可以提供XAML(以及任何其他代码)吗?
这是我到目前为止所做的:
<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>
答案 0 :(得分:6)
您必须将Grid
与GridSplitter
一起使用。
像这样:
<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>
为了以这种方式取得成功,两个网格边必须是高度=“*”