import{_ as l,c as e,a as i,e as t,b as a,d as h,w as p,r as k,o as d}from"./app-DlzW8FTI.js";const r={},c={class:"hint-container info"};function o(g,s){const n=k("RouteLink");return d(),e("div",null,[s[4]||(s[4]=i("h1",{id:"组件",tabindex:"-1"},[i("a",{class:"header-anchor",href:"#组件"},[i("span",null,"组件")])],-1)),s[5]||(s[5]=i("p",null,"组件是在 ClassIsland 主界面上显示信息的单元，若干个组件可以组成 ClassIsland 主界面上显示的内容。您可以通过开发组件的方式，丰富 ClassIsland 的主界面。",-1)),i("div",c,[s[3]||(s[3]=i("p",{class:"hint-container-title"},"Info",-1)),i("p",null,[s[1]||(s[1]=a("这篇文章主要讲述如何开发组件。如果您只是要调整主界面组件的普通用户，请参考")),h(n,{to:"/en-us/app/basic.html#%E7%BB%84%E4%BB%B6"},{default:p(()=>s[0]||(s[0]=[a("这篇文章")])),_:1}),s[2]||(s[2]=a("。"))])]),s[6]||(s[6]=t(`

定义组件

组件实质上是 WPF 的用户控件，所以我们需要先创建一个用户控件。在创建好用户控件之后，修改如下高亮内容，将控件的基类修改成组件基类 ComponentBase：

MyComponent.xaml
<ci:ComponentBase
    xmlns:ci="http://classisland.tech/schemas/xaml/core"
    ...
    >
    <Grid>
        <!-- 在这里编写组件界面 -->
    </Grid>
</ci:ComponentBase>

MyComponent.xaml.cs
// ...
public partial class MyComponent : ComponentBase
{
    public MyComponent()
    {
        InitializeComponent();
    }
}

此外，我们还需要为组件类添加ComponentInfo属性来声明组件的信息。

MyComponent.xaml.cs
// ...
[ComponentInfo(
    "66164856-794B-4243-87C2-78EFD3F49E7C",  // 这里需要替换成你生成的 GUID
    "我的组件"
)]
public partial class MyComponent : ComponentBase
{
    public MyComponent()
    {
        InitializeComponent();
    }
}

上面的代码声明了组件的 GUID 和名称。在加载组件配置时，会通过 GUID 进行识别。组件名称会在组件设置页面中显示。

您也可以通过修改 ComponentInfo 属性，为您的组件指定图标和描述，它们会在组件设置页面中显示。例如：

[ComponentInfo(
    "66164856-794B-4243-87C2-78EFD3F49E7C",
    "我的组件",
    PackIconKind.CalendarOutline,
    "描述文本"
)]

注册组件

要让组件出现在组件库中，需要将其注册到组件服务上。您可以通过在配置服务的过程中，使用AddComponent扩展方法来注册您的组件。

public void OnServiceConfiguring(HostBuilderContext context, IServiceCollection services) {
    // ...
    services.AddComponent<MyComponent>();
    // ...
}

注册完成后，打开【应用设置】->【组件】，您可以在组件库中看到您创建的组件。您可以将您的组件拖动到主界面上来测试组件的效果。

组件设置

有时组件需要提供一些设置选项，供用户进行自定义。主界面上每个摆放的组件的设置相互独立。ComponentBase 封装了一套设置提供方案，只需要为组件继承的 ComponentBase 基类添加对应设置模型的类型参数即可。

假设组件的设置模型类名为 MySettingsClass，那么我们需要在 XAML 中加入泛型参数 x:TypeArguments="MySettingsClass" ，如：

MyComponent.xaml
<ci:ComponentBase
    x:TypeArguments="MySettingsClass"
    xmlns:ci="http://classisland.tech/schemas/xaml/core"
    ...
    >
    <Grid>
        <!-- 在这里编写组件界面 -->
    </Grid>
</ci:ComponentBase>

同时别忘了修改后端代码的声明：

MyComponent.xaml.cs
// ...
public partial class MyComponent : ComponentBase<MySettingsClass>
{
    public MyComponent()
    {
        InitializeComponent();
    }
}

这种带了类型参数的 ComponentBase 包含一个类型为传入的类型参数 Settings 属性，存储了当前组件的设置，并且会在组件 初始化完成后 自动加载。

Warning

不要在构造函数和OnInitialized方法中访问Settings属性。此时Settings属性尚未初始化，会返回null值。

然后以与定义组件类似的方法定义组件设置控件。组件设置控件不需要再填写注册信息。

MyComponentSettingsControl.xaml
<ci:ComponentBase
    x:TypeArguments="MySettingsClass"
    xmlns:ci="http://classisland.tech/schemas/xaml/core"
    ...
    >
    <Grid>
        <!-- 在这里编写组件设置界面 -->
    </Grid>
</ci:ComponentBase>

MyComponentSettingsControl.xaml.cs
// ...
public partial class MyComponentSettingsControl : ComponentBase<MySettingsClass>
{
    public MyComponent()
    {
        InitializeComponent();
    }
}

最后更新注册代码，在调用的注册方法的第二个泛型参数填入设置控件类别，告诉 ClassIsland 这个组件有一个与之对应的设置控件。

public void OnServiceConfiguring(HostBuilderContext context, IServiceCollection services) {
    // ...
    services.AddComponent<MyComponent, MyComponentSettingsControl>();
    // ...
}

您可以在【应用设置】->【组件】中查看设置控件效果。

`,27))])}const B=l(r,[["render",o]]),y=JSON.parse('{"path":"/en-us/dev/components.html","title":"组件","lang":"en-US","frontmatter":{"description":"组件组件是在 ClassIsland 主界面上显示信息的单元，若干个组件可以组成 ClassIsland 主界面上显示的内容。您可以通过开发组件的方式，丰富 ClassIsland 的主界面。 Info 这篇文章主要讲述如何开发组件。如果您只是要调整主界面组件的普通用户，请参考。定义组件组件实质上是 WPF 的用户控件，所以我们需要先创建一个用户...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"组件\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2024-08-30T03:47:10.000Z\\",\\"author\\":[{\\"@type\\":\\"Person\\",\\"name\\":\\"ClassIsland 社区\\",\\"url\\":\\"https://classisland.tech\\"}]}"],["meta",{"property":"og:url","content":"https://docs.classisland.tech/en-us/dev/components.html"}],["meta",{"property":"og:site_name","content":"ClassIsland Documentation"}],["meta",{"property":"og:title","content":"组件"}],["meta",{"property":"og:description","content":"组件组件是在 ClassIsland 主界面上显示信息的单元，若干个组件可以组成 ClassIsland 主界面上显示的内容。您可以通过开发组件的方式，丰富 ClassIsland 的主界面。 Info 这篇文章主要讲述如何开发组件。如果您只是要调整主界面组件的普通用户，请参考。定义组件组件实质上是 WPF 的用户控件，所以我们需要先创建一个用户..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"en-US"}],["meta",{"property":"og:locale:alternate","content":"zh-CN"}],["meta",{"property":"og:updated_time","content":"2024-08-30T03:47:10.000Z"}],["meta",{"property":"article:modified_time","content":"2024-08-30T03:47:10.000Z"}],["link",{"rel":"alternate","hreflang":"zh-cn","href":"https://docs.classisland.tech/dev/components.html"}]]},"git":{"createdTime":1719066151000,"updatedTime":1724989630000,"contributors":[{"name":"WRC","username":"WRC","email":"hello_wrc@outlook.com","commits":6,"url":"https://github.com/WRC"},{"name":"LiuYan-xwx","username":"LiuYan-xwx","email":"66517348+LiuYan-xwx@users.noreply.github.com","commits":1,"url":"https://github.com/LiuYan-xwx"},{"name":"hello8693","username":"hello8693","email":"1320998105@qq.com","commits":1,"url":"https://github.com/hello8693"}]},"readingTime":{"minutes":3.09,"words":926},"filePathRelative":"en-us/dev/components.md","autoDesc":true}');export{B as comp,y as data};