69.弹窗显示复杂的数据框图 C#例子 WPF例子

这是一个复杂的功能实现,其中日志管理器的一个实例包含需要被绑定的数据源。由于主窗口被复杂的内容填满,因此需要设计一个弹窗来专门显示数据框图。以下是实现步骤:

设计主页面

  1. 在主页面上添加一个按钮和一个数据框图(用于对比显示数据)。
  2. 按钮绑定到一个命令,数据框图绑定到日志管理器的数据源。
XML 复制代码
<Window x:Class="弹窗数据框图.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:弹窗数据框图"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid Margin="20">
        <Grid.RowDefinitions>
            <RowDefinition Height="3*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <DataGrid Grid.Row="0" ItemsSource="{Binding LogExcel.DataGridSource}"/>
        <Button Grid.Row="1" Content="弹窗" Command="{Binding Command}"/>

    </Grid>
</Window>

设计子页面

  1. 子页面只包含一个数据框图,用于显示与主页面相同的数据源内容。
  2. 数据框图的数据源也绑定到日志管理器的数据源。
XML 复制代码
<Window x:Class="弹窗数据框图.ChildView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:弹窗数据框图"
        mc:Ignorable="d"
        Title="ChildView" Height="450" Width="800">
    <Grid>
        <DataGrid ItemsSource="{Binding LogExcel.DataGridSource}"/>
    </Grid>
</Window>

设置DataContext

  1. 在主窗口和子窗口中,都需要设置DataContext为同一个ViewModel实例。
  2. 为了实现这一点,可以在主窗口中创建一个静态的ViewModel实例,并在子窗口中引用它。
cs 复制代码
    public partial class MainWindow : Window
    {
        public static MainWindowViewModel MainWindowViewModelDatacontext;
        public MainWindow()
        {
            InitializeComponent();
            MainWindowViewModelDatacontext = new MainWindowViewModel();
            DataContext = MainWindowViewModelDatacontext;
        }

    }
cs 复制代码
    public partial class ChildView : Window
    {
        public ChildView()
        {
            InitializeComponent();
            DataContext = MainWindow.MainWindowViewModelDatacontext;
        }
    }

编辑ViewModel

  1. 准备好数据模型类Index
  2. 创建日志管理器类Logmanager,包含一个ObservableCollection<Index>类型的集合属性,用于DataGrid的数据绑定。
  3. MainWindowViewModel中,创建日志管理器的实例和按钮命令。
  4. 在ViewModel的构造函数中初始化日志管理器,并在需要时填充数据。
  5. 实现命令的执行逻辑,当命令被触发时,显示子窗口。
cs 复制代码
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;

namespace 弹窗数据框图
{
    public class MainWindowViewModel:BindableBase
    {
        private ICommand _command;
        public ICommand Command => _command ??= new DelegateCommand(ExCommand);

        private Logmanager _logExcel;
        public Logmanager LogExcel
        {
            get { return _logExcel; }
            set { SetProperty(ref _logExcel, value); }
        }

        public MainWindowViewModel()
        {
            LogExcel=new Logmanager();
            Main();
        }
        public void Main()
        {
            LogExcel.DataGridSource.Clear();
            LogExcel.DataGridSource.Add(new Index { Name = "小红", Age = 14, Description = "初中生" });
            LogExcel.DataGridSource.Add(new Index { Name = "小明", Age = 16, Description = "高中男生" });
            LogExcel.DataGridSource.Add(new Index { Name = "小美", Age = 16, Description = "高中女生" });
        }

        public void ExCommand()
        {
            ChildView childView = new ChildView();
            childView.Show();
        }


    }


    public class Logmanager:BindableBase
    {
        private ObservableCollection<Index> _dataGridSource;
        public ObservableCollection<Index> DataGridSource
        {
            get { return _dataGridSource; }
            set { SetProperty(ref _dataGridSource, value); }
        }

        public Logmanager()
        {
            DataGridSource=new ObservableCollection<Index>();
        }
    }

    public class Index
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public string Description { get; set; }
    }
}

运行结果如下:弹出窗口显示了和主页面相同内容的数据框图。

相关推荐
时光追逐者1 小时前
C#/.NET/.NET Core技术前沿周刊 | 第 53 期(2025年9.1-9.7)
c#·.net·.netcore
冷冷的菜哥1 小时前
ASP.NET Core使用MailKit发送邮件
后端·c#·asp.net·发送邮件·mailkit
weixin_447103581 小时前
C#之LINQ
c#·linq
ysn111112 小时前
反编译分析C#闭包
c#
one9964 小时前
WPF应用程序中的异常处理
c#·.net·wpf
almighty275 小时前
C# ObjectListView实现树状文件夹浏览
c#·树状图·objectlistview·c#树状图·文件显示
ccut 第一混11 小时前
c# 调用basler 相机
c#·halcon·basler
TomCode先生11 小时前
c#动态树形表达式详解
开发语言·c#
开开心心loky15 小时前
[iOS] push 和 present Controller 的区别
ui·ios·objective-c·cocoa
眠りたいです15 小时前
基于脚手架微服务的视频点播系统-播放控制部分
c++·qt·ui·微服务·云原生·架构·播放器