UWP：如何从另一个 XAML 更改 UI？

Question

I have a UWP application:

My app command bar (XAML 2) manages TabView content (XAML 1). I need different command bars for different tab types. Now I using several frames in second XAML, and I can't change it from XAML 1.

How I can change XAML 2 UI from XAML 1 .cs file?

Thanks for any help.

UPD: I have main XAML:

<Page
        x:Class="Test.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:NetChrom"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
        mc:Ignorable="d"
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    
        <Grid x:Name="BaseGrid">
            <Grid.RowDefinitions>
                <!-- titlebar -->
                <RowDefinition x:Name="Titlebar" Height="30">
                </RowDefinition>
                <!-- toolbar -->
                <RowDefinition x:Name="Toolbar" Height="110">
                </RowDefinition>
                <!-- main window -->
                <RowDefinition>
                </RowDefinition>
            </Grid.RowDefinitions>
    
            <Grid x:Name="TitlebarGrid" Grid.Row="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="5*">
                    </ColumnDefinition>
                </Grid.ColumnDefinitions>
                <local:TitleBar/>
            </Grid>
            <Grid x:Name="ToolbarGrid" Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="37*">
                    </ColumnDefinition>
                    <ColumnDefinition Width="27*"/>
                </Grid.ColumnDefinitions>
                <!-- toolbar -->
                <local:Toolbar Grid.ColumnSpan="2"/>
            </Grid>
    
    
            <!-- content-->
            <Grid x:Name="MainContent" Grid.Row="2" Background="AliceBlue">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition MaxWidth="325" MinWidth="120">
    
                    </ColumnDefinition>
                    <ColumnDefinition>
    
                    </ColumnDefinition>
                </Grid.ColumnDefinitions>
    
                <Grid Grid.Column="1" Background="#F3F3F3">
                    <local:MainTabbar/>
                </Grid>
                <Grid Grid.Column="0" Background="LightBlue">
                    <local:FileManager/>
                </Grid>
                <controls:GridSplitter
                    Margin="0,10,10,0"
                    Opacity="0"
                    Background="Transparent" 
                    GripperCursor="Default"
                    HorizontalAlignment="Left"
                    Grid.Column="1"
                    ResizeDirection="Auto"
                    ResizeBehavior="BasedOnAlignment"
                    CursorBehavior="ChangeOnSplitterHover"
                    Width="0">
                        <controls:GridSplitter.RenderTransform>
                            <TranslateTransform X="-8" />
                        </controls:GridSplitter.RenderTransform>
                </controls:GridSplitter>
            </Grid>
            
        </Grid>
    </Page>

and in this XAML there are two another XAML: MainTabbar (XAML 1) and Toolbar (XAML 2) from scheme.

This is Toolbar.xaml:

    <UserControl
        x:Class="Test.Toolbar"
        x:Name="toolbarControl"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
        xmlns:local="using:Test"
        xmlns:met="using:Test.Method"
        xmlns:chr="using:Test.ChrOptions"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
        d:DesignHeight="110"
        d:DesignWidth="1920">
        <Border CornerRadius="0,0,10,10" BorderBrush="#D4D4D4" BorderThickness="1,0,1,1" Background="#F3F3F3">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="110">
                    </RowDefinition>
                </Grid.RowDefinitions>
    
                <Grid x:Name="MainGrid">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition>
                        </ColumnDefinition>
                        <ColumnDefinition Width="320"/>
                    </Grid.ColumnDefinitions>
    
                    <Grid Grid.Column="1" HorizontalAlignment="Right">
    
                        <StackPanel Orientation="Horizontal" Margin="0,0,0,0">
                
                        </StackPanel>
                    </Grid>
                    <Grid Grid.Column="0">
                        <Frame x:Name="toolbarFrame"/> <!-- cmdbar frame>
                    </Grid>
                </Grid>
    
            </Grid>
        </Border>
    </UserControl>

This is MainTabbar:

