C++/WinUI 3 数据绑定(一)

最新推荐文章于 2024-06-16 09:47:38 发布

AllesUgo

最新推荐文章于 2024-06-16 09:47:38 发布

阅读量750

点赞数 2

文章标签： c++ 开发语言 ui visual studio

本文链接：https://blog.csdn.net/huanying294/article/details/134542822

版权

看到网上C++/WinRT 开发WinUI3的教程很少，最近在学习，分享一下C++ WinUI3的数据绑定。

数据绑定主要是为了简化开发，让UI主动读取变量来更新自己。下面用最简单的例子展示单次数据绑定的过程。

首先随意创建一个C++/WinRT WinUI3项目(我这里将项目命名为winuiwinrt，后续命名空间中出现的winuiwinrt根据自己的项目名称修改)，并直接运行，根据Visual Studio 2022提供的默认模板，应当会得到一个窗口，其中包含一个按钮，点击后改变按钮中的字样。

由于我的电脑开启了深色模式，因此窗口是黑色的。

在项目中应当包含一个名为MainWindow.xaml的文件，将其展开，其中应当包含了对应的.cpp、.h、.idl三个文件。

而我们要在MainWindow.xaml中添加一个TextBox，并利用数据绑定的方式让其显示我们自定义类MyClass中的成员text（字符串）。

首先，我们需要定义MyClass类。因为需要将其与Xaml绑定，因此我们需要在MainWindow.idl中创建其定义（也就是接口）。关于.idl文件的语法，可以参考微软官网的教程。其语法与C#接近，他的作用是定义接口，因此我们在.idl中定义接口，并在.h和.cpp文件中实现接口即可。

打开MainWindow.idl，应当能够看到如下的默认代码

namespace winuiwinrt
{
    [default_interface]
    runtimeclass MainWindow : Microsoft.UI.Xaml.Window
    {
        MainWindow();
        MyClass myclass{ get; };
    }
}

其中定义了一个运行时类MainWindow，我们需要再定义一个运行时类，也就是MyClass,并在其中定义构造函数和一个字符串成员，最终该文件应当为

namespace winuiwinrt
{
    runtimeclass MyClass
    {
        MyClass(String text);
        String text;
    }
    [default_interface]
    runtimeclass MainWindow : Microsoft.UI.Xaml.Window
    {
        MainWindow();
        MyClass myclass{ get; };
    }
}

在这个类中，构造函数需要一个字符串类型的参数，用于初始化text成员。text成员没有设置访问属性，因此默认为读写属性。其访问属性设置与C#类似，例如设置为只读可以写作

String text {get;};

需要注意的是，这里不支持只写属性。

如果需要其他类型，可以参考微软IDL的语法中可用的类型。

随后我们需要在cpp和头文件中实现该接口。实现该接口需要遵循一定的格式，最好的方法是由编译器自动生成与该接口对应的文档，然后我们自己再做修改。因此我们现在直接生成项目（生成不会成功，但是编译器会自动生成与接口对应的C++代码）。接下来我们需要到项目文件夹中的Generated Files\sources目录中找到编译器自动生成的代码，分别是MyClass.h和MyClass.cpp两个文件。

我们在项目中新建两个文件(.cpp文件和.h文件，文件名随意)，并分别将MyClass.h和MyClass.cpp中的内容拷贝到新建的两个文件中。

接下来需要将文件中上方的静态断言删除（.cpp和.h文件都有），即static_assert，这是为了防止我们直接修改编译器生成目录中的MyClass.h和MyClass.cpp文件，因为那里的这两个文件会在生成时被覆盖。

随后我们需要修改MyClass类的定义。在IDL中我们声明了参数为字符串的构造函数，因此我们需要在这里编写参数为winrt::hstring类型的构造函数(IDL中的String对应了C++的winrt::hstring类型)

同时我们不需要默认的构造函数，因此将默认的构造函数显式的删除。

我们在IDL文件中还定义了一个名为text的字符串成员，没有指定其访问属性，因此它被编译器编译为了两个成员函数（需要注意，IDL中的成员变量会被编译成C++的函数，不要与C++的成员变量混淆），分别用于读和写。同时为了在类中能够存储字符串，因此再定义一个hstring类型的私有字段m_text用于存储字符串。

最终MyClass类在头文件(.h)中的声明如下

struct MyClass : MyClassT<MyClass>
{
    MyClass() = delete;
    MyClass(hstring const& text);
    hstring text();
    void text(hstring const& value);
private:
    hstring m_text;
};

所以最终得到的头文件内容如下:

#pragma once
#include "MyClass.g.h"

namespace winrt::winuiwinrt::implementation
{
    struct MyClass : MyClassT<MyClass>
    {
        MyClass() = delete;

        MyClass(hstring const& text);
        hstring text();
        void text(hstring const& value);
    private:
        hstring m_text;
    };
}
namespace winrt::winuiwinrt::factory_implementation
{
    struct MyClass : MyClassT<MyClass, implementation::MyClass>
    {
    };
}

