0

一般来说，我对编码真的很陌生，我正在努力了解 XAML/UWP/C#。

我正在尝试在 Visual Studio 中制作一个应用程序，并且我正在尝试正确使用 SplitView/SplitView.Content 中的 Frame 来加载其他页面，以便从我的导航中单击按钮。我已经在网格中构建了我的页面，无论我做什么，我拥有的框架都完全偏离中心并且加载页面偏离中心

我对此真的很陌生，并希望能提供任何帮助，但请原谅我的天真 - 我真的很新，而且是自学成才的，所以我有很多东西要学。

我尝试使用网格以及垂直和水平对齐来使框架居中，但我一点运气都没有。

<Grid>
    <SplitView x:Name="MySplitView" DisplayMode="CompactOverlay" IsPaneOpen="False" CompactPaneLength="50" OpenPaneLength="250">
        <!--#region Navigation-->
        <SplitView.Pane>
            <StackPanel Background="#2A2939" Orientation="Vertical">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="50" />
                        <RowDefinition Height="15" />
                        <RowDefinition Height="50" />
                        <RowDefinition Height="50" />
                        <RowDefinition Height="50" />
                        <RowDefinition Height="50" />
                        <RowDefinition Height="50" />
                        <RowDefinition Height="50" />
                        <RowDefinition Height="50" />
                        <RowDefinition Height="50" />
                        <RowDefinition Height="15" />
                    </Grid.RowDefinitions>
                    <!-- Navigation -->
                    <StackPanel Grid.Column="0" Grid.Row="0" Orientation="Horizontal" VerticalAlignment="Center">
                        <Button x:Name="NavigationButton" Height="50" Background="Transparent" Click="Navigation_Click">
                            <Grid Width="250">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30" />
                                    <ColumnDefinition Width="10" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Image Grid.Column="0" Grid.Row="0" Source="ms-appx:///Assets/Icons/navburger-white.png" Width="22" Height="22" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                <TextBlock Grid.Column="2" Grid.Row="0" Margin="0,0,0,5" Text="Navigation" Foreground="#FFF" FontFamily="Segoe UI" FontSize="22" FontWeight="Normal" Typography.Capitals="AllSmallCaps" HorizontalAlignment="Left" VerticalAlignment="Center" TextAlignment="Left" TextWrapping="WrapWholeWords"/>
                            </Grid>
                        </Button>
                    </StackPanel>
                    <StackPanel Grid.Column="0" Grid.Row="1" Orientation="Horizontal" VerticalAlignment="Center">
                        <Line Opacity="0.3" Stroke="#FFF" X1="300" Y1="0" X2="0" Y2="0" StrokeThickness="1"/>
                    </StackPanel>
                    <!-- Home -->
                    <StackPanel Grid.Column="0" Grid.Row="2" Orientation="Horizontal" VerticalAlignment="Center">
                        <Button x:Name="HomeButton" Click="HomeButton_Click" Height="50" Background="Transparent">
                            <Grid Width="250">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30" />
                                    <ColumnDefinition Width="10" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Image Grid.Column="0" Grid.Row="0" Source="ms-appx:///Assets/Icons/navhome-grey.png" Width="18" Height="18" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                <TextBlock Grid.Column="2" Grid.Row="0" Text="Home" Foreground="#ADB2BF" FontFamily="Segoe UI" FontSize="18" FontWeight="Light" Typography.Capitals="AllSmallCaps" HorizontalAlignment="Left" VerticalAlignment="Center" TextAlignment="Left" TextWrapping="WrapWholeWords"/>
                            </Grid>
                        </Button>
                    </StackPanel>
                    <!-- Medical -->
                    <StackPanel Grid.Column="0" Grid.Row="3" Orientation="Horizontal" VerticalAlignment="Center">
                        <Button x:Name="MedicalButton" Height="50" Background="Transparent">
                            <Grid Width="250">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30" />
                                    <ColumnDefinition Width="10" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Image Grid.Column="0" Grid.Row="0" Source="ms-appx:///Assets/Icons/navmedical-grey.png" Width="18" Height="18" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                <TextBlock Grid.Column="2" Grid.Row="0" Text="Medical" Foreground="#ADB2BF" FontFamily="Segoe UI" FontSize="18" FontWeight="Light" Typography.Capitals="AllSmallCaps" HorizontalAlignment="Left" VerticalAlignment="Center" TextAlignment="Left" TextWrapping="WrapWholeWords"/>
                            </Grid>
                        </Button>
                    </StackPanel>
                    <!-- Dental -->
                    <StackPanel Grid.Column="0" Grid.Row="4" Orientation="Horizontal" VerticalAlignment="Center">
                        <Button x:Name="DentalButton" Height="50" Background="Transparent">
                            <Grid Width="250">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30" />
                                    <ColumnDefinition Width="10" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Image Grid.Column="0" Grid.Row="0" Source="ms-appx:///Assets/Icons/navdental-grey.png" Width="18" Height="18" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                <TextBlock Grid.Column="2" Grid.Row="0" Text="Dental" Foreground="#ADB2BF" FontFamily="Segoe UI" FontSize="18" FontWeight="Light" Typography.Capitals="AllSmallCaps" HorizontalAlignment="Left" VerticalAlignment="Center" TextAlignment="Left" TextWrapping="WrapWholeWords"/>
                            </Grid>
                        </Button>
                    </StackPanel>
                    <!-- Mental & Occupational -->
                    <StackPanel Grid.Column="0" Grid.Row="5" Orientation="Horizontal" VerticalAlignment="Center">
                        <Button x:Name="MentalAndOccupationalButton" Height="50" Background="Transparent">
                            <Grid Width="250">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30" />
                                    <ColumnDefinition Width="10" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Image Grid.Column="0" Grid.Row="0" Source="ms-appx:///Assets/Icons/navmental-grey.png" Width="18" Height="18" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                <TextBlock Grid.Column="2" Grid.Row="0" Text="Mental &amp; Occupational" Foreground="#ADB2BF" FontFamily="Segoe UI" FontSize="18" FontWeight="Light" Typography.Capitals="AllSmallCaps" HorizontalAlignment="Left" VerticalAlignment="Center" TextAlignment="Left" TextWrapping="WrapWholeWords"/>
                            </Grid>
                        </Button>
                    </StackPanel>
                    <!-- Rehabilitation -->
                    <StackPanel Grid.Column="0" Grid.Row="6" Orientation="Horizontal" VerticalAlignment="Center">
                        <Button x:Name="RehabilitationButton" Height="50" Background="Transparent">
                            <Grid Width="250">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30" />
                                    <ColumnDefinition Width="10" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Image Grid.Column="0" Grid.Row="0" Source="ms-appx:///Assets/Icons/navrehab-grey.png" Width="18" Height="18" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                <TextBlock Grid.Column="2" Grid.Row="0" Text="Rehabilitation" Foreground="#ADB2BF" FontFamily="Segoe UI" FontSize="18" FontWeight="Light" Typography.Capitals="AllSmallCaps" HorizontalAlignment="Left" VerticalAlignment="Center" TextAlignment="Left" TextWrapping="WrapWholeWords"/>
                            </Grid>
                        </Button>
                    </StackPanel>
                    <!-- Radiology -->
                    <StackPanel Grid.Column="0" Grid.Row="7" Orientation="Horizontal" VerticalAlignment="Center">
                        <Button x:Name="RadiologyButton" Height="50" Background="Transparent">
                            <Grid Width="250">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30" />
                                    <ColumnDefinition Width="10" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Image Grid.Column="0" Grid.Row="0" Source="ms-appx:///Assets/Icons/navradiation-grey.png" Width="18" Height="18" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                <TextBlock Grid.Column="2" Grid.Row="0" Text="Radiology" Foreground="#ADB2BF" FontFamily="Segoe UI" FontSize="18" FontWeight="Light" Typography.Capitals="AllSmallCaps" HorizontalAlignment="Left" VerticalAlignment="Center" TextAlignment="Left" TextWrapping="WrapWholeWords"/>
                            </Grid>
                        </Button>
                    </StackPanel>
                    <!-- Practice Management -->
                    <StackPanel Grid.Column="0" Grid.Row="8" Orientation="Horizontal" VerticalAlignment="Center">
                        <Button x:Name="PracticeManagementButton" Height="50" Background="Transparent">
                            <Grid Width="250">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30" />
                                    <ColumnDefinition Width="10" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Image Grid.Column="0" Grid.Row="0" Source="ms-appx:///Assets/Icons/navpractice-grey.png" Width="18" Height="18" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                <TextBlock Grid.Column="2" Grid.Row="0" Text="Practice Management" Foreground="#ADB2BF" FontFamily="Segoe UI" FontSize="18" FontWeight="Light" Typography.Capitals="AllSmallCaps" HorizontalAlignment="Left" VerticalAlignment="Center" TextAlignment="Left" TextWrapping="WrapWholeWords"/>
                            </Grid>
                        </Button>
                    </StackPanel>
                    <!-- Medicines Management -->
                    <StackPanel Grid.Column="0" Grid.Row="9" Orientation="Horizontal" VerticalAlignment="Center">
                        <Button x:Name="MedicinesManagementButton" Height="50" Background="Transparent">
                            <Grid Width="250">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30" />
                                    <ColumnDefinition Width="10" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Image Grid.Column="0" Grid.Row="0" Source="ms-appx:///Assets/Icons/navmedicine-grey.png" Width="18" Height="18" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                <TextBlock Grid.Column="2" Grid.Row="0" Text="Medicines Management" Foreground="#ADB2BF" FontFamily="Segoe UI" FontSize="18" FontWeight="Light" Typography.Capitals="AllSmallCaps" HorizontalAlignment="Left" VerticalAlignment="Center" TextAlignment="Left" TextWrapping="WrapWholeWords"/>
                            </Grid>
                        </Button>
                    </StackPanel>
                    <StackPanel Grid.Column="0" Grid.Row="10" Orientation="Horizontal" VerticalAlignment="Center">
                        <Line Opacity="0.3" Stroke="#FFF" X1="300" Y1="0" X2="0" Y2="0" StrokeThickness="1"/>
                    </StackPanel>
                </Grid>
            </StackPanel>
        </SplitView.Pane>
        <!--#endregion-->
        <!--#region Main Panel-->
        <SplitView.Content>
            <Frame x:Name="MainPage_Frame" HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalAlignment="Center" VerticalContentAlignment="Center">

            </Frame>
        </SplitView.Content>
        <!--#endregion-->
    </SplitView>
