[WP8] ListBox的Item宽度自动填满

[WP8] ListBox的Item宽度自动填满

范例下载

范例程序代码:点此下载

问题情景

开发WP8应用程序的时候,常常会需要使用ListBox作为容器来呈现各种数据集合。但是在ListBox呈现数据时,ListBox中每个用来呈现数据的Item控件,在默认的状态下,宽度并不会填满整个ListBox。这样的默认样式,会因为Item控件的内容而动态的决定实际宽度,这很容易造成显示时排版不整齐,进而影响整体美观。

  • 执行结果

    [WP8] ListBox的Item宽度自动填满

  • 程序代码(.XAML)

    <!--Resources-->
    <phone:PhoneApplicationPage.Resources> <!--TestTemplate-->
    <DataTemplate x:Key="TestDataTemplate">
    <Button Content="{Binding Path=Name}" Background="LightPink" />
    </DataTemplate> </phone:PhoneApplicationPage.Resources> <!--LayoutRoot-->
    <ListBox x:Name="ListBox001" ItemTemplate="{StaticResource TestDataTemplate}" Background="LightBlue"> </ListBox>
  • 程序代码(.CS)

    public class TestData
    {
    public string Name { get; set; }
    } public partial class MainPage : PhoneApplicationPage
    {
    // Constructors
    public MainPage()
    {
    // Initialize
    this.InitializeComponent(); // Data
    var dataList = new List<TestData>();
    dataList.Add(new TestData() { Name = "D1" });
    dataList.Add(new TestData() { Name = "D2222" });
    dataList.Add(new TestData() { Name = "D33" });
    dataList.Add(new TestData() { Name = "D444444" });
    dataList.Add(new TestData() { Name = "D5" });
    dataList.Add(new TestData() { Name = "D6" }); // Binding
    this.ListBox001.ItemsSource = dataList;
    }
    }

解决方案

解决方案很简单,只要照着下列范例的XAML内容,将ListBox中Item控件的HorizontalContentAlignment属性重新定义为Stretch,就可以让Item控件的宽度填满整个ListBox。

  • 执行结果

    [WP8] ListBox的Item宽度自动填满

  • 程序代码(.XAML)

    <!--Resources-->
    <phone:PhoneApplicationPage.Resources> <!--TestTemplate-->
    <DataTemplate x:Key="TestDataTemplate">
    <Button Content="{Binding Path=Name}" Background="LightPink" />
    </DataTemplate> </phone:PhoneApplicationPage.Resources> <!--LayoutRoot-->
    <ListBox x:Name="ListBox001" ItemTemplate="{StaticResource TestDataTemplate}" Background="LightBlue"> <!--Style-->
    <ListBox.ItemContainerStyle>
    <Style TargetType="ListBoxItem">
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    </Style>
    </ListBox.ItemContainerStyle> </ListBox>
  • 程序代码(.CS)

    public class TestData
    {
    public string Name { get; set; }
    } public partial class MainPage : PhoneApplicationPage
    {
    // Constructors
    public MainPage()
    {
    // Initialize
    this.InitializeComponent(); // Data
    var dataList = new List<TestData>();
    dataList.Add(new TestData() { Name = "D1" });
    dataList.Add(new TestData() { Name = "D2222" });
    dataList.Add(new TestData() { Name = "D33" });
    dataList.Add(new TestData() { Name = "D444444" });
    dataList.Add(new TestData() { Name = "D5" });
    dataList.Add(new TestData() { Name = "D6" }); // Binding
    this.ListBox001.ItemsSource = dataList;
    }
    }
上一篇:SQL周、日、月、年数据统计


下一篇:python字符串常用函数-大小写,删除空格,字符串切片