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

Posted 2023-03-05

【中文标题】保持网格中心并最小化/最大化 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，还有Grid和Borders的组合（里面封装了一个Grid ) 比单独使用 Grid 更强大。