將控制器添加到所有頁面UWP

Question

如何將UI控制器添加到應用程序的所有頁面？ 例如，是否在所有頁面的窗格中都具有相同的SplitView控制器和導航菜單，而無需復制其xaml代碼？ 或者也許以某種方式更改App.xaml？

或者，作為第二個選項，是否可以創建一個包含SplitView的UserControl並將此頁面上的所有其他視圖放入其中？ 我的意思是，如何將視圖放入xaml（甚至代碼）的UserControl中？

Answer 1

聽起來您正在追尋傑里•尼克松（Jerry Nixon）在本文中建議的東西。

基本思想是，您無需創建托管所有應用程序內容的Frame控件，而是創建一個“ Shell”（在本文中，它是由SplitView制成的，但實際上可能是任何東西），其中包含一些內容擁有一個， 以及一個Frame控件（該控件將托管您的其余內容）。

Answer 2

創建自UserControl類派生並包含根Frame自定義RootControl

    <SplitView DisplayMode="CompactOverlay">
      <SplitView.Pane>
        <StackPanel>
            <AppBarButton Icon="Home"
                          Width="50"
                          MinWidth="50"
                          Click="OnHomeClicked"
                          />
            <AppBarButton Icon="Shop"
                          Width="50"
                          MinWidth="50"
                          Click="OnShopClicked"/>
            <AppBarButton Icon="Setting"
                          MinWidth="50"
                          Width="50"
                          Click="OnSettingsClicked"/>
        </StackPanel>
      </SplitView.Pane>
      <SplitView.Content>
        <Grid>
            <Frame x:Name="rootFrame"/>

            <!--Put your hamburger button here-->

        </Grid>
      </SplitView.Content>
    </SplitView>

重寫OnLauched ：

    protected override void OnLaunched(LaunchActivatedEventArgs e)
    {

        var rootControl = Window.Current.Content as RootControl;

        if (rootControl == null)
        {
            // Create a Frame to act as the navigation context and navigate to the first page
            rootControl = new RootControl();

            rootControl.RootFrame.NavigationFailed += OnNavigationFailed;

            if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
            {
                //TODO: Load state from previously suspended application
            }

            // Place the frame in the current Window
            Window.Current.Content = rootControl;
        }

        if (rootControl.RootFrame.Content == null)
        {
            // When the navigation stack isn't restored navigate to the first page,
            // configuring the new page by passing required information as a navigation
            // parameter
            rootControl.RootFrame.Navigate(typeof(MainPage), e.Arguments);
        }
        // Ensure the current window is active
        Window.Current.Activate();
    }

並且您可以從代碼隱藏或ViewModel管理您的操作以進行導航和其他操作

    public sealed partial class RootControl : UserControl
    {
        private Type currentPage;

        public RootControl()
        {
            this.InitializeComponent();
            RootFrame.Navigated += OnNavigated;
        }

        private void OnNavigated(object sender, Windows.UI.Xaml.Navigation.NavigationEventArgs e)
        {
            currentPage = e.SourcePageType;
        }

        public Frame RootFrame
        {
            get
            {
                return rootFrame;
             }
        }

        private void OnHomeClicked(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            Navigate(typeof(MainPage));
        }

        private void OnShopClicked(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
             Navigate(typeof(StorePage));
        }

        private void OnSettingsClicked(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
             Navigate(typeof(SettingsPage));
        }

        private void Navigate(Type pageSourceType)
        {
            if (currentPage != pageSourceType)
            {
                RootFrame.Navigate(pageSourceType);
            }
        }
    }

下載樣本並查看其工作方式