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

您还可以在文本框定义一个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

首先，你需要阅读更多的关于wpf中的网格MSDN

现在，如果您要为网格定义行和列（元素将填充到它们各自的行/列中），请不要将宽度和高度赋予您的元素除非你想要给定大小，以你的一些元素是有原因的）■

所以，你的文本框会简直成了

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

Answer 3

我也希望我的回答给这里，

我做到了由mysel f使用<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），以及底部的一个块，稍后将进行拆分。

所以，创建第一个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）