[英]Divide first row in the grid to four equal parts WPF
I used to draw something like tabcontrol in WizardPage control of extended WPF toolkit. 我曾经在扩展的WPF工具包的WizardPage控件中绘制过类似tabcontrol的内容。
Relevant xaml code: 相关的xaml代码:
<xctk:WizardPage x:Name="Page1" PageType="Blank" Width="540"
BorderBrush="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="200"/>
</Grid.RowDefinitions>
<DockPanel Grid.Row="0">
<TextBox Width="135" Text="Step 1" Background="#FF2BADDE" FontSize="16" TextAlignment="Center" />
<TextBox Width="135" Text="Step 2" Background="#FF777A7C" FontSize="16" TextAlignment="Center" />
<TextBox Width="135" Text="Step 3" Background="#FF777A7C" FontSize="16" TextAlignment="Center" />
<TextBox Width="135" Text="Step 4" Background="#FF777A7C" FontSize="16" TextAlignment="Center" />
</DockPanel>
<Grid Grid.Row="1">
<GroupBox Header="Group 1" FontSize="16" Height="80" Margin="0,0,0,90" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="270"/>
<ColumnDefinition Width="270"/>
</Grid.ColumnDefinitions>
<RadioButton x:Name="RadioButNew" Content="New" FontSize="13.333" BorderThickness="0,1,1,1" HorizontalAlignment="Left" Margin="30,30,0,0"/>
<RadioButton x:Name="RadioButUpdate" Content="Update" Grid.Column="1" FontSize="13.333" Focusable="False" HorizontalAlignment="Left" Margin="30,30,0,0"/>
</Grid>
</GroupBox>
</Grid>
But text boxes inside grid aren't at the same width though I set each of them to same width which is the total WizardPage width/4 (since I have four text boxes). 但是,尽管我将每个网格都设置为相同的宽度,即WizardPage的总宽度/ 4(因为我有四个文本框),但网格内的文本框的宽度不同。
Any solution please? 有什么解决办法吗?
Thanks! 谢谢!
To equally divide in 4 columns , you should use a grid, instead of a DockPanel. 要平均分为4列,您应该使用网格而不是DockPanel。 Although it is unnecessary to precide the Width.
尽管没有必要规定宽度。 Just indicate that you have 4 columns :
只需指出您有4列:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="200"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" Text="Step 1" Background="#FF2BADDE" FontSize="16" TextAlignment="Center" />
<TextBox Grid.Column="1" Text="Step 2" Background="#FF777A7C" FontSize="16" TextAlignment="Center" />
<TextBox Grid.Column="2" Text="Step 3" Background="#FF777A7C" FontSize="16" TextAlignment="Center" />
<TextBox Grid.Column="3" Text="Step 4" Background="#FF777A7C" FontSize="16" TextAlignment="Center" />
</Grid>
<Grid Grid.Row="1">
<GroupBox Header="Group 1" FontSize="16" Height="80" Margin="0,0,0,90" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="270"/>
<ColumnDefinition Width="270"/>
</Grid.ColumnDefinitions>
<RadioButton x:Name="RadioButNew" Content="New" FontSize="13.333" BorderThickness="0,1,1,1" HorizontalAlignment="Left" Margin="30,30,0,0"/>
<RadioButton x:Name="RadioButUpdate" Content="Update" Grid.Column="1" FontSize="13.333" Focusable="False" HorizontalAlignment="Left" Margin="30,30,0,0"/>
</Grid>
</GroupBox>
</Grid>
</Grid>
you can also simplify you xaml by using only 1 grid. 您还可以仅使用1个网格来简化xaml。 Grid.ColumnSpan is handy is such a case :
Grid.ColumnSpan在这种情况下很方便:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="80"/>
<RowDefinition Height="200"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBox Grid.Row="0" Grid.Column="0" Text="Step 1" Background="#FF2BADDE" FontSize="16" TextAlignment="Center" />
<TextBox Grid.Row="0" Grid.Column="1" Text="Step 2" Background="#FF777A7C" FontSize="16" TextAlignment="Center" />
<TextBox Grid.Row="0" Grid.Column="2" Text="Step 3" Background="#FF777A7C" FontSize="16" TextAlignment="Center" />
<TextBox Grid.Row="0" Grid.Column="3" Text="Step 4" Background="#FF777A7C" FontSize="16" TextAlignment="Center" />
<GroupBox Header="Group 1" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="4" FontSize="16" Margin="0,0,0,90" />
<RadioButton Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" x:Name="RadioButNew" Content="New" FontSize="13.333" BorderThickness="0,1,1,1" HorizontalAlignment="Center" Margin="30,30,0,0"/>
<RadioButton Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="2" x:Name="RadioButUpdate" Content="Update" FontSize="13.333" Focusable="False" HorizontalAlignment="Center" Margin="30,30,0,0"/>
</Grid>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.