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

我有一个UWP应用程序：

我的应用程序命令栏（XAML 2）管理TabView内容（XAML 1）。我需要为不同的选项卡类型使用不同的命令栏。现在我在第二个XAML中使用了几个框架，并且无法从XAML 1更改它。
如何从XAML 1 .cs文件更改XAML 2用户界面？
谢谢你的帮助。
UPD：我有主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>

并且在这个XAML中有另外两个XAML：方案中的主选项卡栏（XAML 1）和工具栏（XAML 2）。
这是工具栏.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>

这是主选项卡栏：

<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>

我需要在MainTabbar.xaml.cs中获取当前选项卡类型（没关系）。然后在Toolbar.xaml框架中更改命令栏。我在Toolbar.xaml.cs中编写了更改框架的此过程：

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

但是我不知道如何从MainTabbar类中调用这个函数，也不知道如何将选项卡类型转换为Toolbar类。

检查代码后，可以尝试在MainTabbar中创建一个自定义事件，在MainPage中进行处理，当TabView的选中项发生变化时触发该事件，然后在MainPage中得到通知，并调用方法更改Toolbar。
以下是详细步骤：
1.在MainTabbar页面上创建一个名为TabItemChanged的自定义事件，并在TabView_SelectionChanged事件中调用它。
1.处理主页中的TabItemChanged
1.根据TabViewItem在EventHandler中更改Toolbar的内容。

主选项卡栏中的代码：

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

在主页中.Xaml

<local:MainTabbar TabItemChanged="MainTabbar_TabItemChanged"/>

在主页.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;
        }
    }

更新日期：

在MainPage.xaml中给予工具栏命名

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

然后在MainPage.Xam.cs中调用它：

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

                Debug.WriteLine("FirstItemSelectecd");

                myToolbar.setMetCmdbarMode();
                break;

            case "234":

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

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

1条答案

相关问题

热门标签

最新问答