WPF笔记汇总之列表类控件与DataGrid控件

WPF列表类控件

接着上一篇《WPF笔记汇总之富文本控件与标签页控件》,这篇主要汇总WPF列表类的控件,包括ItemsControl,ListBox,ComboBox等列表大类相关控件及DataGrid控件的用法实例。

1. ItemsControl

最简单的列表项模板,可以添加各种样式和控件,其中ItemsPanelTemplate属性可以设置容器模板的样式,还可以在ItemsControl的外层实现一个ScrollViewer中,来增加滚动条。

<!--简单的列表项-->
<ItemsControl>
	<system:String>ItemsControl Item #1</system:String>
	<system:String>ItemsControl Item #2</system:String>
	<system:String>ItemsControl Item #3</system:String>
	<system:String>ItemsControl Item #4</system:String>
	<system:String>ItemsControl Item #5</system:String>
</ItemsControl>

<!--数据绑定演示-->
<ItemsControl Name="icTodoList">
	<ItemsControl.ItemTemplate>
		<DataTemplate>
			<Grid Margin="0,0,0,5">
				<Grid.ColumnDefinitions>
					<ColumnDefinition Width="*" />
					<ColumnDefinition Width="100" />
				</Grid.ColumnDefinitions>
				<TextBlock Text="{Binding Title}" />
				<ProgressBar Grid.Column="1" Minimum="0" Maximum="100" Value="{Binding Completion}" />
			</Grid>
		</DataTemplate>
	</ItemsControl.ItemTemplate>
</ItemsControl>

<!--引入WrapPanel作为模板-->
<ItemsControl>
	<ItemsControl.ItemsPanel>
		<ItemsPanelTemplate>
			<WrapPanel />
		</ItemsPanelTemplate>
	</ItemsControl.ItemsPanel>
	<ItemsControl.ItemTemplate>
		<DataTemplate>
			<Button Content="{Binding}" Margin="0,0,5,5" />
		</DataTemplate>
	</ItemsControl.ItemTemplate>
	<system:String>Item #1</system:String>
	<system:String>Item #2</system:String>
	<system:String>Item #3</system:String>
	<system:String>Item #4</system:String>
	<system:String>Item #5</system:String>
</ItemsControl>

<!--引入UniformGrid作为模板-->
<ItemsControl>
	<ItemsControl.ItemsPanel>
		<ItemsPanelTemplate>
			<UniformGrid Columns="2" />
		</ItemsPanelTemplate>
	</ItemsControl.ItemsPanel>
	<ItemsControl.ItemTemplate>
		<DataTemplate>
			<Button Content="{Binding}" Margin="0,0,5,5" />
		</DataTemplate>
	</ItemsControl.ItemTemplate>
	<system:String>Item #1</system:String>
	<system:String>Item #2</system:String>
	<system:String>Item #3</system:String>
	<system:String>Item #4</system:String>
	<system:String>Item #5</system:String>
</ItemsControl>

<!--带滚动条的ItemsControl-->
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
	<ItemsControl>
		<system:String>ItemsControl Item #1</system:String>
		<system:String>ItemsControl Item #2</system:String>
		<system:String>ItemsControl Item #3</system:String>
		<system:String>ItemsControl Item #4</system:String>
		<system:String>ItemsControl Item #5</system:String>
	</ItemsControl>
</ScrollViewer>
public partial class MainWindow : Window
{
	public MainWindow()
	{
		InitializeComponent();

		List<TodoItem> items = new List<TodoItem>();
		items.Add(new TodoItem() { Title = "Complete this WPF tutorial", Completion = 45 });
		items.Add(new TodoItem() { Title = "Learn C#", Completion = 80 });
		items.Add(new TodoItem() { Title = "Wash the car", Completion = 0 });
		icTodoList.ItemsSource = items;
	}
}
public class TodoItem
{
	public string Title { get; set; }
	public int Completion { get; set; }
}

2. ListBox

标准的列表框控件,比较常见的控件。声明一个ListBox控件,里面的选项是ListBoxItem类型对象,由于ListBoxItem实际上是一个ContentControl,所以可以为它定义自定义内容。其中HorizontalContentAlignment属性为设置内容的对其方式。将SelectionMode更改为Extended,就可以多选了,通过按住[Ctrl]或[Shift]时单击项来完成多选。

<!--简单示例-->
<ListBox>
	<ListBoxItem>ListBox Item #1</ListBoxItem>
	<ListBoxItem>ListBox Item #2</ListBoxItem>
	<ListBoxItem>ListBox Item #3</ListBoxItem>
</ListBox>

