WinUI 3 - 单击用户控件c#中的按钮后如何在页面中打开控件？

Question

I have an ItemsRepeater on the page's XAML code where it's ItemsSource property is bind to a list of User Control (ObersvableCollection), a custom control I made. In this User Control there's a button that I wish would open a SplitView pane that I set in the Page's Xaml code. I'm thinking I need to get an instance of the page in the User Control's code behind, on the click event, but I have no idea how.

Answer 1

You can do it this way.

TestUserControl.xaml.cs

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using System.Windows.Input;

namespace WinUI3App1;

public sealed partial class TestUserControl : UserControl
{
    public static readonly DependencyProperty ClickCommandProperty = DependencyProperty.Register(
        nameof(ClickCommand),
        typeof(ICommand),
        typeof(TestUserControl),
        new PropertyMetadata(null));

    public TestUserControl()
    {
        InitializeComponent();
    }

    public ICommand ClickCommand
    {
        get => (ICommand)GetValue(ClickCommandProperty);
        set => SetValue(ClickCommandProperty, value);
    }
}

TestUseControl.xaml

<UserControl
    x:Class="WinUI3App1.TestUserControl"
    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"
    mc:Ignorable="d"
    x:Name="ThisControl">
    <StackPanel Orientation="Horizontal">
        <Button Command="{x:Bind ClickCommand}" CommandParameter="{Binding ElementName=ThisControl}" Content="Click" />
    </StackPanel>
</UserControl>

MainWindow.xaml.cs

using CommunityToolkit.Mvvm.Input;
using Microsoft.UI.Xaml;
using System.Collections.ObjectModel;
using System.Windows.Input;

namespace WinUI3App1;

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        // Install the CommunityToolkit.Mvvm NuGet package
        // to avoid implementing commands yourself.
        ClickCommand = new RelayCommand<TestUserControl>(OnClick);

        for (int i = 0; i < 10; i++)
        {
            TestUserControls.Add(new TestUserControl()
            {
                ClickCommand = ClickCommand
            });
        }
    }

    public ObservableCollection<TestUserControl> TestUserControls { get; set; } = new();

    public ICommand ClickCommand { get; set; }

    private void OnClick(TestUserControl? sender)
    {
        SplitViewControl.IsPaneOpen = true;
    }
}

MainWindow.xaml

<Window
    x:Class="WinUI3App1.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"
    mc:Ignorable="d">
    <SplitView x:Name="SplitViewControl">
        <SplitView.Pane>
            <Grid/>
        </SplitView.Pane>
        <StackPanel Orientation="Vertical">
            <ItemsRepeater ItemsSource="{x:Bind TestUserControls}" />
        </StackPanel>
    </SplitView>
</Window>