“ColumnDefinitions”有问题吗？答案

【问题标题】：Having problems with "ColumnDefinitions"?“ColumnDefinitions”有问题吗？
【发布时间】：2014-10-03 16:30:21
【问题描述】：

我正在尝试制作GUI calculator，所以我是WPF 的新手，并尽我所能与adjust ColumnDefinitions 合作

源代码：

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="60"></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <TextBox FontSize="30" VerticalAlignment="Center" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" Width="460"></TextBox>
    </Grid>

</Window>

看一下截图：

在我的第一个中，我插入了一个 TextBox 并在第二行中插入了一些 Buttons of numbers 。所以，我对它们感到不安..

所以尝试了这段代码：

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="60"></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBox FontSize="30" VerticalAlignment="Center" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" Width="460"></TextBox>
    </Grid>

</Window>

但是文本框有问题:(

截图：

请帮忙！

【问题讨论】：

标签： c# wpf

【解决方案1】：

我会将控件堆叠在一起，然后将正确的区域划分为列。

<StackPanel>
    <Grid
        Height="60">
        <TextBox
            FontSize="30"
            VerticalAlignment="Center"
            Grid.Row="0"
            Grid.Column="0"
            HorizontalAlignment="Center"
            Width="460" />
    </Grid>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
    </Grid>
</StackPanel>

您还可以在 TextBox 上定义 ColumnSpan，但在添加新列时必须调整该属性：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition
            Height="60"></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <TextBox
        Grid.ColumnSpan="2"
        FontSize="30"
        VerticalAlignment="Center"
        Grid.Row="0"
        Grid.Column="0"
        HorizontalAlignment="Center"
        Width="460" />
</Grid>

【讨论】：

【解决方案2】：

首先，您需要在MSDN 上阅读更多关于 wpf 中的网格的信息

现在来解决您的问题，如果您正在定义网格的行和列，则不要为元素指定宽度和高度（除非您希望为某些元素指定固定大小，否则元素将填充到它们各自的行/列中）元素是有原因的）

所以你的 TextBox 会变成

<TextBox Grid.Row="0" Grid.ColumnSpan="2" Text="Some Text"/>

如果您希望在某些行中包含列，那么您将在该行/单元格中创建一个新网格，然后为该新网格添加列定义，如下所示

<Grid Grid.Row="1" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
</Grid>

【讨论】：

【解决方案3】：

我也希望在这里给出我的答案，

我自己用<Grid Grid.Row="1"></Grid>做的！

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="60"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <TextBox FontSize="30" VerticalAlignment="Center" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" Width="460"></TextBox>

        <Grid Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>

            <Button FontSize="30" Grid.Row="0" Grid.Column="0" Name="Number7">7</Button>
            <Button FontSize="30" Grid.Row="0" Grid.Column="1" Name="Number8">8</Button>
            <Button FontSize="30" Grid.Row="0" Grid.Column="2" Name="Number9">9</Button>
            <Button FontSize="30" Grid.Row="1" Grid.Column="2" Name="Number6">6</Button>
            <Button FontSize="30" Grid.Row="1" Grid.Column="1" Name="Number5">5</Button>
            <Button FontSize="30" Grid.Row="1" Grid.Column="0" Name="Number4">4</Button>
            <Button FontSize="30" Grid.Row="2" Grid.Column="2" Name="Number3">3</Button>
            <Button FontSize="30" Grid.Row="2" Grid.Column="1" Name="Number2">2</Button>
            <Button FontSize="30" Grid.Row="2" Grid.Column="0" Name="Number1">1</Button>
            <Button FontSize="30" Grid.Row="3" Grid.Column="1" Name="Number0">0</Button>
            <Button FontSize="40" Grid.Row="3" Grid.Column="0" Name="C">C</Button>
            <Button FontSize="40" Grid.Row="3" Grid.Column="2" Name="Result">=</Button>
            <Button FontSize="40" Grid.Row="0" Grid.Column="3" Name="Add">+</Button>
            <Button FontSize="40" Grid.Row="1" Grid.Column="3" Name="Subtract">-</Button>
            <Button FontSize="40" Grid.Row="2" Grid.Column="3" Name="Divide">/</Button>
            <Button FontSize="40" Grid.Row="3" Grid.Column="3" Name="Multiply">*</Button>
        </Grid>
    </Grid>

</Window>

【讨论】：

【解决方案4】：

在设计应用程序时，将 UI 拆分为块。每个块将是一个Grid，可以拆分为其他Grid。在您的情况下，您希望顶部有一个块（用于Texbox），底部有一个块，稍后将被拆分。

所以，创建你的第一个 Grid

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

</Grid>

为顶部设置一个自动大小。内容将定义大小。并把剩余的所有尺寸留给另一个Grid ("*")

现在，您可以在顶部放置一个 Texbox，在底部放置另一个 Grid：

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

    <TextBox Text="Some Text"/>

    <Grid Grid.Row="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

    </Grid>

</Grid>

因为Textboxproperties Grid.Row 是0，所以你可以忘记它（除非你想拥有更易读的代码）。

对于内部Grid，您必须定义Grid.Row="1"，它是父Grid 的位置。在这个Grid 中，我定义了 3 行相同高度（剩余大小除以 3）和 3 列相同宽度（剩余大小除以 3）

【讨论】：