[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;
}
}