如何在WPF多选项卡UI中使用模板？

debugcn 发表于 Dev

S.新

我是WPF的新手，但我会尽可能地努力学习。请帮助我解决我目前正在努力解决的问题。我正在构建一个多选项卡UI，其中每个选项卡都应该具有完全相同的控件布局。同时在选项卡中还存在重复的控件块（标签组）。控件的内容将由来自外部源的数据填充-显然，我将使用数据对象的实例将其绑定到tabitem的DataContext属性：每个选项卡项一个实例。我的问题是，我不知道如何使用模板来优化代码。我认为我应该使用2种不同的模板，一个在标签内，另一个用于整个标签，对吗？但是如何绑定数据呢？在xaml标记下面，我将对每个选项卡使用它并在代码后加上代码，因此您可以理解。

XAML：

<Window x:Class="WpfPromholComplementary_1.Window2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:loc = "clr-namespace:WpfPromholComplementary_1"
    xmlns:wfi="clr-namespace:System.Windows.Forms.Integration;assembly=WindowsFormsIntegration"
    xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
    xmlns:dvc="clr-namespace:System.Windows.Forms.DataVisualization.Charting;assembly=System.Windows.Forms.DataVisualization"
    Title="Window2" Height="800" Width="1000">  
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="30" />
        <RowDefinition Height="210" />
        <RowDefinition Height="30" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Border Grid.Row="1" Grid.Column="0" BorderThickness="1" BorderBrush="Blue" Margin="2" CornerRadius="8,8,8,8">
        <Grid Background="LightCyan">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="1*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="10" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="10" />
            </Grid.RowDefinitions>
            <Label Content="Module 1" Grid.Row="1" Grid.ColumnSpan="2" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
            <Label Content="123.4" Grid.Row="2" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
            <Label Content="123.4" Grid.Row="3" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
            <Label Content="123.4" Grid.Row="4" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
            <Label Content="123.4" Grid.Row="5" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
            <Label Content="Channel 1:" Grid.Row="2" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <Label Content="Channel 2:" Grid.Row="3" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <Label Content="Channel 3:" Grid.Row="4" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <Label Content="Channel 4:" Grid.Row="5" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
    </Border>
    <Border Grid.Row="1" Grid.Column="1" BorderThickness="1" BorderBrush="Blue" >
        <Grid Background="LightCyan">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="1*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="10" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="10" />
            </Grid.RowDefinitions>
            <Label Content="Module 2" Grid.Row="1" Grid.ColumnSpan="2" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
            <Label Content="123.4" Grid.Row="2" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
            <Label Content="123.4" Grid.Row="3" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
            <Label Content="123.4" Grid.Row="4" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
            <Label Content="123.4" Grid.Row="5" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
            <Label Content="Channel 1:" Grid.Row="2" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <Label Content="Channel 2:" Grid.Row="3" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <Label Content="Channel 3:" Grid.Row="4" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <Label Content="Channel 4:" Grid.Row="5" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
    </Border>
    <Border Grid.Row="1" Grid.Column="2" BorderThickness="1" BorderBrush="Blue">
        <Grid Background="LightCyan">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="1*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="10" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="10" />
            </Grid.RowDefinitions>
            <Label Content="Module 3" Grid.Row="1" Grid.ColumnSpan="2" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
            <Label Content="123.4" Grid.Row="2" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
            <Label Content="123.4" Grid.Row="3" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
            <Label Content="123.4" Grid.Row="4" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
            <Label Content="123.4" Grid.Row="5" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
            <Label Content="Channel 1:" Grid.Row="2" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <Label Content="Channel 2:" Grid.Row="3" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <Label Content="Channel 3:" Grid.Row="4" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <Label Content="Channel 4:" Grid.Row="5" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
    </Border>
    <Border Grid.Row="1" Grid.Column="3" BorderThickness="1" BorderBrush="Blue">
        <Grid Background="LightCyan">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="1*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="10" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="10" />
            </Grid.RowDefinitions>
            <Label Content="Module 4" Grid.Row="1" Grid.ColumnSpan="2" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
            <Label Content="123.4" Grid.Row="2" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
            <Label Content="123.4" Grid.Row="3" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
            <Label Content="123.4" Grid.Row="4" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
            <Label Content="123.4" Grid.Row="5" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
            <Label Content="Channel 1:" Grid.Row="2" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <Label Content="Channel 2:" Grid.Row="3" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <Label Content="Channel 3:" Grid.Row="4" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <Label Content="Channel 4:" Grid.Row="5" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
    </Border>
    <Border Grid.Row="1" Grid.Column="4" BorderThickness="1" BorderBrush="Blue">
        <Grid Background="LightCyan">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="1*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="10" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="10" />
            </Grid.RowDefinitions>
            <Label Content="Module 5" Grid.Row="1" Grid.ColumnSpan="2" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
            <Label Content="123.4" Grid.Row="2" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
            <Label Content="123.4" Grid.Row="3" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
            <Label Content="123.4" Grid.Row="4" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
            <Label Content="123.4" Grid.Row="5" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
            <Label Content="Channel 1:" Grid.Row="2" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <Label Content="Channel 2:" Grid.Row="3" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <Label Content="Channel 3:" Grid.Row="4" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <Label Content="Channel 4:" Grid.Row="5" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
    </Border>
    <Border Grid.Row="1" Grid.Column="5" BorderThickness="1" BorderBrush="Blue">
        <Grid Background="LightCyan">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="1*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="10" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="10" />
            </Grid.RowDefinitions>
            <Label Content="Module 6" Grid.Row="1" Grid.ColumnSpan="2" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
            <Label Content="123.4" Grid.Row="2" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
            <Label Content="123.4" Grid.Row="3" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
            <Label Content="123.4" Grid.Row="4" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
            <Label Content="123.4" Grid.Row="5" Grid.Column="1" Height="Auto" Width="Auto" FontSize="20" HorizontalAlignment="Center"/>
            <Label Content="Channel 1:" Grid.Row="2" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <Label Content="Channel 2:" Grid.Row="3" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <Label Content="Channel 3:" Grid.Row="4" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <Label Content="Channel 4:" Grid.Row="5" Grid.Column="0" Height="Auto" Width="Auto" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
    </Border>
    <StackPanel Margin="5,5,5,5"  Grid.Row="3" Grid.ColumnSpan="4">
        <WindowsFormsHost>
            <dvc:Chart x:Name="chart" />
        </WindowsFormsHost>
    </StackPanel>
    <StackPanel Grid.Row="0" Grid.ColumnSpan="6" Orientation="Horizontal">
        <Label Content="IP-address:" Height="33" Width="Auto" FontSize="20" Padding="5,0,5,5"/>
        <Label Content="192.168.1.10" Height="33" Width="Auto" FontSize="20" Padding="5,0,5,5"/>
    </StackPanel>
    <DataGrid x:Name="dgDataGrid" Grid.Row="4" Grid.Column="4" Grid.ColumnSpan="2" IsSynchronizedWithCurrentItem="False"/>
