Why is the Image not showing on a view.xaml when it is removed from NavigationView.PaneHeader from M-CodePudding

I don't understand why these are connected. I removed the Pane header image and when I remove this image, it gets removed from the Page as well (even though the <Image source.../> still exists in HomePageView.xaml. I don't understand how and why they are connected?

Image showing when Pane header image code exists

Same code snipped and program however only deleted 3 lines which should only remove the pane header image?

The Style is defined in App.xaml which can be seen here:

<Application
    x:Class="Ankara_Online.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Ankara_Online">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Light">
                    <Style x:Key="Logo" TargetType="Image">
                        <Setter Property="Source" Value="Assets/TRvACC/trvacc_logo_transparent.png"/>
                    </Style>
                    <Style x:Key="defaultTextStyle" TargetType="TextBlock">
                        <Setter Property="Foreground" Value="#000000" />
                        <Setter Property="FontFamily" Value="Poppins" />
                        <Setter Property="FontWeight" Value="Normal" />
                    </Style>
                </ResourceDictionary>
                <ResourceDictionary x:Key="Dark">
                    <Style x:Key="Logo" TargetType="Image">
                        <Setter Property="Source" Value="Assets/TRvACC/trvacc_logo_transparent_2.png"/>
                    </Style>
                    <Style x:Key="defaultTextStyle" TargetType="TextBlock">
                        <Setter Property="Foreground" Value="#FFFFFF" />
                        <Setter Property="FontFamily" Value="Poppins" />
                        <Setter Property="FontWeight" Value="Normal" />
                    </Style>
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
            </ResourceDictionary.MergedDictionaries>
            <!-- Other app resources here -->
            <!--directories etc. shared resoruces-->
        </ResourceDictionary>
    </Application.Resources>
</Application>

UPDATE

I was trying to understand why this is happening and found out that it's not related to Style. In fact, even if I manually give source to Image it still does not show.

CodePudding user response：

At first, it seemed like the issue seemed to be related to NavigationView.PaneHeader image to be present or not. However, upon further investigation, I found out that this was not the issue. The issue was due to relative vs absolute path when addressing an image and passing it as Image Source. Upon checking the Live Property Explorer, I found out that the value for UriSource for Image was wrong. When declaring the image path by doing

<Style x:Key="HeaderLogo" TargetType="Image">
    <Setter Property="Source" Value="Assets/Images/logo.png" />
</Style>

When a Page or Frame is rendered within ./Views folder, the UriSource value was being converted to ms-appx:///Views/Assets\Images\logo.png which is not correct. The correct format should be without the /Views in the beginning of the path. To fix this, I changed the Value to native Uri:

<Style x:Key="TRvACC_LOGO" TargetType="Image">
     <Setter Property="Source" Value="ms-appx:///Assets/Images/logo.png" />
</Style>

Which resulted in success! Image is being displayed correctly.