69.弹窗显示复杂的数据框图 C#例子 WPF例子_wpf c# 弹出窗口交互数据-优快云博客

本文链接：https://blog.youkuaiyun.com/S13461120713/article/details/145474410

主窗口因承载了大量复杂内容，界面显得较为拥挤。因此，为了更清晰地展示数据框图，我们设计了一个专门的弹窗来进行呈现。以下是具体的实现步骤：

设计主页面：

在主页面上添加一个按钮和一个数据框图（用于对比显示数据）。
按钮绑定到一个命令，数据框图绑定到日志管理器的数据源。

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

设计子页面：

子页面只包含一个数据框图，用于显示与主页面相同的数据源内容。
数据框图的数据源也绑定到日志管理器的数据源。

<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：

在主窗口和子窗口中，都需要设置DataContext为同一个ViewModel实例。
为了实现这一点，可以在主窗口中创建一个静态的ViewModel实例，并在子窗口中引用它。

    public partial class MainWindow : Window
    {
        public static MainWindowViewModel MainWindowViewModelDatacontext;
        public MainWindow()
        {
            InitializeComponent();
            MainWindowViewModelDatacontext = new MainWindowViewModel();
            DataContext = MainWindowViewModelDatacontext;
        }

    }

    public partial class ChildView : Window
    {
        public ChildView()
        {
            InitializeComponent();
            DataContext = MainWindow.MainWindowViewModelDatacontext;
        }
    }

编辑ViewModel：

准备好数据模型类Index。
创建日志管理器类Logmanager，包含一个ObservableCollection<Index>类型的集合属性，用于DataGrid的数据绑定。
在MainWindowViewModel中，创建日志管理器的实例和按钮命令。
在ViewModel的构造函数中初始化日志管理器，并在需要时填充数据。
实现命令的执行逻辑，当命令被触发时，显示子窗口。

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

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