</Grid>

后台代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Windows.Forms.DataVisualization.Charting;
using System.Drawing;

namespace WpfPromholComplementary_1
{
/// <summary>
/// Interaction logic for Window2.xaml
/// </summary>
public partial class Window2 : Window
{
    public Window2()
    {
        InitializeComponent();

        PLC plc1 = new PLC { ID = 1, Module_Number = "1", Channel_1 =  "1234", Channel_2 = "5678", Channel_3 = "9012", Channel_4 = "3456" };
        this.DataContext = plc1;

    }
}
}

Tatranskymedved

我必须决定分两个部分来回答。一部分将明显地处于“代码隐藏”方法中，而另一部分将处于MVVM（模型-视图-视图模型）中。

格式化窗口上侧的最佳方法是使用相同的组件，您将在其中定义源而不是模板。模板在您有一个控件且您想更改其外观（控件布局）的地方很有用。

首先，您应该创建自己的UserControl示例（在示例中，我将其称为MyModuleFrame）：

XML：

<UserControl x:Class="WpfPromholComplementary_1.MyModuleFrame"
         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:WpfPromholComplementary_1"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300"
         x:Name="mUserControl">
<Border BorderThickness="1" BorderBrush="Blue" CornerRadius="8,8,8,8">
    <Grid Background="LightCyan">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="10" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="10" />
        </Grid.RowDefinitions>

        <Label Content="{Binding ItemSource.Number, ElementName=mUserControl}" Grid.Row="1" Grid.ColumnSpan="2" FontSize="20" HorizontalAlignment="Center"/>
        <Label Content="{Binding ItemSource.Ch1, ElementName=mUserControl}" Grid.Row="2" Grid.Column="1" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <Label Content="{Binding ItemSource.Ch2, ElementName=mUserControl}" Grid.Row="3" Grid.Column="1" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <Label Content="{Binding ItemSource.Ch3, ElementName=mUserControl}" Grid.Row="4" Grid.Column="1" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <Label Content="{Binding ItemSource.Ch4, ElementName=mUserControl}" Grid.Row="5" Grid.Column="1" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <Label Content="Channel 1:" Grid.Row="2" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <Label Content="Channel 2:" Grid.Row="3" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <Label Content="Channel 3:" Grid.Row="4" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <Label Content="Channel 4:" Grid.Row="5" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center"/>

    </Grid>
