将网格宽度设置为自动答案

【问题标题】：Setting Grid width to Auto将网格宽度设置为自动
【发布时间】：2019-08-11 09:12:44
【问题描述】：

我的 ATM WPF 应用程序有这个界面。我同时使用了停靠面板和网格。它看起来不错，但如果我最大化它，它不是“响应式”。我试图将网格宽度更改为 * 但它不起作用。如果我设置为“自动”，它看起来不太好。

<Window x:Class="WpfApp1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApp1"
    mc:Ignorable="d"
    Title="MainWindow" Height="600" Width="600">

    <DockPanel>
    <Button DockPanel.Dock="Left" VerticalContentAlignment="Top">
        <StackPanel >
            <Button Content="Left Button 1" Height="100"></Button>
            <Button Content="Left Button 2" Height="100"></Button>
            <Button Content="Left Button 3" Height="100"></Button>
        </StackPanel>
    </Button>
    <Button DockPanel.Dock="Right"  VerticalContentAlignment="Top">
        <StackPanel>
            <Button Content="Right Button 1" Height="100"></Button>
            <Button Content="Right Button 2" Height="100"></Button>
            <Button Content="Right Button 3" Height="100"></Button>
        </StackPanel>
    </Button>
    <Button DockPanel.Dock="Bottom" VerticalContentAlignment="Bottom" >
        <Grid Margin="10" Width="400">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <Button Content="7" Margin="5" Grid.Row="1" Height="50"/>
            <Button Content="8" Margin="5" Grid.Row="1" Grid.Column="1"/>
            <Button Content="9" Margin="5" Grid.Row="1" Grid.Column="2"/>

            <Button Content="4" Margin="5" Grid.Row="2" Height="50"/>
            <Button Content="5" Margin="5" Grid.Row="2" Grid.Column="1"/>
            <Button Content="6" Margin="5" Grid.Row="2" Grid.Column="2"/>

            <Button Content="1" Margin="5" Grid.Row="3" Height="50"/>
            <Button Content="2" Margin="5" Grid.Row="3" Grid.Column="1"/>
            <Button Content="3" Margin="5" Grid.Row="3" Grid.Column="2"/>

            <Button Content="0" Margin="5" Grid.Row="4" Grid.ColumnSpan="2"/>
            <Button Content="." Margin="5" Grid.Row="4" Grid.Column="2" Height="50"/>

        </Grid>
    </Button>
    <Button>
        <Grid Margin="10" Width="400">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <Label Content="PIN" Margin="5" Grid.Row="1" Height="50"/>
            <TextBox Margin="5" Grid.Row="1" Grid.Column="2" Height="50" />

        </Grid>
    </Button>
</DockPanel>

顺便说一句，我可以在这里的所有内容都使用 Grid 还是必须使用停靠面板和网格的组合？

【问题讨论】：

具有 StackPanels 或 Grids 以及其他按钮作为其内容的按钮？这似乎没有多大意义。
是的，我也觉得很奇怪。但是当我在代码审查时发布代码时，他们要求我在这里发布。
那我就用网格来做吧。

标签： c# wpf

【解决方案1】：

您可以使用一组嵌套网格：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100"/>
        <ColumnDefinition/>
        <ColumnDefinition Width="100" />
    </Grid.ColumnDefinitions>

    <StackPanel Grid.Column="0">
        <Button Content="Left Button 1" Height="100"/>
        <Button Content="Left Button 2" Height="100"/>
        <Button Content="Left Button 3" Height="100"/>
    </StackPanel>

    <StackPanel Grid.Column="2">
        <Button Content="Right Button 1" Height="100"/>
        <Button Content="Right Button 2" Height="100"/>
        <Button Content="Right Button 3" Height="100"/>
    </StackPanel>

    <Grid Grid.Column="1">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Grid Grid.Row="0" Margin="10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0" VerticalAlignment="Center" Text="PIN"/>
            <TextBox Grid.Column="1" VerticalAlignment="Center"/>
        </Grid>

        <Grid Grid.Row="1" Margin="10">
            <!-- the number keypad -->
        </Grid>
    </Grid>
</Grid>

【讨论】：