XAML 列表框对齐问题答案

【问题标题】：XAML Listbox alignment issueXAML 列表框对齐问题
【发布时间】：2013-12-31 09:13:59
【问题描述】：

我有一个 Windows Phone 8 页面，左边是国家名称，右边是 ISD 代码。我想将国家/地区名称对齐到屏幕的最左侧，并将 ISD 代码对齐到屏幕的最右侧。

为此，我编写了以下 XAML

<Grid x:Name="LayoutRoot" Background="Transparent">
    <ListBox ItemsSource="{Binding IsdCodes}" HorizontalAlignment="Stretch" Background="Blue">
        <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                <Setter Property="HorizontalAlignment" Value="Stretch"/>
            </Style>
        </ListBox.ItemContainerStyle>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid HorizontalAlignment="Stretch" Background="Yellow" ShowGridLines="True">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="3*"/>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <TextBox Grid.Column="0" HorizontalAlignment="Stretch" Text="{Binding Key}" />
                    <TextBox Grid.Column="1" HorizontalAlignment="Stretch" Text="{Binding Value}" />
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

但我得到的输出如下：

由于我将网格列宽设为 3* 和 *，我希望第一列占据左侧屏幕宽度的 75%，第二列占据右侧屏幕宽度的 25%。但是我确实看到列表框项仍然没有占据整个屏幕宽度（假设从黄色背景开始）。

我哪里做错了？

【问题讨论】：

标签： c# wpf xaml windows-phone-8 windows-phone

【解决方案1】：

尝试将HorizontalContentAlignment 的ListBoxItem 设置为Stretch：

<Style TargetType="ListBoxItem">
   <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>

【讨论】：

【解决方案2】：

这是因为DataTemplate 在ContentPresenter 中呈现，而ListBoxItem 中没有拉伸。您需要为ListBoxItem重新定义模板：

    ...
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Border Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                <ContentPresenter HorizontalAlignment="Stretch" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListBox.ItemContainerStyle>
    ...

【讨论】：

+1 用于解释 DataTemplate 渲染。但是为什么在这里使用“边界”标签？即使没有在 Border 标签中包含 ContentPresenter，我也觉得我得到了相同的输出。
@Fadi，以防万一您想更改样式中的边框或背景。大多数控件模板都是这样的。
不管怎样，dkozl 的回答比较简单……我总是忘记 HorizontalContentAlignment

【解决方案3】：

您知道屏幕宽度是 480，您可以将其指定为 360 和 120

<ListBox.ItemTemplate>
            <DataTemplate>
                <Grid HorizontalAlignment="Stretch" Background="Yellow" ShowGridLines="True">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="360"/>
                        <ColumnDefinition Width="120" />
                    </Grid.ColumnDefinitions>
                    <TextBox Grid.Column="0" HorizontalAlignment="Stretch" Text="{Binding Key}" />
                    <TextBox Grid.Column="1" HorizontalAlignment="Stretch" Text="{Binding Value}" />
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>

【讨论】：

【解决方案4】：

这会帮助你，设置列表框数据模板内的网格宽度

<Grid x:Name="LayoutRoot" Background="Transparent">
 <ListBox ItemsSource="{Binding IsdCodes}" HorizontalAlignment="Stretch" Background="Blue">
  <ListBox.ItemContainerStyle>
    <Style TargetType="ListBoxItem">
     <Setter Property="HorizontalAlignment" Value="Stretch"/>
     </Style>
    </ListBox.ItemContainerStyle>
     <ListBox.ItemTemplate>
      <DataTemplate>
     <Grid HorizontalAlignment="Left" Background="Yellow" ShowGridLines="True" Width="460">
        <Grid.ColumnDefinitions>
         <ColumnDefinition Width="Auto"/>
          <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
       <TextBox Grid.Column="0" HorizontalAlignment="Stretch" Text="{Binding Key}" />
        <TextBox Grid.Column="1" HorizontalAlignment="Stretch" Text="{Binding Value}" />
         </Grid>
       </DataTemplate>
     </ListBox.ItemTemplate>
    </ListBox>
</Grid>

【讨论】：