WP7 ListBox项目填充ListBox的宽度

时间:2010-08-24 22:55:49

标签: listbox datatemplate windows-phone-7

我试图让ListBox中的Items跨越ListBox的整个宽度。我发现了几个处理Horizo​​ntalContentAlignment =“Stretch”的帖子,但我无法让它在我的WP7应用程序中运行。这是我的ListBox:

<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中文本的大小。

4 个答案:

答案 0 :(得分:8)

使用以下静态资源作为Listbox的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>

答案 1 :(得分:6)

这就是我用来做的事情:

                <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/

答案 2 :(得分:2)

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

作为一种解决方法,您可能必须使用固定的宽度值。

答案 3 :(得分:2)

看起来John Gardner认为这是Beta中的一个缺陷。它在“普通老式”Silverlight中运行良好,但在手机中产生奇怪居中的区域。然而,过去很容易。

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

  • 在“混合”中,在“对象和时间线”面板中选择列表框,右键单击,然后选择“编辑其他模板/编辑生成的项目容器”(ItemContainerStyle)/编辑副本...选择名称/键和位置新风格的资源。

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

    <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    

一旦你告诉ContentControl它应该如何调整其(ahem)内容,结果应该是你所期望的。