从其父 Shell xaml 访问在子 xaml 页面中创建的按钮 [英] Accessing a button created in a sub xaml page from it's parent Shell xaml

问题描述

我正在使用 SplitView 应用程序，并且创建了一个托管子页面的 Shell.我想要做的是在子页面上有一个按钮，单击该按钮时，可以操纵最初在 Shell xaml 上启动或创建的对象的可见性.但是，我不确定如何调用更改 SplitView 上的属性所需的类或框架.

I'm working with a SplitView application, and I've created a Shell that hosts the subpages. What I'd like to do is have a button on a subpage that when clicked, can manipulate the visibility of objects originally initiated or created on the Shell xaml. But, I'm not sure how to call the class or frame necessary to change attributes on the SplitView.

我的层级如下:Shell > Pages Folder > Sub Pages

My hierarchy is as follows: Shell > Pages Folder > Sub Pages

这是我的 Shell.xaml 的片段 请注意，这只是 SplitView

Here's the snippet from my Shell.xaml Mind you this is only a portion contained within the SplitView

<SplitView.Pane>
        <StackPanel x:Name="SplitViewPanePanel">
            <RadioButton x:Name="BackRadioButton" Click="BackRadioButton_Click" Style="{StaticResource NavRadioButtonStyle}" Tag="&#xE112;" Background="Gray" Content="Back" GroupName="Back"/>
            <RadioButton x:Name="HamburgerRadioButton" 
                         Click="HamburgerRadioButton_Click" 
                         Style="{StaticResource NavRadioButtonStyle}" 
                         Tag="&#xE700;"
                         Content="Menu" />

            <RadioButton x:Name="HomeRadioButton" Click="HomeRadioButton_Click" Style="{StaticResource NavRadioButtonStyle}" Tag="&#xE80F;" Content="Home" GroupName="Navigation"/>
            <RadioButton x:Name="TARadioButton" Click="MTRadioButton_Click" Style="{StaticResource NavRadioButtonStyle}" Tag="&#xE179;" Content="Team Assignments" GroupName="Navigation"/>
            <RadioButton x:Name="ASRRadioButton" Click="ASRRadioButton_Click" Style="{StaticResource NavRadioButtonStyle}" Tag="&#xE13C;" Content="Assignment Switch Requests" GroupName="Navigation"/>
            <RadioButton x:Name="MTRadioButton" Click="MTRadioButton_Click" Style="{StaticResource NavRadioButtonStyle}" Tag="&#xE15E;" Content="Management Tools" GroupName="Navigation"/>
        </StackPanel>
</SplitView.Pane>

以下是我在 Pages 文件夹中的主页"页面中的代码.

Below is the code from my "Home" page inside the Pages folder.

using Team_Management_Hub;
using Team_Management_Hub.Pages;

namespace Team_Management_Hub.Pages
{
    public sealed partial class Home : Page
    {
        public Home()
        {
            this.InitializeComponent();
        }

        private void TestButton_Click(object sender, RoutedEventArgs e)
        {
            //Here is the button I want to be able to click to alter the visibility of the MTRadioButton
        }
    }
}

我已经找了几天关于如何访问父 Shell 的示例或解释，但我似乎无法弄清楚.需要注意的是，这是我在 Windows 10 中的第一个 UWP，而且我对 C# 还很陌生.

I've looked for a couple days now for examples or explanations on how to access the parent Shell, and I can't seem to figure it out. It should be noted that this is my first UWP in Windows 10, and I'm fairly new to C#.

此外，如果有帮助或相关，以下代码位于我用来导航到各个页面的 Shell.xaml.cs 文件中.

Additionally, if it helps or is relevant, the below code is inside the Shell.xaml.cs file that I use to navigate to individual Pages.

private void HomeRadioButton_Click(object sender, RoutedEventArgs e)
{
    var frame = this.DataContext as Frame;
    Page page = frame?.Content as Page;

    if (page?.GetType() != typeof(Home))
    {
        frame.Navigate(typeof(Home));
    }
}

更新:因此，我已经对提供的第一个答案进行了一些更改，而且我的 Shell.xaml 文件中的范围似乎有些不正确.

UPDATE: So, I've implemented some changes from the first answer provided, and I seem to have something incorrect with my scope inside the Shell.xaml file.

这是我的 Shell.xaml 文件:

Here's my Shell.xaml file:

