带有 NavigationView 的 UWP/XAML 内容视图答案

【问题标题】：UWP/XAML Content View with NavigationView带有 NavigationView 的 UWP/XAML 内容视图
【发布时间】：2019-01-27 18:18:00
【问题描述】：

我需要一些帮助来获取内容和导航以进行合作。我目前有以下：

<Page
    x:Class="BS.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:Microsoft.UI.Xaml.Controls"
    xmlns:local="using:BS"
    xmlns:mux="using:Windows.UI.Xaml.Controls"
    xmlns:muxcontrols="using:Microsoft.UI.Xaml.Controls"
    RequestedTheme="Dark"   
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Page.Resources>

    </Page.Resources>
    <Grid>
        <Grid.Resources>
            <ResourceDictionary>
                <ResourceDictionary.ThemeDictionaries>
                    <ResourceDictionary x:Key="Dark">
                        <SolidColorBrush x:Key="DarkBrush" Color="{StaticResource SystemBaseHighColor}"/>
                        <AcrylicBrush x:Key="NavigationViewDefaultPaneBackground"
                          BackgroundSource="Backdrop"
                          TintColor="#262626"
                          TintOpacity="0.8"
                          FallbackColor="#262626"/>
                    </ResourceDictionary>
                </ResourceDictionary.ThemeDictionaries>
            </ResourceDictionary>
        </Grid.Resources>

        <mux:NavigationView IsSettingsVisible="False" 
                            PaneTitle=" BSM "                            
                            x:Name="NavView"                             
                            IsBackButtonVisible="Collapsed" 
                            PaneDisplayMode="LeftMinimal" 
                            AlwaysShowHeader="True"
                            Header="  "                            
                            Background="{StaticResource CustomAcrylicDarkBackground}">

            <mux:NavigationView.MenuItems>
                <StackPanel Orientation="Horizontal" UseLayoutRounding="False">
                    <AppBarButton Icon="Page2" Margin="0, 2, 1, 0" Tag="New_Sheet" HorizontalAlignment="Center" Width="56.5" Height="56.5"/>
                    <AppBarButton Icon="OpenFile" Margin="1, 2, 0, 0" Tag="Open_Sheet" HorizontalAlignment="Center" Width="56.5" Height="56.5"/>
                    <AppBarButton Icon="Save" Margin="1, 2, 0, 0" Tag="Save_Sheet" HorizontalAlignment="Center" Width="56.5" Height="56.5"/>
                    <AppBarButton Icon="Setting" Margin="1, 2, 0, 0" Tag="Settings_Sheet" HorizontalAlignment="Center" Width="56.5" Height="56.5"/>
                    <AppBarButton Icon="Calculator" Margin="1, 2, 0, 0" Tag="Calculator_Open" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press"/>
                </StackPanel>

                <mux:NavigationViewItemSeparator/>
                <mux:NavigationViewItem Name="HItem" 
                                        Content="H" 
                                        Tag="H_Page" 
                                        FontSize="22" 
                                        HorizontalAlignment="Stretch" 
                                        FontWeight="Bold" 
                                        Foreground="#b880fc"/>
                <NavigationViewItemSeparator/>

                <mux:NavigationViewItem Name="OItem" 
                                        Content="O" 
                                        Tag="O_Page" 
                                        FontSize="22" 
                                        HorizontalAlignment="Stretch" 
                                        FontWeight="Bold" 
                                        Foreground="#b880fc"/>

                <mux:NavigationViewItem Name="BItem" 
                                        Content="B" 
                                        Tag="B_Page" 
                                        FontSize="22" 
                                        HorizontalAlignment="Stretch" 
                                        FontWeight="Bold" 
                                        Foreground="#b880fc"/>

                <mux:NavigationViewItem Name="PItem" 
                                        Content="P" 
                                        Tag="BPayer_Page" 
                                        FontSize="22" 
                                        HorizontalAlignment="Stretch" 
                                        FontWeight="Bold" 
                                        Foreground="#b880fc"/>

                <mux:NavigationViewItem Name="TsItem" 
                                        Content="TS" 
                                        Tag="Ts_Page" 
                                        FontSize="22" 
                                        HorizontalAlignment="Stretch" 
                                        FontWeight="Bold" 
                                        Foreground="#b880fc"/>

                <mux:NavigationViewItem Name="PDItem" 
                                        Content="PD" 
                                        Tag="PD_Page" 
                                        FontSize="22" 
                                        HorizontalAlignment="Stretch" 
                                        FontWeight="Bold" 
                                        Foreground="#b880fc"/>
            </mux:NavigationView.MenuItems>

            <NavigationView.PaneFooter>
                <Button x:Name="ChangeUser" Style="{StaticResource TextBlockButtonStyle}" Foreground="#b880fc" >
                    <StackPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
                        <SymbolIcon Symbol="Contact" Margin="8"/>
                        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Right">      
                                    Change User
                        </TextBlock>
                    </StackPanel>
                </Button>
            </NavigationView.PaneFooter>
        </mux:NavigationView>
        <Grid>
            <TextBlock>
                Boo, im a text block
            </TextBlock>
        </Grid>       
    </Grid>
</Page>

我遇到的问题是文本块与导航菜单重叠。我试图让它表现得好像它是 ContentPanel。我对此还是很陌生，所以我还在继续努力。有人介意帮我创建一个不与导航视图按钮重叠的非常基本的“Hello World”文本框吗？

【问题讨论】：

标签： xaml uwp uwp-xaml

【解决方案1】：

我看到你的问题，你犯了一个很常见的错误，包含文本块的网格应该在 NavigationView 控件内，如果你在外面，请尝试以下代码。

 <--all code above is the same-->
<NavigationView.PaneFooter>
            <Button x:Name="ChangeUser" Style="{StaticResource TextBlockButtonStyle}" Foreground="#b880fc" >
                <StackPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
                    <SymbolIcon Symbol="Contact" Margin="8"/>
                    <TextBlock VerticalAlignment="Center" HorizontalAlignment="Right">      
                                Change User
                    </TextBlock>
                </StackPanel>
            </Button>
        </NavigationView.PaneFooter>

                <Grid>
                    <TextBlock>
                        Boo, im a text block
                    </TextBlock>
                </Grid>
            </mux:NavigationView>
        </Grid>
    </Page>

【讨论】：