How do I use a Frame correctly within a SplitView in UWP?

Question

I'm really new to coding in general, and I'm trying to get my head around XAML/UWP/C#.

I'm trying to make an app in Visual Studio and I'm trying to correctly use a Frame within a SplitView/SplitView.Content to load other pages on a button click from my navigation. I've built my pages in grids and whatever I seem to do, the Frame I have is completely off-centre and loads pages off-centre

I'm really new to this and would appreciate any help that could be given, but please forgive my naivety with this - I'm really new and self-taught so I have a lot to learn.

I've tried using grids as well as vertical and horizontal alignments to centre the frame but I'm having no luck at all.

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

Sorry for the above code dump but I really don't know where I'm going wrong

In the second region - Main Panel - I can't get the Frame (x:Name="MainPage_Frame") to centralise the page(s) that it's supposed to load upon click of the buttons in the navigation (first region - Navigation).

The button click works correctly in loading my other test page, but as stated the issue is that the page loads completely off-centre to where I expect the frame to be.

Thanks in advance for your help!

why don't you use the `NAVIGATIONVIEW` for the side menu bar please refer this [link](https://blogs.msmvps.com/bsonnino/2019/02/13/navigationview-in-uwp/) and then add the only frame to open the page after user click on side menu bar items. — , Sep 23 '19 at 11:34
@ketan I tried to add the NavigationView, but I get the following message "NavigationView is not supported in a Windows Universal project." — notriz, Sep 23 '19 at 12:30
add this line `xmlns:Windows10version1803="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract, 6)"` — , Sep 23 '19 at 12:52
When I used the code to load a page, the page can display in the center of the Frame instead of off-center. So can you show a picture about the effect you currently get and another about the effect you want. In addition, can you provide a simple sample that can be reproduced? — Faywang - MSFT, Sep 24 '19 at 09:23

score 0 · Answer 1 · 2019-09-24T05:27:46.767

Your project target version should be 1803. to check the project target version right click on project -> properties -> Application -> Targeting select the target version is 1803 then save and include this line in main page 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>

catch the side menu bar click event a event 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 
                }
            }
        }

I've tried to use the above fixes but I can't get them to fix my issue? Additionally, the NavigationView doesn't function/look as good as the SplitView I was initially using. Any advice? — notriz, Sep 23 '19 at 14:21
you want to create application for windows ? then goes with the navigationview you can style as you want and navigationview is responsive for any window size. [link](https://stackoverflow.com/q/57161553/11362349) you can download the project from above stackoverflow question link project then you will get the actual idea about the navigationview. — , Sep 24 '19 at 06:07

How do I use a Frame correctly within a SplitView in UWP?

1 Answers1