WPF网格格式化问题

本文关键字：问题 格式化 网格 WPF | 更新日期: 2023-09-27 18:01:53

我想有Grid和两列，其中在一列中我有Label在另一列中有TextBox来显示值。但不幸的是，我的标签和文本框是相互显示的。我做错了什么?它是显示信息的合适和优雅的方式吗?也许你能建议其他更好的方法?谢谢!

<StackPanel Grid.Row="0" Grid.Column="2" VerticalAlignment="Stretch">                   
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <telerik:Label Grid.Column="0" Content="Name" Width="203" FontSize="16"/>
        <telerik:Label Grid.Column="0" Content="Title" Width="203" FontSize="16"/>
        <telerik:Label Grid.Column="0" Content="Phone" Width="203" FontSize="16"/>
        <telerik:Label Grid.Column="0" Content="Email" Width="203" FontSize="16"/>
        <telerik:Label Grid.Column="0" Content="Departament" Width="203" FontSize="16"/>
        <TextBlock Grid.Column="1" x:Name="txtFullName" TextWrapping="Wrap" Height="26"/>
        <TextBlock Grid.Column="1" x:Name ="txtTitle" TextWrapping="Wrap" Height="26"/>
        <TextBlock Grid.Column="1" x:Name ="txtPhone" TextWrapping="Wrap" Height="26"/>
        <TextBlock Grid.Column="1" x:Name ="txtEmail" TextWrapping="Wrap" Height="26"/>
        <TextBlock Grid.Column="1" x:Name ="txtDepartment" TextWrapping="Wrap" Height="26"/>
    </Grid>              
</StackPanel>

WPF网格格式化问题

您需要向Grid添加行。目前，只有1行(因为您没有RowDefinitions)，所以每列中的所有项目都将在单行中堆叠在一起。

以与添加列相同的方式添加网格行，然后以相同的方式告诉控件它们属于哪一行。您可以添加如下行:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>  <!-- * is the default width, so not required -->
        <ColumnDefinition/>            <!-- will be the same as above due to default of * -->
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/> <!-- the * height is implied if not present -->
        <RowDefinition Height="Auto"/>  <!-- this will take up only as much space as necessary -->
    </Grid.RowDefinitions>
    <TextBox Grid.Column="0" Grid.Row="0" Text="Label 1"/>
    <TextBox Grid.Column="0" Grid.Row="1" Text="Label 2"/>
    <!-- etc... -->
</Grid>

高度为*的行将拉伸以填充可用空间(在所有高度为*的行之间划分)，高度为"Auto"的行将收缩以只占用显示其内容所需的空间。

相关文章：