UWP XAML - 创建同样宽的文本块答案

【问题标题】：UWP XAML - Create equally wide TextBlocksUWP XAML - 创建同样宽的文本块
【发布时间】：2016-06-20 22:33:02
【问题描述】：

我有一个学生对象列表，显示如下：

我希望名字和数字之间有空格，但我怎样才能实现呢？

XAML 代码：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" >

    <ListView x:Name="StudentsList" ItemsSource="{Binding Studenten}">


        <ListView.ItemTemplate>

            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Nachname}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                    <TextBlock Text="{Binding Vorname}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                    <TextBlock Text="{Binding MatrikelNr}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid> </Page>

【问题讨论】：

标签： xaml windows-phone uwp

【解决方案1】：

您可以使用保证金。

Margin = "Left,Up,Right,Down"

或者您可以为所有方向使用一个值

Margin = "Value"

所以，您的 XAML 应该是这样的：

    <ListView x:Name="StudentsList" ItemsSource="{Binding Studenten}">


        <ListView.ItemTemplate>

            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Nachname}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="5"/>
                    <TextBlock Text="{Binding Vorname}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="5"/>
                    <TextBlock Text="{Binding MatrikelNr}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="5"/>
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid> </Page>

【讨论】：

【解决方案2】：

如果您在每个名称后都有一个固定空格（例如... 10 像素），那么您可以使用 Kinani 给出的答案，只需在您的第三个 TextBlock 中添加一个边距（例如 Margin="10,0,0,0"），并使用数字绑定在里面。

如果您希望将数字向右对齐以使列表更易于阅读，就像列一样，您可以这样做：

<Grid Orientation="Horizontal">
     <Grid.ColumnDefinitions>
          <ColumnDefinition Width="Auto">
          <ColumnDefinition Width="Auto">
          <ColumnDefinition>
     </Grid.ColumnDefinitions>
     <TextBlock Text="{Binding Nachname}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,5,0"/>
     <TextBlock Grid.Column="1" Text="{Binding Vorname}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,5,0"/>
     <TextBlock Grid.Column="2" Text="{Binding MatrikelNr}" HorizontalAlignment="Right" VerticalAlignment="Stretch" />
</Grid>

这将导致类似于此的外观：

FirstName SecondName 123456789

FName SName 012345678

【讨论】：