如何在WinUI3中创建事件或回调?

huangapple go评论67阅读模式
英文:

How to make event or callback in WinUI3?

问题

MainPage.xaml包含两个框架:Toolbar和Content。还有一些不同的页面用于这些框架。在Toolbar框架中使用了CommandBar。如何通过AppBarButton的点击事件从MainPage.xaml中的Frame(例如TaskerToolbar)更改Frame?或者如何从TaskerToolbar发送点击事件到MainPage.xaml?感谢帮助。

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(和其他工具栏):

<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>
英文:

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:

&lt;Grid&gt;
    &lt;Grid.RowDefinitions&gt;
        &lt;!-- toolbar--&gt;
        &lt;RowDefinition Height=&quot;110&quot;/&gt;
        &lt;RowDefinition/&gt;
    &lt;/Grid.RowDefinitions&gt;

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

MainPage.xaml.cs:

public MainChromeWindowView()
{
    this.InitializeComponent();

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

TaskerToolbar (and another toolbars):

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

答案1

得分: 0

以下是您要求的代码部分的中文翻译:

TaskerToobar.xaml

您可以将事件添加到您的 ``Page`` 类中:

&lt;AppBarButton
    Click=&quot;RecorderButton_Click&quot;
    Label=&quot;录制器&quot; /&gt;
&lt;AppBarButton
    Click=&quot;ConfigurationButton_Click&quot;
    Label=&quot;配置&quot; /&gt;

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);
    }
}

并且可以这样订阅/取消订阅:

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)
    {
        // &quot;SingleBView&quot; 是仅用于此回答的页面。
        this.contentFrame.Navigate(typeof(SingleBView), null);
    }
}
英文:

You can add events to your Page class:

TaskerToobar.xaml

&lt;AppBarButton
    Click=&quot;RecorderButton_Click&quot;
    Label=&quot;Recorder&quot; /&gt;
&lt;AppBarButton
    Click=&quot;ConfigurationButton_Click&quot;
    Label=&quot;Configuration&quot; /&gt;

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)
    {
        // &quot;SingleBView&quot; is a page just for this answer.
        this.contentFrame.Navigate(typeof(SingleBView), null);
    }
}

huangapple
  • 本文由 发表于 2023年5月10日 18:30:09
  • 转载请务必保留本文链接:https://go.coder-hub.com/76217347.html
  • c#
  • windows-app-sdk
  • winui-3
  • xaml

List: 如何为某个索引元素应用“where”条件? go 61
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定

  • 开发者交流平台

    本页二维码