Windows Phone TextBlock对齐方式

Question

在带有ItemTemplate的ListBox中，第二个TextBlock 未对齐到右边。

在设计模式下，第二个TextBlock 对齐到右侧

    <ListBox >
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <TextBlock 
                        Grid.Column="0" Padding="10" HorizontalAlignment="Left" 
                        Text="{Binding Display}" FontSize="30" 
                        />
                    <TextBlock 
                        Grid.Column="1" HorizontalAlignment="Right" 
                        Text="{Binding Length}" FontSize="30"
                        />
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>

        <ListBoxItem>
            <Grid>
                <TextBlock 
                    Grid.Column="0" Padding="10" HorizontalAlignment="Left" 
                    Text="2014-01-24 23:00:00" FontSize="30"
                    />
                <TextBlock 
                    Grid.Column="1" HorizontalAlignment="Right" 
                    Text="00:00" FontSize="30"
                    />
            </Grid>
        </ListBoxItem>
    </ListBox>

结果：

设计师的项目：

Answer 1

你需要将Horizo​​ntalContentAligment更改为Strech - 用你的项目填充空格，默认情况下它设置在左边：

<ListBox Name="myList">
  <ListBoxItem HorizontalContentAlignment="Stretch">
       <Grid>
          <TextBlock HorizontalAlignment="Left" Text="2014-01-24 23:00:00" FontSize="30"/>
          <TextBlock HorizontalAlignment="Right" Text="00:00" FontSize="30"/>
        </Grid>
    </ListBoxItem>
</ListBox>

您还可以设置ItemContainerStyle的属性：

<ListBox>
  <ListBox.ItemContainerStyle>
      <Style TargetType="ListBoxItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
      </Style>
  </ListBox.ItemContainerStyle>
  <ListBox.ItemTemplate>
    <DataTemplate>
        <Grid>
           <TextBlock Padding="10" HorizontalAlignment="Left" Text="{Binding Display}" FontSize="30"/>
           <TextBlock HorizontalAlignment="Right" Text="{Binding Length}" FontSize="30"/>
        </Grid>
    </DataTemplate>
 </ListBox.ItemTemplate>

 <ListBoxItem>
    <Grid>
      <TextBlock Padding="10" HorizontalAlignment="Left" Text="2014-01-24 23:00:00" FontSize="30"/>
      <TextBlock Padding="10" HorizontalAlignment="Right" Text="00:00" FontSize="30"/>
    </Grid>
  </ListBoxItem>
</ListBox>

如果你只有两个项目，一个对齐左，一个对齐 - 我删除了Colums。虽然它们有助于管理内容，但如果您需要包装文本和/或对其执行更多操作，它们也会有所帮助。

Answer 2

这是你可以做到的：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="3*" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <TextBlock 
         Grid.Column="0" Padding="10" HorizontalAlignment="Left" 
         Text="{Binding Display}" FontSize="30" 
         />
    <TextBlock 
         Grid.Column="1" HorizontalAlignment="Right" 
         Text="{Binding Length}" FontSize="30"
         />
</Grid>

这将使第一列的宽度为75％，第二列的宽度为25％。

如果您希望第一列和第二列根据内容动态更改宽度，则可以将一个宽度设置为＆＃34; Auto＆＃34;另一个没有宽度属性（或宽度=＆＃34; *＆＃34;），这意味着它将剩余的区域作为列宽。

Answer 3

我会选择Alexandr Sulimov解决方案。我做了一些改进。我认为这是最好的方法。

 <Grid>
      <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*"></ColumnDefinition>
           <ColumnDefinition Width="Auto"></ColumnDefinition>
      </Grid.ColumnDefinitions>
      <TextBlock Grid.Column="0" Padding="10" Text="{Binding Display}" FontSize="30" />
      <TextBlock Grid.Column="1" Text="{Binding Length}" FontSize="30" />
 </Grid>