DataGrid中使用PopupBox

1.效果图#

2.实现#

• TestView.xaml

 <DataGrid
        ItemsSource="{Binding ItemsSource}"
        CanUserAddRows="False"
        AutoGenerateColumns="False">
        <DataGrid.Columns>

            <DataGridTextColumn
                Binding="{Binding CustomerName}"
                Header="客户名称"
                ElementStyle="{StaticResource MaterialDesignDataGridTextColumnStyle}"
                EditingElementStyle="{StaticResource MaterialDesignDataGridTextColumnEditingStyle}" />

            <DataGridTextColumn
                Binding="{Binding City}"
                Header="城市"
                ElementStyle="{StaticResource MaterialDesignDataGridTextColumnStyle}"
                EditingElementStyle="{StaticResource MaterialDesignDataGridTextColumnEditingStyle}" />-->

            <DataGridTextColumn
                Binding="{Binding Contact}"
                Header="联系人"
                ElementStyle="{StaticResource MaterialDesignDataGridTextColumnStyle}"
                EditingElementStyle="{StaticResource MaterialDesignDataGridTextColumnEditingStyle}" />

            <DataGridTextColumn
                Binding="{Binding PhoneNum}"
                Header="联系电话"
                ElementStyle="{StaticResource MaterialDesignDataGridTextColumnStyle}"
                EditingElementStyle="{StaticResource MaterialDesignDataGridTextColumnEditingStyle}" />

            <DataGridTemplateColumn Width="80" Header="操作">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <materialDesign:PopupBox DockPanel.Dock="Right">
                            <materialDesign:PopupBox.ToggleContent>
                                <StackPanel Orientation="Horizontal">
                                    <materialDesign:PackIcon Foreground="{DynamicResource PrimaryHueLightBrush}" Kind="Cog" />
                                    <TextBlock Foreground="{DynamicResource PrimaryHueLightBrush}" Text="操作" />
                                </StackPanel>
                            </materialDesign:PopupBox.ToggleContent>
                            <StackPanel>
                                <Button Content="编辑" />
                                <Button Content="删除" />
                            </StackPanel>
                        </materialDesign:PopupBox>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>

        </DataGrid.Columns>
    </DataGrid>

• TestViewModel.cs

public class TestViewModel : BindableBase
    {
        public TestViewModel()
        {
            ItemsSource = CreateData();
        }

        public ObservableCollection<CustomerDto> ItemsSource { get; private set; }

        public static ObservableCollection<CustomerDto> CreateData()
        {
            return new ObservableCollection<CustomerDto>
            {
                new CustomerDto(){ CustomerName="烟台一号公司",Contact="刘",PhoneNum="185"},
                new CustomerDto(){ CustomerName="烟台二号公司",Contact="和",PhoneNum="185"},
                new CustomerDto(){ CustomerName="烟台三号公司",Contact="刘",PhoneNum="185"}
            };
        }
    }

• CustomerDto.cs

public class CustomerDto : BindableBase
    {
        private string customerName;
        /// <summary>
        /// 客户名称
        /// </summary>
        public string CustomerName
        {
            get { return customerName; }
            set { customerName = value; RaisePropertyChanged(); }
        }


        private string contact;
        /// <summary>
        /// 联系人
        /// </summary>
        public string Contact
        {
            get { return contact; }
            set { contact = value; RaisePropertyChanged(); }
        }


        private string phoneNum;
        /// <summary>
        /// 联系电话
        /// </summary>
        public string PhoneNum
        {
            get { return phoneNum; }
            set { phoneNum = value; RaisePropertyChanged(); }
        }
    }