<Page
x:Class="Team_Management_Hub.Shell"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Team_Management_Hub"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:pages="using:Team_Management_Hub.Pages"
mc:Ignorable="d">
<pages:Home MyCoolEvent="OnCoolEvent"/>;
<SplitView x:Name="Team_Management_Hub" Background="Black" OpenPaneLength="240" CompactPaneLength="48"
    DisplayMode="CompactOverlay" IsPaneOpen="False" PaneBackground="Gray" Content="{Binding}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="HardwareButtons">
                <VisualState.Setters>
                    <Setter Target="BackRadioButton.Visibility" Value="Collapsed" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <SplitView.Pane>
        <StackPanel x:Name="SplitViewPanePanel">
            <RadioButton x:Name="BackRadioButton" Click="BackRadioButton_Click" Style="{StaticResource NavRadioButtonStyle}" Tag="&#xE112;" Background="Gray" Content="Back" GroupName="Back"/>
            <RadioButton x:Name="HamburgerRadioButton" Click="HamburgerRadioButton_Click" Style="{StaticResource NavRadioButtonStyle}" Tag="&#xE700;" Content="Menu" />
            <RadioButton x:Name="HomeRadioButton" Click="HomeRadioButton_Click" Style="{StaticResource NavRadioButtonStyle}" Tag="&#xE80F;" Content="Home" GroupName="Navigation"/>
            <RadioButton x:Name="TARadioButton" Click="TARadioButton_Click" Style="{StaticResource NavRadioButtonStyle}" Tag="&#xE179;" Content="Team Assignments" GroupName="Navigation"/>
            <RadioButton x:Name="ASRRadioButton" Click="ASRRadioButton_Click" Style="{StaticResource NavRadioButtonStyle}" Tag="&#xE13C;" Content="Assignment Switch Requests" GroupName="Navigation"/>
            <RadioButton x:Name="MTRadioButton" Click="MTRadioButton_Click" Style="{StaticResource NavRadioButtonStyle}" Tag="&#xE15E;" Content="Management Tools" GroupName="Navigation"/>
        </StackPanel>
    </SplitView.Pane>
</SplitView>

这样，<pages:Home MyCoolEvent="OnCoolEvent"/> 下的所有内容都带有蓝色下划线，并且出现属性内容设置不止一次"的错误我找到了 this 链接，所以我试图实现把它全部都在一个网格中，但是当我简单地在 上方和最终 下方添加 时如果我将 部分保留在 splitview 上方，则 Home.xaml 页面上的按钮不会执行任何操作.如果我将 移动到 下方但仍在 按钮有效，但 SplitView 消失了.我还尝试将 <pages> 放在保存我的 RadioButtons 的 <StackPanel> 内，但它做了一些奇怪的事情，看起来我的主页在 SplitView 内按钮下方的窗格.所以，我确定我在 xaml 设置的范围内犯了一些简单的错误，但是我尝试了很多将 <pages:Home> 放在这么多不同的区域和不同的控件，我还没有让它工作.因此，在正确布局以完成这项工作方面提供一些帮助会很棒.

With this, everything under <pages:Home MyCoolEvent="OnCoolEvent"/> gets underlined blue, and the error "the property Content is set more than once" I found this link and so I tried to implement putting it all in a grid, but when I simply add <Grid> above the <SplitView> and below the final </SplitView> if I keep the <pages> portion above the splitview, the button on the Home.xaml page doesn't do anything. If I move the <pages> to below the <SplitView> but still inside the <Grid></Grid> the button works, but the SplitView disappears. I also tried throwing the <pages> inside the <StackPanel> that holds my RadioButtons, but it does something weird, where it appears my Home Page is inside the SplitView Pane under the buttons. So, I'm sure I've got some simple mistake I'm making with the scope of the xaml setup, but I've tried so many combinations of placing the <pages:Home> in so many different areas and inside different controls, and I haven't gotten it to work. So, some help on the proper layout to make this work, would be great.

感谢您的帮助.

推荐答案

一个非常简单的方法是向 Home 类添加一个事件.单击 TestButton 时触发该事件.然后，您将在shell"页面上监听事件.

A very simply approach would be to add an event to your Home class. When the TestButton is clicked fire the event. You would then listen for the event on your "shell" page.

示例 shell xaml:

example shell xaml:

<pages:Home MyCoolEvent="OnCoolEvent"/>

示例外壳代码

private void OnCoolEvent(object sender, EventArgs args)
{
   //alter the visibility of the MTRadioButton
}

家庭代码:

public event EventHandler MyCoolEvent;

private void TestButton_Click(object sender, RoutedEventArgs e)
{
    OnMyCoolEvent();
}

protected virtual void OnMyCoolEvent()
{
    EventHandler handler = MyCoolEvent;
    if (handler != null) handler(this, EventArgs.Empty);
} 

这篇关于从其父 Shell xaml 访问在子 xaml 页面中创建的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！