允许用户在 WPF 中调整 Expander 的大小 [英] Allow users to resize Expander in WPF

问题描述

我有很多 C# 和 WinForms 经验，但我是 WPF 的新手.我有一个带有扩展器的窗口，它向下扩展.就像我当前输入的问题框一样，我希望用户能够通过单击底部的字形(如这个问题框)并将扩展器拖动到所需大小来动态调整扩展器的大小.

任何人都可以提供 XAML(和任何其他代码)来执行此操作吗?

这是我目前所拥有的:

<扩展器.背景><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.RowDefinitions><RowDefinition Height="*"/><RowDefinition Height="自动"/></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" Horizo​​ntalAlignment="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 匹配扩展器 --></LinearGradientBrush></GridSplitter.Background></GridSplitter><Border Grid.Row="0" Grid.Column="2" Background="White" BorderBrush="Black" BorderThickness="1" Margin="5" ><Image Height="250" Horizo​​ntalAlignment="Right" Name="imgShares" Stretch="Fill" VerticalAlignment="Top" Width="250"></图片></边框><GridSplitter Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" Height="3" Horizo​​ntalAlignment="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 和 GridSplitter.

像这样:

<Grid.RowDefinitions><RowDefinition Height="*"/><RowDefinition Height="自动"/><RowDefinition Height="*"/></Grid.RowDefinitions><Expander Grid.Row="0" Background="Azure"></Expander><!--这是你的扩展器--><GridSplitter Grid.Row="1" Height="10" Background="Red" ResizeDirection="Rows" Horizo​​ntalAlignment="Stretch"/><!--这个 GridSplitter 代表字形--></网格>

为了以这种方式成功，拖网边必须是 Height="*"

I have a lot of C# and WinForms experience but am a newbie to WPF. I have a Window with an Expander which expands downward. Much like the question box I'm currently typing in, I'd like users to be able to dynamically resize the Expander by clicking over a glyph at the bottom (like this question box) and dragging the expander to the desired size.

Can anyone provide the XAML (and any additional code) to do this?

This is what I have so far:

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

解决方案

You have to use Grid with GridSplitter.

Like this:

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

in order to success in this way, the tow gird sides must be Height="*"

这篇关于允许用户在 WPF 中调整 Expander 的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！