</Border>
</UserControl>

C＃：

namespace WpfPromholComplementary_1
{
/// <summary>
/// Interaction logic for MyModuleFrame.xaml
/// </summary>
public partial class MyModuleFrame : UserControl
{
    public MyModuleFrame()
    {
        InitializeComponent();
    }

    public Module ItemSource
    {
        get { return (Module)GetValue(ItemSourceProperty); }
        set { SetValue(ItemSourceProperty, value); }
    }
    // Using a DependencyProperty as the backing store for ItemsSource.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty ItemSourceProperty =
        DependencyProperty.Register("ItemSource", typeof(Module), typeof(MyModuleFrame), new PropertyMetadata(default(Module)));
    }
}

将所有UserControl的属性定义为DependencyProperty确实很重要。为什么？因为WPF使用它们来执行与视图处理相关的所有操作。在初始化时，它们在WPF框架中注册，一旦有人想要访问它们/他们将调用WPF（返回值），而不是直接方法。

定义控件后，即可在窗口上使用它。我从开始（我没有参考）和结束代码中删除了一些代码，所以您有了一个主意：

<Window x:Class="WpfPromholComplementary_1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:loc = "clr-namespace:WpfPromholComplementary_1"
xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
Title="Window2" Height="800" Width="1000">
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="30" />
        <RowDefinition Height="210" />
        <RowDefinition Height="30" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <loc:MyModuleFrame Grid.Row="1" Grid.Column="0" ItemSource="{Binding Module1}"/>
    <loc:MyModuleFrame Grid.Row="1" Grid.Column="1" ItemSource="{Binding Module2}"/>
    <loc:MyModuleFrame Grid.Row="1" Grid.Column="2" ItemSource="{Binding Module3}"/>
    <loc:MyModuleFrame Grid.Row="1" Grid.Column="3" ItemSource="{Binding Module4}"/>
    <!-- other modules & stuff-->
  </Grid>
</Window>

一旦达到上述要点，就需要获取动态数据，可以通过以下三种方法获得动态数据：

通过从后台代码插入（Win-forms方法，例如：TextBox1.ModuleNumber =“ 3”-不太抽象，在大型应用程序中不使用）
通过绑定到Code-Behind（在Code-Behind中定义属性，将Window的dataContext设置为this）
通过绑定到视图模型（遵循MVVM模式）-这里有一些教程

根据选择的选项，您必须更新上面的代码。

另外，我们还应该为我们的App-Module类定义Model。下面的代码不支持视图更新。为了获得支持，您必须实现INotifyPropertyChanged接口（更多信息在下面）：

//Simplified
public class Module
{
    public string Number { get; set; }
    public double Ch1 { get; set; }
    public double Ch2 { get; set; }
    public double Ch3 { get; set; }
    public double Ch4 { get; set; }
}

ViewModel：

public class MainViewModel
{
    public Module Module1 { get; set; } = new Module()
    {
        Number = "1",
        Ch1 = 123.4,
        Ch2 = 123.4,
        Ch3 = 123.4,
        Ch4 = 123.4
    };

    /* other modules... */
}

MVVM方法：

App.config：

<Application x:Class="WpfPromholComplementary_1.App"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:local="clr-namespace:WpfPromholComplementary_1"
         StartupUri="MainWindow.xaml">
<Application.Resources>
    <local:MainViewModel x:Key="MainViewModel"/>
</Application.Resources>
</Application>

代码隐藏方法：

View.cs：

public partial class Window
{

    public Window()
    {
        InitializeComponent();
        this.DataContext = this;
    }

