How to make event or callback in WinUI3?

Question

I have main XAML page including two frames: Toolbar and Content. Also I have a few different pages for this frames. I'm using CommandBar into Toolbar frame. How to change Frame by AppBarButton click event from Frame (for ex. TaskerToolbar) in Main page? Or how to send click event from TaskerToolbar to MainPage.xaml. Thanks for help.

MainPage.xaml:

<Grid>
    <Grid.RowDefinitions>
        <!-- toolbar-->
        <RowDefinition Height="110"/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <Border CornerRadius="0,0,0,10" BorderThickness="0,0,0,5">
        <Border.BorderBrush>
            <LinearGradientBrush StartPoint=".5,0" EndPoint=".5,1" Opacity="0.02">
                <GradientStop Color="Gray" Offset="0"/>
                <GradientStop Color="Black" Offset=".03"/>
                <GradientStop Color="Black" Offset=".98"/>
                <GradientStop Color="Gray" Offset="1"/>
            </LinearGradientBrush>
        </Border.BorderBrush>
        <Border CornerRadius="0,0,0,10" BorderBrush="#D4D4D4" BorderThickness="1,0,0,1">
            <!-- toolbar frame -->
            <Grid Grid.Row="0" Background="#F3F3F3">
                <Frame x:Name="toolbarFrame"/>
            </Grid>
        </Border>
    </Border>
    <!-- content frame -->
    <Grid Grid.Row="1">
        <Frame x:Name="contentFrame"/>
    </Grid>
</Grid>

MainPage.xaml.cs:

public MainChromeWindowView()
{
    this.InitializeComponent();

    toolbarFrame.Navigate(typeof(TaskerToolbar), null);
    contentFrame.Navigate(typeof(SingleAView), null);
}

TaskerToolbar (and another toolbars):

<Grid>
    <CommandBar Style="{StaticResource OpenDownCommandBar}" HorizontalAlignment="Left" IsOpen="False" DefaultLabelPosition="Collapsed" Margin="0,15,0,0">
        <AppBarButton Style="{StaticResource ImageAppBarButtonStyle}" LabelPosition="Default" Label="Recorder">
            <AppBarButton.Content>
                <Image>
                    <Image.Source>
                        <SvgImageSource UriSource="/Assets/icons/icon1.svg"/>
                    </Image.Source>
                </Image>
            </AppBarButton.Content>
        </AppBarButton>
        <AppBarButton Style="{StaticResource ImageAppBarButtonStyle}" LabelPosition="Default" Label="Configuration">
            <AppBarButton.Content>
                <Image>
                    <Image.Source>
                        <SvgImageSource UriSource="/Assets/icons/icon2.svg"/>
                    </Image.Source>
                </Image>
            </AppBarButton.Content>
        </AppBarButton>
    </CommandBar>
</Grid>

score 0 · Accepted Answer · answered May 10 '23 at 12:16

You can add events to your Page class:

TaskerToobar.xaml

<AppBarButton
    Click="RecorderButton_Click"
    Label="Recorder" />
<AppBarButton
    Click="ConfigurationButton_Click"
    Label="Configuration" />

TaskerToolbar.xaml.cs

public sealed partial class TaskerToolbar : Page
{
    public TaskerToolbar()
    {
        this.InitializeComponent();
    }

    public event EventHandler? RecorderButtonClicked;

    public event EventHandler? ConfigurationButtonClicked;

    private void RecorderButton_Click(object sender, RoutedEventArgs e)
    {
        RecorderButtonClicked?.Invoke(sender, EventArgs.Empty);
    }

    private void ConfigurationButton_Click(object sender, RoutedEventArgs e)
    {
        ConfigurationButtonClicked?.Invoke(sender, EventArgs.Empty);
    }
}

and subscribe/unsubscribe like this:

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        
        this.toolbarFrame.Navigating += ToolbarFrame_Navigating;
        this.toolbarFrame.Navigated += ToolbarFrame_Navigated;
        
        this.toolbarFrame.Navigate(typeof(TaskerToolbar), null);
        this.contentFrame.Navigate(typeof(SingleAView), null);
    }

    private void ToolbarFrame_Navigating(object sender, NavigatingCancelEventArgs e)
    {
        if (sender is Frame { Content: TaskerToolbar taskerToolbar })
        {
            taskerToolbar.RecorderButtonClicked -= TaskerToolbar_RecorderButtonClicked;
            taskerToolbar.ConfigurationButtonClicked -= TaskerToolbar_ConfigurationButtonClicked;
        }
    }

    private void ToolbarFrame_Navigated(object sender, Microsoft.UI.Xaml.Navigation.NavigationEventArgs e)
    {
        if (sender is Frame { Content: TaskerToolbar taskerToolbar })
        {
            taskerToolbar.RecorderButtonClicked += TaskerToolbar_RecorderButtonClicked;
            taskerToolbar.ConfigurationButtonClicked += TaskerToolbar_ConfigurationButtonClicked;
        }
    }

    private void TaskerToolbar_RecorderButtonClicked(object? sender, System.EventArgs e)
    {
        this.contentFrame.Navigate(typeof(SingleAView), null);
    }

    private void TaskerToolbar_ConfigurationButtonClicked(object? sender, EventArgs e)
    {
        // "SingleBView" is a page just for this answer.
        this.contentFrame.Navigate(typeof(SingleBView), null);
    }
}

How to make event or callback in WinUI3?

1 Answers1