将网格中的第一行分成四个相等的部分 WPF

Question

我以前在扩展WPF工具包的WizardPage控件中画过tabcontrol之类的东西

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

但是网格内的文本框的宽度不同，尽管我将它们中的每一个都设置为相同的宽度，这是整个 WizardPage width/4（因为我有四个文本框）。

有什么解决办法吗？

谢谢！

Answer 1

要平均分成 4 列，您应该使用网格，而不是 DockPanel。虽然不需要预先确定宽度。只需指出您有 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>

您还可以通过仅使用 1 个网格来简化 xaml。 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>

将网格中的第一行分成四个相等的部分 WPF

Divide first row in the grid to four equal parts WPF

c#

wpf

grid

wpftoolkit

winrt-xaml-toolkit