</Grid>

抱歉上面的代码转储，但我真的不知道我哪里出错了

在第二个区域 - 主面板 - 我无法让框架 (x:Name="MainPage_Frame") 集中在单击导航中的按钮时应该加载的页面（第一个区域 - 导航） .

单击按钮在加载我的其他测试页面时可以正常工作，但如前所述，问题是页面加载完全偏离了我期望框架所在的位置。

在此先感谢您的帮助！

4

1 回答 1

0

您的项目目标版本应该是 1803。要检查项目目标版本，请右键单击项目 -> 属性 -> 应用程序 -> 目标选择目标版本为 1803，然后保存并将此行包含在主页中xmlns:Windows10version1803="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract, 6)"

    <Page
    x:Class="stackoverflowquestions.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:stackoverflowquestions"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:Windows10version1803="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract, 6)"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Grid>
            <!--Navigation View Style-->
            <Grid.Resources>
                <SolidColorBrush x:Key="NavigationViewDefaultPaneBackground" Color="#293857"/>
                <SolidColorBrush x:Key="NavigationViewItemBackground" Color="#00bff3"/>
                <SolidColorBrush x:Key="NavigationViewItemForeground" Color="White"/>

                <SolidColorBrush x:Key="NavigationViewItemBackgroundPointerOver" Color="#d6df27"/>
                <SolidColorBrush x:Key="NavigationViewItemForegroundPointerOver" Color="White"/>

                <SolidColorBrush x:Key="NavigationViewItemForegroundPressed" Color="White"/>
                <SolidColorBrush x:Key="NavigationViewItemBackgroundPressed" Color="#d6df27"/>

                <SolidColorBrush x:Key="NavigationViewItemForegroundSelectedPressed" Color="White"/>
                <SolidColorBrush x:Key="NavigationViewItemBackgroundSelectedPressed" Color="#00bff3"/>

                <SolidColorBrush x:Key="NavigationViewItemBackgroundSelected" Color="#00bff3"/>
                <SolidColorBrush x:Key="NavigationViewItemForegroundSelected" Color="White"/>

                <SolidColorBrush x:Key="NavigationViewItemBackgroundSelectedPointerOver" Color="#00bff3"/>
                <SolidColorBrush x:Key="NavigationViewItemForegroundSelectedPointerOver" Color="White"/>
            </Grid.Resources>
            <NavigationView x:Name="UC_NavigationViewControl"  Windows10version1803:IsBackButtonVisible="Collapsed" IsSettingsVisible="False"  ItemInvoked="UC_NavigationViewControl_ItemInvoked" Margin="0,0,860,0" TabIndex="1">
                <NavigationView.MenuItems>
                    <NavigationViewItem x:Name="NavUser" Content="Users" Tag="Users" Background="#293857" FontSize="16"  TabIndex="2">
                        <NavigationViewItem.Icon>
                            <BitmapIcon  UriSource="Assets/LockScreenLogo.scale-200.png"/>
                        </NavigationViewItem.Icon>
                    </NavigationViewItem>

                    <!--add your menu like mediacl,dental-->


                </NavigationView.MenuItems>
            </NavigationView>
        </Grid>
        <Frame x:FieldModifier="public" ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.VerticalScrollMode="Enabled" x:Name="testFrame" Margin="55,0,0,0">
            <Grid >
                <!--add your menu on dashboard i.e mediacl,dental using image control-->

            </Grid>

        </Frame>
    </Grid>
</Page>

捕捉侧边菜单栏点击事件 UC_NavigationViewControl_ItemInvoked


        //On Navigation Change
        private  void UC_NavigationViewControl_ItemInvoked(Windows.UI.Xaml.Controls.NavigationView sender, NavigationViewItemInvokedEventArgs args)
        {
            string ItemContent = args.InvokedItem.ToString();

            if (ItemContent != null)
            {
                switch (ItemContent)
                {
                    case "Users":
                        this.testFrame.Navigate(typeof(BlankPage1 )); 
                        break;
                        // your case 
                }
            }
        }
于 2019-09-23T12:59:04.250 回答