带有可自定义内容的Windows 10 UWP UserControl

本文关键字：Windows UWP UserControl 自定义 | 更新日期: 2023-09-27 18:05:45

我想在Windows 10 UWP中创建一个可更改内容的用户控件。

我知道如何制作一个简单的用户控件，但是我需要一个这样的用户控件:

<Controls:UserControl x:Name="Usercontrol1" Margin="0,10,0,0" Grid.Row="1">
    <Controls:UserControl.MainContent>
        <Grid x:Name="Content">
            //Items are here
        </Grid>
    </Controls:UserControl.MainContent>
</Controls:UserControl>

我有网格在我的用户控件是空的，我想给这个网格在每个页面不同的项目。我想要一种在页面中为用户控件设置网格的方法，然后将该网格添加到用户控件中，而不是将空网格添加到用户控件中。

有什么办法可以做到吗?

带有可自定义内容的Windows 10 UWP UserControl

要做到这一点，您需要在用户控件的代码后面创建一个MainContent依赖属性，并使用ContentPresenter来显示它。

假设您的用户控件在MyControl.xaml和MyControl.xaml.cs中定义。

创建MainContent依赖属性

在UserControl.xaml.cs的UserControl类定义中添加以下内容:

public static readonly DependencyProperty MainContentProperty =
   DependencyProperty.Register( 
      "MainContent", 
      typeof( object ), 
      typeof( MyControl ), 
      new PropertyMetadata( default( object ) ) );
public object MainContent
{
    get { return ( object ) GetValue( MainContentProperty ); }
    set { SetValue( MainContentProperty, value ); }
}

作为Visual Studio中的快捷方式，您可以编写propdp或dependencyProperty(取决于您的版本)并按Tab键来自动填写整个属性的代码片段。

添加ContentPresenter

在MyControl.xaml中找到您想要显示内容的地方，并将ContentPresenter与MainContent属性绑定在那里。有几种方法可以做到这一点。

x:Bind语法的最新技术

<ContentPresenter Content="{x:Bind MainContent}" />

使用元素绑定—这里您需要为UserControl元素本身添加一个x:Name属性，例如将其称为RootControl，然后像这样创建绑定:

<ContentPresenter Content="{Binding MainContent, ElementName=RootControl}" />

使用与DataContext的绑定 -在MyControl.xaml.cs的UserControl的构造函数中，您可以设置DataContext - this.DataContext = this;，然后简单地写:

<ContentPresenter Content="{Binding MainContent}" />
使用

现在你的UserControl已经准备好了，你可以像这样使用它: 
<local:MyControl>
  <local:MyControl.MainContent>
     <!-- some content :-) -->
     <Image Source="Assets/LockScreenLogo.png" Width="100"/>
  </local:MyControl.MainContent>
</local:MyControl>
相关文章：