0

以前は、拡張 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 の合計幅/4 です (テキスト ボックスが 4 つあるため)。

解決策を教えてください。

ありがとう！

4

1 に答える 1

3

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>
于 2016-02-28T20:48:01.473 に答える