WP7 列表框项目填充列表框的宽度

Question

我试图让列表框中的项目跨越列表框的整个宽度。我发现了几篇涉及 Horizo​​ntalContentAlignment="Stretch" 的帖子，但我无法让它在我的 WP7 应用程序中工作。这是我的列表框：

<ListBox Margin="8" HorizontalContentAlignment="Stretch" ItemsSource="{Binding Collection}" >
    <ListBox.ItemTemplate>
        <DataTemplate> 
            <Border BorderBrush="Black" CornerRadius="3" Background="#FFE88D34" 
                BorderThickness="1" HorizontalAlignment="Stretch" > 
                <Grid Background="Transparent" HorizontalAlignment="Stretch" > 
                    <Grid.ColumnDefinitions> 
                        <ColumnDefinition Width="*" /> 
                    </Grid.ColumnDefinitions> 
                    <TextBlock  
                        Grid.Column="0" HorizontalAlignment="Stretch" 
                        Margin="2"                                    
                        FontSize="10" 
                        Text="{Binding Property1}"/> 
                </Grid> 
             </Border> 
        </DataTemplate> 
    </ListBox.ItemTemplate>
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

我试图让橙色边框跨越列表框的整个宽度，以便所有列表项的大小相同，而不仅仅是 TextBlock 中文本的大小。

Answer 1

使用以下静态资源作为列表框的 ItemContainerStyle：

ItemContainerStyle="{StaticResource ListboxStretchStyle}" 

<Application.Resources>
    <Style TargetType="ListBoxItem" x:Key="ListboxStretchStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Application.Resources>

Answer 2

这就是我的用途：

                <ListBox Height="430" Margin="50,70,50,110" Name="myListBox" >

                    <ListBox.ItemContainerStyle>
                        <Style TargetType="ListBoxItem">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate>
                                        <ContentPresenter
                                            HorizontalAlignment="Stretch" 
                                            VerticalAlignment="Stretch" />
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </ListBox.ItemContainerStyle>

                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Border Background="{StaticResource PhoneAccentBrush}" >
                                <TextBlock
                                    Text="{Binding Text}"
                                    FontSize="30"
                                    Foreground="{StaticResource PhoneForegroundBrush}" />
                            </Border>
                        </DataTemplate>
                    </ListBox.ItemTemplate>

                </ListBox>

在这里找到更多矿石更少：http://timdams.wordpress.com/2011/11/30/creating-a-wp7-app-listbox-items-of-the-same-width/< /a>

Answer 3

我相信这是测试版中的一个错误，因为 Horizo​​ntalContentAlignment 应该是它。

作为解决方法，您可能必须使用固定宽度值。

Answer 4

约翰·加德纳 (John Gardner) 似乎认为这是 Beta 版的一个缺陷。它在“普通的旧式”Silverlight 中运行良好，但在 Phone 中会产生奇怪的中心区域。然而，要过去很容易。

• 删除/注释掉上面列表框中的 ListBox.ItemContainerStyle 条目。

• 在 Blend 中，在“对象和时间轴”面板中选择列表框，单击鼠标右键，然后选择“编辑其他模板/编辑生成的项目容器 (ItemContainerStyle)/编辑副本...”为新样式选择名称/键和位置

• 找到 ContentContainer 控件，并将其水平内容对齐方式设置为绑定到使用此模板的项目中设置的水平内容对齐方式 (Horizo​​ntalContentAlignment="{TemplateBinding Horizo​​ntalContentAlignment}" )，如下所示：

：已经告诉 ContentControl 它应该如何对齐其（咳咳）内容，结果应该是您所期望的。