wpf + MaterialDesign + Prism8 + DataGrid 实现表格内数据编辑，下拉
十年河东，十年河西，莫欺少年穷
学无止境，精益求精
效果如下：
xaml如下：
<UserControl x:Class="WpfApp.UserControls.MemoView" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:WpfApp.UserControls" xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes" xmlns:Model="clr-namespace:WpfApp.UserControlModels" mc:Ignorable="d" d:DesignHeight="450" d:DesignWidth="800"> <Grid> <Grid.RowDefinitions > <RowDefinition Height="auto"/> <RowDefinition/> <RowDefinition Height="45"/> </Grid.RowDefinitions> <!--<Border Background="Red" Height="40" Grid.Row="0"/>--> <DataGrid Grid.Row="1" AutoGenerateColumns="False" x:Name="MyDataGrid" CanUserAddRows="False" HeadersVisibility="All" ItemsSource="{Binding Books}"> <DataGrid.Columns> <DataGridCheckBoxColumn Binding="{Binding isSelected}" Header="选择"> <DataGridCheckBoxColumn.HeaderStyle> <Style TargetType="{x:Type DataGridColumnHeader}" BasedOn="{StaticResource MaterialDesignDataGridColumnHeader}"> <Setter Property="HorizontalContentAlignment" Value="Center" /> </Style> </DataGridCheckBoxColumn.HeaderStyle> </DataGridCheckBoxColumn> <DataGridTextColumn Binding="{Binding bookNo}" Header="书号" Width="1*"/> <materialDesign:DataGridTextColumn Width="120" Binding="{Binding bookName}" EditingElementStyle="{StaticResource MaterialDesignDataGridTextColumnPopupEditingStyle}" Header="书名"> <DataGridTextColumn.HeaderStyle> <Style TargetType="{x:Type DataGridColumnHeader}" BasedOn="{StaticResource MaterialDesignDataGridColumnHeader}"> <Setter Property="ContentTemplate"> <Setter.Value> <DataTemplate> <TextBlock Text="{Binding}" TextAlignment="Right" TextWrapping="Wrap" /> </DataTemplate> </Setter.Value> </Setter> <Setter Property="HorizontalContentAlignment" Value="Right" /> </Style> </DataGridTextColumn.HeaderStyle> <DataGridTextColumn.ElementStyle> <Style TargetType="{x:Type TextBlock}" BasedOn="{StaticResource MaterialDesignDataGridTextColumnStyle}"> <Setter Property="HorizontalAlignment" Value="Right" /> </Style> </DataGridTextColumn.ElementStyle> </materialDesign:DataGridTextColumn> <DataGridTextColumn Binding="{Binding bookAutor}" Header="作者" Width="1*" /> <DataGridTextColumn Binding="{Binding bookCate}" Header="分类" Width="1*" /> <DataGridTextColumn Binding="{Binding bookSite}" Header="出版社" Width="1*" /> <materialDesign:DataGridComboBoxColumn Width="1*" Header="Food with long header" IsEditable="True" ItemsSourceBinding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}, Path=DataContext.BookSites}" SelectedValueBinding="{Binding bookSite}"> </materialDesign:DataGridComboBoxColumn> <DataGridTextColumn Binding="{Binding Path=bookDate,StringFormat='yyyy年MM月dd日'}" Header="出版时间" Width="1*" /> <DataGridTemplateColumn x:Name="UserAction" Header="操作" Width="180"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <Button Content="删除" BorderBrush="AliceBlue" Command="{Binding DataContext.DeleteCmd, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=DataGrid}}" CommandParameter="{Binding }" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"> </Button> <Button Margin="12,0,0,0" Content="编辑" BorderBrush="AliceBlue" Command="{Binding DataContext.EditCmd, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=DataGrid}}" CommandParameter="{Binding }" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"> </Button> </StackPanel> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> </DataGrid.Columns> </DataGrid> <Button Grid.Row="2" Command="{Binding BtnCmd}" CommandParameter="{Binding ElementName=MyDataGrid,Path=SelectedItem}" Content="点我" Cursor="Hand"/> </Grid> </UserControl>
CS 代码如下：
using Prism.Commands; using Prism.Mvvm; using System; using System.Collections.Generic; using System.Collections.ObjectModel; using System.Text; using System.Windows; using WpfApp.UserControlModels; namespace WpfApp.ViewModels { public class MemoViewModel: BindableBase { /// <summary> /// 分页后的数据 /// </summary> private ObservableCollection<BookDto> books; public ObservableCollection<BookDto> Books { get { return books; } set { books = value; RaisePropertyChanged(); } } private ObservableCollection<string> bookSites; public ObservableCollection<string> BookSites { get { return bookSites; } set { bookSites = value; RaisePropertyChanged(); } } public DelegateCommand<BookDto> DeleteCmd { get; private set; } public DelegateCommand<BookDto> EditCmd { get; private set; } public DelegateCommand<BookDto> BtnCmd { get; private set; } public MemoViewModel() { CreateBook(); BookSites = new ObservableCollection<string>() { "人民出版社", "江苏传媒出版社", "清华大学出版社" }; DeleteCmd = new DelegateCommand<BookDto>(Delete); EditCmd = new DelegateCommand<BookDto>(Edit); BtnCmd = new DelegateCommand<BookDto>(BtnClick); } private void BtnClick(BookDto obj) { MessageBox.Show(obj.bookName); } private void Edit(BookDto obj) { MessageBox.Show(obj.bookName); } private void Delete(BookDto obj) { MessageBox.Show(obj.bookName); } public void CreateBook() { Books = new ObservableCollection<BookDto> (); for (int i = 0; i < 25; i++) { BookDto dto = new BookDto() { bookAutor = "作者" + i, bookCate = "文学", bookDate = DateTime.Now.AddMonths(-i), bookName = "书名" + i, bookNo = "0813092" + i, bookPrice = 10, bookSite = "人民出版社" }; Books.Add(dto); } } } }
说明如下：
1.绑定下拉框
<materialDesign:DataGridComboBoxColumn Width="1*" Header="Food with long header" IsEditable="True" ItemsSourceBinding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}, Path=DataContext.BookSites}" SelectedValueBinding="{Binding bookSite}"> </materialDesign:DataGridComboBoxColumn>
ItemsSourceBinding 使用了相对资源查找器，AncestorType指： 获取或设置要查找的上级节点的类型。，path 为上下文的BookSites，选中的值为属性 bookSite
2、编辑 和 删除 按钮
<DataGridTemplateColumn x:Name="UserAction" Header="操作" Width="180"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <Button Content="删除" BorderBrush="AliceBlue" Command="{Binding DataContext.DeleteCmd, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=DataGrid}}" CommandParameter="{Binding }" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"> </Button> <Button Margin="12,0,0,0" Content="编辑" BorderBrush="AliceBlue" Command="{Binding DataContext.EditCmd, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=DataGrid}}" CommandParameter="{Binding }" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"> </Button> </StackPanel> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn>
3、设定日期格式
<DataGridTextColumn Binding="{Binding Path=bookDate,StringFormat='yyyy年MM月dd日'}" Header="出版时间" Width="1*" />
4、点我按钮，绑定dataGrid的选择项
<Button Grid.Row="2" Command="{Binding BtnCmd}" CommandParameter="{Binding ElementName=MyDataGrid,Path=SelectedItem}" Content="点我" Cursor="Hand"/>