<Page
    x:Class="Test.MainTabbar"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Test"
    xmlns:met="using:Test.Method"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    d:DesignWidth="1595">

    <Grid Margin="10,0,0,0">
        <muxc:TabView x:Name="Tabs" 
                             IsAddTabButtonVisible="False"
                             VerticalAlignment="Stretch"
                             TabCloseRequested="Tabs_TabCloseRequested"
                             AllowDropTabs="True"
                             CanDragTabs="False"
                             CanReorderTabs="True"
                             TabDroppedOutside="Tabs_TabDroppedOutside"
                             TabStripDragOver="Tabs_TabStripDragOver"
                             TabStripDrop="Tabs_TabStripDrop"
                             TabDragStarting="Tabs_TabDragStarting" >
            <muxc:TabView.TabItems>
                <muxc:TabViewItem Header="SampleMethod.met" IsClosable="False">
                    <muxc:TabViewItem.IconSource>
                        <muxc:SymbolIconSource Symbol="Placeholder" />
                    </muxc:TabViewItem.IconSource>
                   <!-- <Frame x:Name="MethodFrame"/> -->
                    <met:MethodTabView/>
                </muxc:TabViewItem>
                <muxc:TabViewItem Header="SampleChrome.chr" IsClosable="False">
                    <muxc:TabViewItem.IconSource>
                        <muxc:SymbolIconSource Symbol="Placeholder" />
                    </muxc:TabViewItem.IconSource>
                    <local:ChrView/>
                </muxc:TabViewItem>
            </muxc:TabView.TabItems>
            <muxc:TabView.TabStripHeader>
                <Grid x:Name="ShellTitlebarInset" Background="#F3F3F3" />
            </muxc:TabView.TabStripHeader>
            <muxc:TabView.TabStripFooter>
                <Grid x:Name="CustomDragRegion" Background="#F3F3F3" />
            </muxc:TabView.TabStripFooter>
        </muxc:TabView>
    </Grid>
</Page>

I need to get current tab type in MainTabbar.xaml.cs (it's ok). And then change Command Bar in Toolbar.xaml frame. I wrote this procedure for change frame in Toolbar.xaml.cs:

        public void setMetCmdbarMode()
        {
            toolbarFrame.Navigate(typeof(MethodToolbar), null);
        }

But I don't know how I can call this function from MainTabbar class, or how I can translate tab type to Toolbar class.

Answer 1

After checking your code, you could try to create a custom event in the MainTabbar , and handle it in the MainPage . This event is triggered when the selected item of the TabView is changed. Then you could get notified in the MainPage and call method to change the Toolbar .

Here are the detailed steps:

1. Create a custom Event named TabItemChanged on the MainTabbar page and call it in the TabView_SelectionChanged event.

2. Handle the TabItemChanged in the MainPage

3. Change the content of the Toolbar as you want in the EventHandler based on the TabViewItem.

Code in MainTabbar :

  public sealed partial class MainTabbar : Page
{
    public event EventHandler TabItemChanged;

    public MainTabbar()
    {
        this.InitializeComponent();
    }

    private void Tabs_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {

        if (this.TabItemChanged != null)
            this.TabItemChanged(Tabs.SelectedItem, new EventArgs());
    }
}

In the MainPage.Xaml

   <local:MainTabbar TabItemChanged="MainTabbar_TabItemChanged"/>

In the MainPage.Xaml.cs

 private void MainTabbar_TabItemChanged(object sender, EventArgs e)
    {

        MUXC.TabViewItem tabitem = sender as MUXC.TabViewItem;

        switch (tabitem.Tag) 
        {
            case "123":

                Debug.WriteLine("FirstItemSelectecd");
                //call method for toobar to change content 
                //like setMetCmdbarMode()

                break;

            case "234":

                Debug.WriteLine("SecondItemSelectecd");
                //call method for toobar to change content 
                //like setMetCmdbarMode()

                break;
        }
    }

Update:

Give the toolbar a name in MainPage.Xaml

  <local:Toolbar x:Name="myToolbar" Grid.ColumnSpan="2"/>

Then call it in the MainPage.Xam.cs:

 switch (tabitem.Tag) 
        {
            case "123":

                Debug.WriteLine("FirstItemSelectecd");

                myToolbar.setMetCmdbarMode();
                break;

            case "234":

                Debug.WriteLine("SecondItemSelectecd");
                break;
        }