保持网格中心并最小化/最大化 WPF 网格中的拉伸

Posted

技术标签:

【中文标题】保持网格中心并最小化/最大化 WPF 网格中的拉伸【英文标题】:Keep Grid center and minimize/maximize on stretching in a WPF Grid 【发布时间】:2021-05-04 13:02:54 【问题描述】:
<Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Button
            VerticalContentAlignment="Stretch"
            Margin="0,0,100,0"           
            Grid.RowSpan="3"
            HorizontalAlignment="Right"
            VerticalAlignment="Center"
            Height="80" Width="30" 
            Background="blue">
            <!--<Grid>
                <Grid.RowDefinitions>
                    <RowDefinition   Height="Auto"/>                   
                    <RowDefinition   Height="Auto"/>[![enter image description here][1]][1]                   
                    <RowDefinition   Height="Auto"/>
                </Grid.RowDefinitions>
                
                <Button
                x:Name="Add"
                Width="25"
                Height="25"
                Grid.Row="2"
                Margin="3,1,3,0"                   
                Padding="0"/>                   
            </Grid>-->
        </Button>
        <Grid
            Margin="0,0,0,100"
            Grid.Row="0" 
            Grid.Column="0" 
            Grid.ColumnSpan="3"
            VerticalAlignment="Bottom" 
            HorizontalAlignment="Center"
            Width="50" Height="25" 
            Background="Red">
            <Button
                x:Name="Add1"
                Width="20"
                Height="20"
                Margin="3,1,3,0"
                Padding="0"
                HorizontalAlignment="Right"
                VerticalAlignment="Top"
                VerticalContentAlignment="Center"/>
            <Button
                x:Name="Remove1"
                Width="20"
                Height="20"               
                HorizontalAlignment="Right"
                VerticalAlignment="Top"
                VerticalContentAlignment="Center"/>
        </Grid>
        <Grid
            Grid.Row="0" 
               Grid.Column="1"                
               Grid.RowSpan="3" 
               HorizontalAlignment="Center"
               VerticalAlignment="Center"    
               Width="100" 
               Height="50"
               Background="Green">
            <!--<Button
                x:Name="Add2"
                Width="20"
                Height="20"
                Margin="3,1,3,0"
                Padding="0"
                HorizontalAlignment="Right"
                VerticalAlignment="Top"
                VerticalContentAlignment="Center"/>
            <Button
                x:Name="Remove2"
                Width="20"
                Height="20"
                Margin="3,1,3,0"
                Padding="0"
                HorizontalAlignment="Right"
                VerticalAlignment="Top"
                VerticalContentAlignment="Center" />-->
        </Grid>
        
        <!--Element #-->
        <Grid  Margin="0,0,0,100"
                    Grid.Row="0" 
                    Grid.Column="0" 
                    Grid.ColumnSpan="3"
                    VerticalAlignment="Bottom" 
                    HorizontalAlignment="Center"
                    Width="100" Height="25" 
                    Background="Red">
            <!--<Button       
                Name="myButton"
                IsEnabled="False"
                Background="#C0C0C0"
                BorderThickness="2"
                Width="25"
                Height="25"/>-->
        </Grid>

    </Grid>

最大化时是否有可能保持所有元素居中并向右拉伸? Grid 中的每个容器都可以有 3 或 4 个孩子。只要所有元素都向右和向下拉伸但保持中心位置,儿童可以是任何容器。 我还附上了结果。所有元素都居中,但缺少拉伸。 什么样的容器适合这种情况?

【问题讨论】:

您可以为孩子使用 Border 而不是 Grid,它会随着其上下文的扩展而扩展。旁注:如果您设置固定的高度和/或宽度,它不会以任何方式扩展。 【参考方案1】:

是的,正如评论中提到的 o_w,一个好的解决方案是使用Border。在您使用子网格的地方,将它们封装在边框中,并在边框而不是网格上设置Background-property。你会发现你会更快地实现你想要的。

你描述的问题其实一开始我也很纠结,那时候我发现不仅Grid,还有GridBorders的组合(里面封装了一个Grid ) 比单独使用 Grid 更强大。

【讨论】:

以上是关于保持网格中心并最小化/最大化 WPF 网格中的拉伸的主要内容,如果未能解决你的问题,请参考以下文章

【PyQt】网格布局 QGridLayout

UWP ItemsControl 内容不像 WPF 中那样拉伸

当我最小化页面时,网格内的网格会移动

包装css网格并拉伸一个网格项以占用所有空列[重复]

WPF - 折叠网格单元

WPF 不需要的网格拆分器行为