<!--自定义选项样式-->
<ListBox>
	<ListBoxItem>
		<StackPanel Orientation="Horizontal">
			<Image Source="/images/file.png" />
			<TextBlock>ListBox Item #1</TextBlock>
		</StackPanel>
	</ListBoxItem>
	<ListBoxItem>
		<StackPanel Orientation="Horizontal">
			<Image Source="/images/file.png" />
			<TextBlock>ListBox Item #2</TextBlock>
		</StackPanel>
	</ListBoxItem>
	<ListBoxItem>
		<StackPanel Orientation="Horizontal">
			<Image Source="/images/file.png" />
			<TextBlock>ListBox Item #3</TextBlock>
		</StackPanel>
	</ListBoxItem>
</ListBox>

<!--ListBox数据绑定-->
<ListBox Name="lbTodoList" HorizontalContentAlignment="Stretch">
	<ListBox.ItemTemplate>
		<DataTemplate>
			<Grid Margin="0,2">
				<Grid.ColumnDefinitions>
					<ColumnDefinition Width="*" />
					<ColumnDefinition Width="100" />
				</Grid.ColumnDefinitions>
				<TextBlock Text="{Binding Title}" />
				<ProgressBar Grid.Column="1" Minimum="0" Maximum="100" Value="{Binding Completion}" />
			</Grid>
		</DataTemplate>
	</ListBox.ItemTemplate>
</ListBox>

<!--使用ListBox选择-->
<DockPanel Margin="10">
	<StackPanel DockPanel.Dock="Right" Margin="10,0">
		<StackPanel.Resources>
			<Style TargetType="Button">
				<Setter Property="Margin" Value="0,0,0,5" />
			</Style>
		</StackPanel.Resources>
		<TextBlock FontWeight="Bold" Margin="0,0,0,10">ListBox selection</TextBlock>
		<Button Name="btnShowSelectedItem" Click="btnShowSelectedItem_Click">Show selected</Button>
		<Button Name="btnSelectLast" Click="btnSelectLast_Click">Select last</Button>
		<Button Name="btnSelectNext" Click="btnSelectNext_Click">Select next</Button>
		<Button Name="btnSelectCSharp" Click="btnSelectCSharp_Click">Select C#</Button>
		<Button Name="btnSelectAll" Click="btnSelectAll_Click">Select all</Button>
	</StackPanel>
	<ListBox Name="lbTodoList2" HorizontalContentAlignment="Stretch" SelectionMode="Extended" SelectionChanged="lbTodoList_SelectionChanged">
		<ListBox.ItemTemplate>
			<DataTemplate>
				<Grid Margin="0,2">
					<Grid.ColumnDefinitions>
						<ColumnDefinition Width="*" />
						<ColumnDefinition Width="100" />
					</Grid.ColumnDefinitions>
					<TextBlock Text="{Binding Title}" />
					<ProgressBar Grid.Column="1" Minimum="0" Maximum="100" Value="{Binding Completion}" />
				</Grid>
			</DataTemplate>
		</ListBox.ItemTemplate>
	</ListBox>
</DockPanel>

public MainWindow()
{
	InitializeComponent();
	List<TodoItem> items = new List<TodoItem>();
	items.Add(new TodoItem() { Title = "Complete this WPF tutorial", Completion = 45 });
	items.Add(new TodoItem() { Title = "Learn C#", Completion = 80 });
	items.Add(new TodoItem() { Title = "Wash the car", Completion = 0 });

	lbTodoList.ItemsSource = items;
	lbTodoList2.ItemsSource = items;
}

private void lbTodoList_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
{
	if (lbTodoList2.SelectedItem != null)
		this.Title = (lbTodoList2.SelectedItem as TodoItem).Title;
}
private void btnShowSelectedItem_Click(object sender, RoutedEventArgs e)
{
	foreach (object o in lbTodoList2.SelectedItems)
		MessageBox.Show((o as TodoItem).Title);
}
private void btnSelectLast_Click(object sender, RoutedEventArgs e)
{
	lbTodoList2.SelectedIndex = lbTodoList2.Items.Count - 1;
}
private void btnSelectNext_Click(object sender, RoutedEventArgs e)
{
	int nextIndex = 0;
	if ((lbTodoList2.SelectedIndex >= 0) && (lbTodoList2.SelectedIndex < (lbTodoList2.Items.Count - 1)))
		nextIndex = lbTodoList2.SelectedIndex + 1;
	lbTodoList2.SelectedIndex = nextIndex;
}
private void btnSelectCSharp_Click(object sender, RoutedEventArgs e)
{
	foreach (object o in lbTodoList2.Items)
	{
		if ((o is TodoItem) && ((o as TodoItem).Title.Contains("C#")))
		{
			lbTodoList2.SelectedItem = o;
			break;
		}
	}
}
private void btnSelectAll_Click(object sender, RoutedEventArgs e)
{
	foreach (object o in lbTodoList2.Items)
		lbTodoList2.SelectedItems.Add(o);
}
}
public class TodoItem
{
	public string Title { get; set; }
	public int Completion { get; set; }
}
  • ListBox运行实例截图

