WPF中的ListBox详解

简介

【ListBox】是列表控件，其内部可包含多个【ListBoxItem】，用户可以从列表中选择一个或多个项，若Item个数超过指定高度，则右侧会自动出现滚动条，非常便捷。尽管逻辑上来说，ListBox里面就应该装载ListBoxiItem，但实际上也可以装载其他控件，示例如下

其WPF代码为

<ListBox x:Name="lbDev" Height="100"><ListBoxItem Content="ListBoxItem A"/><ListBoxItem Content="ListBoxItem B"/><Button Content="Button"/><TextBox Text="TextBox"/><ListBoxItem Content="ListBoxItem C"/>
</ListBox>

ListBoxItem

【ListBoxItem】作为ListBox默认的子控件，其功能相对比较完备，在外观属性上，支持颜色、字体以及背景图片等美化；在动作上，支持双击。此外，还可以用其他控件来填充其Content，从而实现更复杂的功能。

下图分别对A, B, C三个Item进行了定制：为A设计了前景色和文字颜色；为B中添加了图片；将C封装成了单选框。

其WPF代码如下

<ListBox x:Name="lbDev" Height="100"><ListBoxItem Content="ListBoxItem A" Background="LightBlue" Foreground="Purple"/><ListBoxItem><StackPanel Orientation="Horizontal"><Image Source="E:\work\code\doc\imgs\PI_H811.jpg" Height="30"/><TextBlock Text="ListBoxItem B"></TextBlock></StackPanel></ListBoxItem><ListBoxItem><CheckBox Content="ListBoxItem C"/></ListBoxItem>
</ListBox>

其中，B和C都其Content进行了定制，且B中采用了StackPanel布局，理论上讲，甚至可以插入一整个页面。

由于单击操作被用于选中项目，故ListBoxItem中，用【Selected】来绑定单击事件，而双击操作【MouseDoubleClick】则不受影响，其绑定方式和普通的按钮没什么区别，故不再赘述了。

选中项目

之所以采用ListBox，主要原因是其子控件有一定的相似性，所以实际编程中，往往在ListBox这个层次来协调其子控件的选中等操作，示例如下

WPF代码为

<ListBox x:Name="lbDev" Height="60" SelectionChanged="lbDev_SelectionChanged" MouseDoubleClick="lbDev_MouseDoubleClick" ><ListBoxItem Content="ListBoxItem A"/><ListBoxItem Content="ListBoxItem B"/><ListBoxItem Content="ListBoxItem C"/>
</ListBox>
<TextBox x:Name="tbInfo" Height="50"/>

C#代码为

private void lbDev_SelectionChanged(object sender, SelectionChangedEventArgs e)
{tbInfo.Text = $"选中第{lbDev.SelectedIndex}个Item";
}private void lbDev_MouseDoubleClick(object sender, MouseButtonEventArgs e)
{tbInfo.Text = $"双击第{lbDev.SelectedIndex}个Item";
}    

动态列表

ListBox支持动态添加和删除Item，如下图所示

其wpf代码为

<ListBox x:Name="lbDev" Height="60">
</ListBox>
<UniformGrid Columns="3"><TextBox x:Name="tbName"/><Button Content="添加Item" Click="btnAddItem_Click"/><Button Content="删除Item" Click="btnRmItem_Click"/>
</UniformGrid>

C#代码为

private void btnAddItem_Click(object sender, RoutedEventArgs e)
{lbDev.Items.Add(new ListBoxItem() { Content = tbName.Text });
}private void btnRmItem_Click(object sender, RoutedEventArgs e)
{lbDev.Items.RemoveAt(lbDev.SelectedIndex);
}

其中【RemoveAt】可以删除指定位置的Item，也可以用【Remove】删除指定的Item。此外，【Clear】可以删除所有Item。