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

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

范例下载

范例程序代码：点此下载

问题情景

开发WP8应用程序的时候，常常会需要使用ListBox作为容器来呈现各种数据集合。但是在ListBox呈现数据时，ListBox中每个用来呈现数据的Item控件，在默认的状态下，宽度并不会填满整个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。

• 执行结果

  

• 程序代码(.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;
      }
  }