ListBox运行实例截图

3. ComboBox

组合框(ComboBox)控件类似于列表框(ListBox)控件,但占用的空间更少,因为该控件可以隐藏项列表。同ListBox类似,由于ComboBoxItem是一个ContentControl,所以也可以使用任何控件作为内容。 IsEditable属性可以设置是否可以编辑输入内容。IsTextSearchCaseSensitive属性控制区分大小写,IsTextSearchEnabled属性控制自动完成功能。

<!--简单使用-->
<ComboBox IsEditable="True">
	<ComboBoxItem>ComboBox Item #1</ComboBoxItem>
	<ComboBoxItem IsSelected="True">ComboBox Item #2</ComboBoxItem>
	<ComboBoxItem>ComboBox Item #3</ComboBoxItem>
</ComboBox>

<!--自定义内容-->
<ComboBox>
	<ComboBoxItem>
		<StackPanel Orientation="Horizontal">
			<Image Source="/images/file.png" />
			<TextBlock Foreground="Red">Red</TextBlock>
		</StackPanel>
	</ComboBoxItem>
	<ComboBoxItem>
		<StackPanel Orientation="Horizontal">
			<Image Source="/images/file.png" />
			<TextBlock Foreground="Green">Green</TextBlock>
		</StackPanel>
	</ComboBoxItem>
	<ComboBoxItem>
		<StackPanel Orientation="Horizontal">
			<Image Source="/images/file.png" />
			<TextBlock Foreground="Blue">Blue</TextBlock>
		</StackPanel>
	</ComboBoxItem>
</ComboBox>
<!--数据绑定-->
<ComboBox Name="cmbColors">
	<ComboBox.ItemTemplate>
		<DataTemplate>
			<StackPanel Orientation="Horizontal">
				<Rectangle Fill="{Binding Name}" Width="16" Height="16" Margin="0,2,5,2" />
				<TextBlock Text="{Binding Name}" />
			</StackPanel>
		</DataTemplate>
	</ComboBox.ItemTemplate>
</ComboBox>
<!--使用ComboBox选择-->
<ComboBox Name="cmbColors2" SelectionChanged="cmbColors_SelectionChanged">
	<ComboBox.ItemTemplate>
		<DataTemplate>
			<StackPanel Orientation="Horizontal">
				<Rectangle Fill="{Binding Name}" Width="16" Height="16" Margin="0,2,5,2" />
				<TextBlock Text="{Binding Name}" />
			</StackPanel>
		</DataTemplate>
	</ComboBox.ItemTemplate>
</ComboBox>
<WrapPanel Margin="15" HorizontalAlignment="Center">
	<Button Name="btnPrevious" Click="btnPrevious_Click" Width="55">Previous</Button>
	<Button Name="btnNext" Click="btnNext_Click" Margin="5,0" Width="55">Next</Button>
	<Button Name="btnBlue" Click="btnBlue_Click" Width="55">Blue</Button>
</WrapPanel>

public MainWindow()
{
	InitializeComponent();
	cmbColors.ItemsSource = typeof(Colors).GetProperties();
	cmbColors2.ItemsSource = typeof(Colors).GetProperties();
}

private void btnPrevious_Click(object sender, RoutedEventArgs e)
{
	if (cmbColors2.SelectedIndex > 0)
		cmbColors2.SelectedIndex = cmbColors2.SelectedIndex - 1;
}

private void btnNext_Click(object sender, RoutedEventArgs e)
{
	if (cmbColors2.SelectedIndex < cmbColors2.Items.Count - 1)
		cmbColors2.SelectedIndex = cmbColors2.SelectedIndex + 1;
}

private void btnBlue_Click(object sender, RoutedEventArgs e)
{
	cmbColors2.SelectedItem = typeof(Colors).GetProperty("Blue");
}

private void cmbColors_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)
{
	Color selectedColor = (Color)(cmbColors2.SelectedItem as PropertyInfo).GetValue(null, null);
	this.Background = new SolidColorBrush(selectedColor);
}
  • ComboBox示例运行截图

ComboBox运行截图

4. DataGrid