    public Module Module1 { get; set; } = new Module(); //in this case You do not need ViewModel
}

此时，您应该有一个可以运行的应用程序，在这里您无法进行任何更改。

现在，有两种方法可以在View中更新值，一种是遵循MVVM的正确方法，另一种是在代码隐藏中。我将只介绍这两个内容以供参考：

首先，您的模块需要继承自INotifyPropertyChange（例如，仅包含2个属性）：

using System.ComponentModel;
public class Module : INotifyPropertyChanged
{
    private string _number;
    public string Number
    {
        get { return this._number; }
        set
        {
            if (_number == value) return;
            _number = value;
            OnPropertyChanged(nameof(Number));
        }
    }

    private double _ch1;
    public double Ch1
    {
        get { return this._ch1; }
        set
        {
            if (_ch1 == value) return;
            _ch1 = value;
            OnPropertyChanged(nameof(Ch1));
        }
    }


    //other channels fits there

    public event PropertyChangedEventHandler PropertyChanged;

    private void OnPropertyChanged(string aNameOfProperty)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(aNameOfProperty));
    }
}

后台代码：

现在，假设我们要处理按钮单击（XML）的事件：

<Button Click="MyButton_Click"/>

在后台代码中，我们可以执行（C＃）：

private void MyButton_Click(object sender, MouseEventArgs e)
{
    //Your ViewModel is stored in DataContext, You can just cast to approach properties
    var VM = (this.DataContext as MainViewModel);
    VM.Module1.Number = "Module Number Xyz";
}

MVVM： MVVM方法要困难一些，因为您需要在某些命令类上实现ICommand接口，请参见Relay命令以供参考。

一旦掌握了这一点，XML：

<Button Command="{Binding DoSomeWorkCmd}"/>

在您的ViewModel中：

private ICommand _DoSomeWorkCmd;
public ICommand DoSomeWorkCmd
{
    get
    {
        if (_DoSomeWorkCmd != null) return _DoSomeWorkCmd;

            _DoSomeWorkCmd = new RelayCommand((object aParam)=> { return true; }, (object aParam) =>
            {
                this.Module1.Number = "MyNewNumber XyZ";
            });

            return this._DoSomeWorkCmd;
    }
}

可以在我的GIT上下载整个解决方案的MVVM示例： https : //github.com/Tatranskymedved/WpfPromholComplementary_1

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-07-7

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

如何在WPF多选项卡UI中使用模板？

如何在WPF多选项卡UI中使用模板？

如何在WPF中使用鼠标右键单击事件选择选项卡

如何在不同的jquery ui选项卡中显示的gridviews中使用jquery Datatable插件？

如何在reactJS中管理多选项卡注销？

如何在Flutter中使用可滑动选项卡

如何在Linux“屏幕”程序中使用选项卡？

我如何在ST2中使用Emmet在Handlebars模板（emberjs）中扩展HTML选项卡？

我如何在ST2中使用Emmet在Handlebars模板（emberjs）中扩展HTML选项卡？

如何在jQuery中使用“ ctrl + click”代替重定向当前选项卡来打开新选项卡？

在语义UI中使用选项卡控件

如何在WPF TabControl中取消选项卡更改

如何在SublimeText中使Mouswheel开关选项卡变慢

如何在Ionic中使用选项卡设置侧面菜单？

如何在ruby中使用Watir打开选项卡

如何在另一个会话中使用变量（Powershell ISE选项卡）？

如何在MATLAB中的列表框中使用选项卡正确显示文本

如何在Android中使用ViewPager动态创建选项卡？

如何在列表中使用选项卡动态添加元素。角js

如何在React Native中使用选项卡制作视差滚动视图？

如何在SwiftUI的所有选项卡中使用相同的数据？（ObservableObject或EnvironmentObject）

如何在MATLAB中的列表框中使用选项卡正确显示文本

如何在两个不同的选项卡中使用 jquery 更改内容

如何在打字稿中使用angular4隐藏导航选项卡

如何在chrome的新选项卡中使用本地存储保存变量

如何在 react-native 的模态中使用选项卡

在ui-router应用中使用选项卡，每个选项卡都没有状态

在材质 ui 选项卡中使用效果来隐藏第三个选项卡

如何使用jQuery UI选项卡在表格开关选项卡中制作元素

如何在 Bootstrap 4.1.3 中正确使用选项卡

多实例/多选项卡方法