UWP：如何從另一個XAML更改UI？

我有一個 UWP 應用程式：

我的應用命令欄 (XAML 2) 管理 TabView 內容 (XAML 1)。對于不同的選項卡型別，我需要不同的命令欄。現在我在第二個 XAML 中使用了幾個幀，我無法從 XAML 1 更改它。

如何從 XAML 1.cs檔案更改 XAML 2 UI？

謝謝你的幫助。

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：來自方案的 MainTabbar (XAML 1) 和 Toolbar (XAML 2)。

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

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

我需要在 MainTabbar.xaml.cs 中獲取當前選項卡型別（沒關系）。然后在 Toolbar.xaml 框架中更改命令欄。我在 Toolbar.xaml.cs 中為更改框架撰寫了此程序：

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

但我不知道如何從 MainTabbar 類呼叫此函式，或者如何將選項卡型別轉換為 Toolbar 類。

uj5u.com熱心網友回復：

檢查代碼后，您可以嘗試在MainTabbar中創建自定義事件，并在MainPage中處理它。當 TabView 的選中項發生變化時觸發該事件。然后您可以在 MainPage 中收到通知并呼叫方法來更改Toolbar。

以下是詳細步驟：

1. 創建一個TabItemChanged在MainTabbar 頁面上命名的自定義事件，并在 TabView_SelectionChanged 事件中呼叫它。

2. TabItemChanged在MainPage中處理

3. 根據 TabViewItem 在 EventHandler 中隨意更改Toolbar的內容。

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

在MainPage.Xaml

   <local:MainTabbar TabItemChanged="MainTabbar_TabItemChanged"/>

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

更新：

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

標籤：C＃ xml uwp

上一篇：緩慢展開和折疊TreeView節點

下一篇：WinUI中的ListView在重置后維護ListBox文本