这个控件蛮常用的,一般用于展示数据,当然也可以编辑数据。DataGrid默认是可编辑的,允许最终用户更改底层数据源的值。AutoGenerateColumns属性用来设置是否根据数据源自动生成列,通过AutoGenerateColumns属性关闭自动生成列的功能,你可以完全控制哪些列可以显示出来。RowDetailsTemplate为行详细信息指定模板,其中RowDetailsVisibilityMode属性,可以设置可见性。 它默认为VisibleWhenSelected,可以更改为Visible或Collapsed。

<StackPanel Margin="10">
	<!--简单用法-->
	<DataGrid Name="dgSimple"></DataGrid>
	
	<!--自定义列-->
	<DataGrid Name="dgUsers" AutoGenerateColumns="False">
		<DataGrid.Columns>
			<DataGridTextColumn Header="Name" Binding="{Binding Name}" />
			<DataGridTemplateColumn Header="Birthday">
				<DataGridTemplateColumn.CellTemplate>
					<DataTemplate>
						<DatePicker SelectedDate="{Binding Birthday}" BorderThickness="0" />
					</DataTemplate>
				</DataGridTemplateColumn.CellTemplate>
			</DataGridTemplateColumn>
		</DataGrid.Columns>
	</DataGrid>
	
	<!--RowDetailsTemplate行详细信息模板-->
	<DataGrid Name="dgUsers2" AutoGenerateColumns="False" 
			  RowDetailsVisibilityMode="VisibleWhenSelected">
		<DataGrid.Columns>
			<DataGridTextColumn Header="Name" Binding="{Binding Name}" />
			<DataGridTextColumn Header="Birthday" Binding="{Binding Birthday}" />
		</DataGrid.Columns>
		<DataGrid.RowDetailsTemplate >
			<DataTemplate>
				<TextBlock Text="{Binding Details}" Margin="10" />
			</DataTemplate>
		</DataGrid.RowDetailsTemplate>
	</DataGrid>
	
	<!--自定义行-->
	<DataGrid Name="dgUsers3" AutoGenerateColumns="False">
		<DataGrid.Columns>
			<DataGridTextColumn Header="Name" Binding="{Binding Name}" />
			<DataGridTextColumn Header="Birthday" Binding="{Binding Birthday}" />
		</DataGrid.Columns>
		<DataGrid.RowDetailsTemplate>
			<DataTemplate>
				<DockPanel Background="GhostWhite">
					<Image DockPanel.Dock="Left" Source="{Binding ImageUrl}" Height="64" Margin="10" />
					<Grid Margin="0,10">
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="Auto" />
							<ColumnDefinition Width="*" />
						</Grid.ColumnDefinitions>
						<Grid.RowDefinitions>
							<RowDefinition Height="Auto" />
							<RowDefinition Height="Auto" />
							<RowDefinition Height="Auto" />
						</Grid.RowDefinitions>

						<TextBlock Text="ID: " FontWeight="Bold" />
						<TextBlock Text="{Binding Id}" Grid.Column="1" />
						<TextBlock Text="Name: " FontWeight="Bold" Grid.Row="1" />
						<TextBlock Text="{Binding Name}" Grid.Column="1" Grid.Row="1" />
						<TextBlock Text="Birthday: " FontWeight="Bold" Grid.Row="2" />
						<TextBlock Text="{Binding Birthday, StringFormat=d}" Grid.Column="1" Grid.Row="2" />
					</Grid>
				</DockPanel>
			</DataTemplate>
		</DataGrid.RowDetailsTemplate>
	</DataGrid>
</StackPanel>
public MainWindow()
{
	InitializeComponent();
	List<User> users = new List<User>();
	users.Add(new User() { Id = 1, Name = "John Doe", Birthday = new DateTime(1971, 7, 23) , ImageUrl = "https://zhousonglin.cn/images/me.png" });
	users.Add(new User() { Id = 2, Name = "Jane Doe", Birthday = new DateTime(1974, 1, 17) });
	users.Add(new User() { Id = 3, Name = "Sammy Doe", Birthday = new DateTime(1991, 9, 2) });
	dgSimple.ItemsSource = users;
	dgUsers.ItemsSource = users;
	dgUsers2.ItemsSource = users;
	dgUsers3.ItemsSource = users;
}

public class User
{
	public int Id { get; set; }
	public string Name { get; set; }
	public DateTime Birthday { get; set; }
	public string Details
	{
		get
		{
			return String.Format("{0} was born on {1} and this is a long description of the person.", this.Name, this.Birthday.ToLongDateString());
		}
	}
	public string ImageUrl { get; set; }
}
  • 运行效果截图

DataGrid运行效果截图

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值