对“ ColumnDefinitions”有疑问吗？

Question

我正在尝试制作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>

但是文本框有一些问题:(

屏幕截图：

请帮忙！

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

Answer 2

首先，您需要阅读一些有关MSDN上 WPF中的网格的知识。

现在要解决的问题是，如果要定义网格的行和列，请不要为元素提供宽度和高度（元素将填充到其各自的行/列中，除非您希望为某些元素设置固定大小原因）

所以您的TextBox会变成

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

如果要在某些行中包含列，则可以在该行/单元格中创建一个新的Grid，然后为该新网格添加列定义，如下所示

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

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

Answer 4

设计应用程序时，将UI分成多个块。 每个块将是一个Grid它可以拆分为其他Grid 。 在您的情况下，您需要在顶部放置一个块（用于Texbox ），在底部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>

对于Textbox属性， Grid.Row为0 ，因此您可以将其忘记（除非您想要一个更具可读性的代码）。

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