Home > Software design >  Why is my `contentFrame` showing black even though the NavigationView pane shows it's active?
Why is my `contentFrame` showing black even though the NavigationView pane shows it's active?

Time:11-18

I have my NavigationView Pane as top and I have setup the pane. I've also setup the code so that when NavigationView is loaded, a default tab is navigated to. However, contentFrame is not being rendered. Since this is my first time using WinUI 3 SDK, I think I'm doing something wrong however I still want to ask, why is my contentFrame black and not rendering anything?

Image of the program not rendering

MainWindow.xaml

<Window
    x:Class="Ankara_Online.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:Ankara_Online"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <StackPanel Orientation="Vertical">
        <NavigationView
            x:Name="_navigationView"
            AlwaysShowHeader="False"
            ExpandedModeThresholdWidth="500"
            Header="Header"
            IsBackButtonVisible="Collapsed"
            IsBackEnabled="False"
            IsSettingsVisible="False"
            IsTabStop="False"
            ItemInvoked="NavigationView_ItemInvoked"
            Loaded="NavigationView_Loaded"
            PaneDisplayMode="Top"
            PaneTitle="navigationPane"
            SelectionFollowsFocus="Enabled">
            <NavigationView.Resources>
                <SolidColorBrush
                    x:Key="NavigationViewTopPaneBackground"
                    Color="#195caa" />
            </NavigationView.Resources>
            <NavigationView.PaneHeader>
                <Image
                    Height="40"
                    Margin="10,0,10,0"
                    Style="{ThemeResource HeaderLogo}" />
            </NavigationView.PaneHeader>
            <NavigationView.MenuItems>
                <NavigationViewItem
                    x:Name="homeViewItem"
                    Content="Home"
                    FontFamily="Poppins"
                    FontSize="16"
                    FontWeight="Normal"
                    Tag="homePageView">
                    <NavigationViewItem.Icon>
                        <ImageIcon Source="./Assets/Icons/control-tower.png" />
                    </NavigationViewItem.Icon>
                </NavigationViewItem>
                <NavigationViewItemSeparator />
                <NavigationViewItem
                    x:Name="softwareSectorFileViewItem"
                    Content="Applications and Sector Files"
                    FontFamily="Poppins"
                    FontSize="16"
                    FontWeight="Normal"
                    Tag="softwareSectorFileView">
                    <NavigationViewItem.Icon>
                        <ImageIcon Source="./Assets/Icons/application.png" />
                    </NavigationViewItem.Icon>
                </NavigationViewItem>
                <NavigationViewItemSeparator />
                <NavigationViewItem
                    x:Name="DocumentsViewItem"
                    Content="Documents"
                    FontFamily="Poppins"
                    FontSize="16"
                    FontWeight="Normal"
                    Tag="DocumentsView">
                    <NavigationViewItem.Icon>
                        <ImageIcon Source="./Assets/Icons/document.png" />
                    </NavigationViewItem.Icon>
                </NavigationViewItem>
                <NavigationViewItemSeparator />
                <NavigationViewItem
                    x:Name="NOTAMSViewItem"
                    Content="NOTAMs"
                    FontFamily="Poppins"
                    FontSize="16"
                    FontWeight="Normal"
                    Tag="NOTAMSViews">
                    <NavigationViewItem.Icon>
                        <ImageIcon Source="./Assets/Icons/warning.png" />
                    </NavigationViewItem.Icon>
                </NavigationViewItem>
                <NavigationViewItemSeparator />
                <NavigationViewItem
                    x:Name="SettingsViewItem"
                    Content="Settings"
                    FontFamily="Poppins"
                    FontSize="16"
                    FontWeight="Normal"
                    Tag="SettingsView">
                    <NavigationViewItem.Icon>
                        <ImageIcon Source="./Assets/Icons/settings.png" />
                    </NavigationViewItem.Icon>
                </NavigationViewItem>
            </NavigationView.MenuItems>

            <NavigationView.PaneFooter>
                <StackPanel
                    x:Name="FooterStackPanel"
                    Orientation="Vertical"
                    Visibility="Visible">
                    <NavigationViewItem
                        AutomationProperties.Name="download"
                        Content="Downloads"
                        FontFamily="Poppins"
                        FontWeight="Normal">
                        <NavigationViewItem.Icon>
                            <ImageIcon Source="./Assets/Icons/download.png" />
                        </NavigationViewItem.Icon>
                    </NavigationViewItem>
                </StackPanel>
            </NavigationView.PaneFooter>
            <Grid>
                <Frame
                    x:Name="contentFrame"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Top"
                    NavigationFailed="contentFrame_NavigationFailed" />
            </Grid>
        </NavigationView>
    </StackPanel>
</Window>

MainWindow.xaml.cs

using Ankara_Online.Views;
using Microsoft.UI;
using Microsoft.UI.Windowing;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Navigation;
using System;
using System.Diagnostics;
using System.Linq;
using Windows.UI.ApplicationSettings;

namespace Ankara_Online
{
    /// <summary>
    /// An empty window that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();

            IntPtr hWnd = WinRT.Interop.WindowNative.GetWindowHandle(this);
            var windowId = Win32Interop.GetWindowIdFromWindow(hWnd);
            var appWindow = AppWindow.GetFromWindowId(windowId);
            appWindow.Resize(new Windows.Graphics.SizeInt32 { Width = 1200, Height = 900 });
            Title = "Ankara Online";
            appWindow.SetIcon("Assets\\trvacc_icon_transparent.ico");

            this.contentFrame = new Frame();
            contentFrame.Navigate(typeof(HomePageView));
        }

        private void NavigationView_ItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)
        {
            var item = sender.MenuItems.OfType<NavigationViewItem>().First(x => (string)x.Content == (string)args.InvokedItem);
            NavigationView_Navigate(item as NavigationViewItem);
        }

        private void NavigationView_Navigate(NavigationViewItem item)
        {
            switch (item.Tag)
            {
                case "homePageView":
                    contentFrame.Navigate(typeof(HomePageView));
                    break;

                case "softwareSectorFileView":
                    contentFrame.Navigate(typeof(SectorFilesView));
                    break;

                case "DocumentsView":
                    contentFrame.Navigate(typeof(DocumentsView));
                    break;

                case "NOTAMSViews":
                    contentFrame.Navigate(typeof(NotamsView));
                    break;

                case "SettingsView":
                    contentFrame.Navigate(typeof(SettingsView));
                    break;
            }
        }

        private void contentFrame_NavigationFailed(object sender, NavigationFailedEventArgs e)
        {
            throw new Exception("Failed to load page "   e.SourcePageType.FullName);
        }

        private void NavigationView_Loaded(object sender, RoutedEventArgs args)
        {
            this.contentFrame.Navigate(typeof(HomePageView));
        }
    }
}

HomePageView.xaml

<Page
    x:Class="Ankara_Online.Views.HomePageView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:Ankara_Online.Views"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    NavigationCacheMode="Required"
    mc:Ignorable="d">
    <Frame>
        <Grid
            ColumnDefinitions="150,*"
            RowDefinitions="*">
            <Image
                Grid.Row="0"
                Grid.Column="0"
                Source="Assets/test_image.png" />
            <TextBlock
                Grid.Row="1"
                Grid.Column="1"
                FontFamily="Poppins"
                FontSize="35"
                FontWeight="Black"
                Text="TEST" />
        </Grid>
    </Frame>
</Page>

CodePudding user response:

You are creating a new Frame and doing navigations on it. Remove this line in the MainWindow constructor.

//this.contentFrame = new Frame();
  • Related