Question

我有一个很长的列表选择器。

我想要做的就是在ItemTemplate中对齐两个元素： 1.具有给定固定宽度的右侧按钮 2.左侧的文本面板，用于填充显示屏的剩余空间。但不幸的是，文本面板没有拉伸，按钮与文本面板文本的右端对齐。：（

这是我的代码：

<DataTemplate x:Key="AddrBookItemTemplate">
  <StackPanel Orientation="Horizontal" Name="DummerContainer" HorizontalAlignment="Stretch">
    <TextBlock FontWeight="Bold" Text="{Binding Name}" HorizontalAlignment="Stretch"/>
    <Button HorizontalAlignment="Right" Width="120"/>
  </StackPanel>
</DataTemplate>

和

<phone:LongListSelector
      HorizontalAlignment="Stretch"
      x:Name="AddrBook"
      JumpListStyle="{StaticResource AddrBookJumpListStyle}"
      Background="Transparent"
      GroupHeaderTemplate="{StaticResource AddrBookGroupHeaderTemplate}"
      ItemTemplate="{StaticResource AddrBookItemTemplate}"
      LayoutMode="List"
      IsGroupingEnabled="true"
      HideEmptyGroups ="true"/>

所以，这是我的问题：如何正确对齐这两个元素？

Answer 1

这是使用水平StackPanel ...

的结果

在DataTemplate中使用Grid而不是StackPanel。然后，您可以定义ColumnDefinitions以根据需要分配空格，即：

将第0列定义为Width="*"并将TextBlock放入其中
将第1列定义为Width="Auto"，将Button放入其中。

Answer 2

Afaik，Stackpanel比Grid更快。所以，我决定找出问题的根源。我在这里找到了它：http://y2bd.me/blog/2013/08/16/fixing-alignment-issues-with-datatemplateselector/

对我来说很好。

Phone 8 XAML：LongListSelector中的水平对齐

2 个答案: