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; }
    }
}

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

相关推荐
踏过山河,踏过海6 小时前
【用ui文件做个简单工具的开发,为什么修改完ui后,程序重新编译运行后,GUI界面还是不变呢?】
qt·ui
Traced back6 小时前
WinForms 线程安全三剑客详解
安全·c#·winform
喵叔哟6 小时前
05-LINQ查询语言入门
c#·solr·linq
John_ToDebug9 小时前
WebContent 与 WebView:深入解析浏览器渲染架构的双层设计
c++·chrome·ui
我要打打代码10 小时前
WPF控件(2)
wpf
钰fly11 小时前
工具块与vs的联合编程(豆包总结生成)
c#
c#上位机11 小时前
wpf之行为
c#·wpf
星夜泊客12 小时前
C# 基础:为什么类可以在静态方法中创建自己的实例?
开发语言·经验分享·笔记·unity·c#·游戏引擎
小小测试开发12 小时前
UI自动化测试:CSS定位方式超详细解析(附实战示例)
css·ui·tensorflow
kylezhao201913 小时前
深入浅出地理解 C# WPF 中的属性
hadoop·c#·wpf