接下来需要实现其成员函数。

来到我们先前创建的.cpp文件，我们已经向其中复制了由编译器自动生成的部分成员函数的实现，我们需要对其进行修改，删除不需要的部分，添加我们自己编写的成员函数实现。最终.cpp文件应该实现如下:

#include "pch.h"
#include "MyClass.h"
#include "MyClass.g.cpp"

namespace winrt::winuiwinrt::implementation
{
    MyClass::MyClass(hstring const& text)
    {
        this->m_text = text;
    }
    hstring MyClass::text()
    {
        return this->m_text;
    }
    void MyClass::text(hstring const& value)
    {
        this->m_text = value;
    }
}

至此，我们自定义的类就已经实现完成了，接下来我们只需要在界面相关的文件里将该类实例化，并将其绑定在Xaml中的某个控件上即可。为了方便演示，我将其绑定在一个TextBox控件中。

我们首先需要进入MainWindow.idl文件中，向MainWindow运行时类中添加一个成员，并设置为只读属性（在这个示例中只进行单次绑定，UI不会向其写入值），也就是我们要绑定的成员。添加后MainWindow运行时类在idl文件中的定义如下

runtimeclass MainWindow : Microsoft.UI.Xaml.Window
{
    MainWindow();
    MyClass myclass{ get; };
}

随后我们需要实现该运行时类。MainWindow运行时类的实现在项目创建时(其他页面则在xaml创建时)自动生成，位置在MainWindow.cpp和MainWindow.h中。但我们向MainWindow的运行时类接口定义处(.idl文件中)添加了类型为MyClass的myclass只读字段，因此我们需要修改MainWindow类的实现。其格式与先前实现MyClass类相似，添加了myclass字段，类型为MyClass，且为了能够使用MyClass类型，我们还需要引用先前我们编写的头文件(MyClass.h)。在idl文件中myclass字段已设置为只读，因此我们在MyClass的实现中添加一个成员函数（若还包含写属性，则需要两个成员函数）。即winuiwinrt::MyClass myclass();并且添加一个私有字段m_myclass用于保存myclass的值,并将其用字符串L"hello"初始化。

最终MainWindow在.h文件中的定义如下:

struct MainWindow : MainWindowT<MainWindow>
{
    MainWindow();
    void myButton_Click(Windows::Foundation::IInspectable const& sender, Microsoft::UI::Xaml::RoutedEventArgs const& args);
    winuiwinrt::MyClass myclass(void);
private:
    winuiwinrt::MyClass m_myclass{L"hello"};
};

在默认生成的MainWindow中还包含了几个其他的成员函数，可以选择将其删除，也可以忽略它。在上面的代码中我删除了它们。

最终的MainWindow.h文件内容如下

// Copyright (c) Microsoft Corporation and Contributors.
// Licensed under the MIT License.

#pragma once

#include "MainWindow.g.h"
#include "MyClass.h"

namespace winrt::winuiwinrt::implementation
{
    struct MainWindow : MainWindowT<MainWindow>
    {
        MainWindow();
        void myButton_Click(Windows::Foundation::IInspectable const& sender, Microsoft::UI::Xaml::RoutedEventArgs const& args);
        winuiwinrt::MyClass myclass(void);
    private:
        winuiwinrt::MyClass m_myclass{L"hello"};
    };
}

namespace winrt::winuiwinrt::factory_implementation
{
    struct MainWindow : MainWindowT<MainWindow, implementation::MainWindow>
    {
    };
}

最后我们只需要在MainWindow.cpp中实现myclass函数即可。最终的MainWindow.cpp文件如下

// Copyright (c) Microsoft Corporation and Contributors.
// Licensed under the MIT License.

#include "pch.h"
#include "MainWindow.xaml.h"
#if __has_include("MainWindow.g.cpp")
#include "MainWindow.g.cpp"
#endif
using namespace winrt;
using namespace Microsoft::UI::Xaml;

// To learn more about WinUI, the WinUI project structure,
// and more about our project templates, see: http://aka.ms/winui-project-info.

namespace winrt::winuiwinrt::implementation
{
    MainWindow::MainWindow()
    {
        InitializeComponent();
    }
    void MainWindow::myButton_Click(IInspectable const&, RoutedEventArgs const&)
    {
        myButton().Content(box_value(L"Clicked"));
    }
    winuiwinrt::MyClass MainWindow::myclass(void)
    {
        return this->m_myclass;
    }
}

在完成上述工作后，我们在MainWindow.xaml中添加TextBox控件，并将其Text属性绑定至MainWindow运行时类中的myclass成员的text属性上，即

<TextBox Text="{x:Bind myclass.text}"/>

最终的MainWindow.xaml文件内容如下:

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="winuiwinrt.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:winuiwinrt"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBox Text="{x:Bind myclass.text,Mode=OneTime}"/>
        <Button x:Name="myButton" Click="myButton_Click">Click Me</Button>
    </StackPanel>
</Window>

至此数据绑定全部完成，运行程序应当得到如下窗口