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>

查看截图：

enter image description here

在我第一次插入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>

但是文本框有问题：（

截图：

enter image description here

请帮助！

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拆分为块。 Eeach块将是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>

对于Textbox属性Grid.Row是0，所以你可以忘记它（除非你想要一个更易读的代码）。

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

遇到“ColumnDefinitions”问题？

4 个答案: