I'm trying to make a navigation view with MUXC in my app but is donesn't work:
Error XDG0062: Failed to set "Content".
XAML Code:
<Page
x:Class="XizSoft.Views.Pages.TestPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:XizSoft.Views.Pages"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<muxc:NavigationView x:Name="nvSample9"
Header="This is Header Text"
PaneDisplayMode="Left"
IsSettingsVisible="False">
<muxc:NavigationView.MenuItems>
<muxc:NavigationViewItem Content="Browse" Tag="SamplePage1" Icon="Library" />
<muxc:NavigationViewItem Content="Track an Order" Tag="SamplePage2" Icon="Map" />
<muxc:NavigationViewItem Content="Order History" Tag="SamplePage3" Icon="Tag" />
</muxc:NavigationView.MenuItems>
<muxc:NavigationView.FooterMenuItems>
<muxc:NavigationViewItem Content="Account" Tag="SamplePage4" Icon="Contact" />
<muxc:NavigationViewItem Content="Your Cart" Tag="SamplePage5" Icon="Shop" />
<muxc:NavigationViewItem Content="Help" Tag="SamplePage5" Icon="Help" />
</muxc:NavigationView.FooterMenuItems>
<Frame x:Name="contentFrame9" />
</muxc:NavigationView>
</Page>
Target: Universal Windows version 2004
Min. Target: Universal Windows version 1809
Does anyone knows how to solve this? Is this a problem in my code or in the platform?
Normally this is not required but have you tried to encapsulate your frame in the Content property of your NavigationView ?
<muxc:NavigationView.Content>
<Frame x:Name="contentFrame9" />
</muxc:NavigationView.Content>
With the Target and MinTarget SDK, my app successfully display your page :
I have referenced the last version of Microsoft.UI.Xaml library :
Add following xaml code into App.xaml will solve your problem.
<Application.Resources>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"/>
</Application.Resources>
Related
The default appearance of the NavigationView in WinUI3 Gallery or an app created with a template studio has a space at the top. However, it looks different in apps created with Visual Studio default templates.I don't think it's controlled by the ViewModel or anything else. Why does it look different?
<!--In Template studio or WinUI3 Gallery-->
<Page>
<Grid>
<NavigationView PaneDisplayMode="LeftCompact"/>
</Grid>
</Page>
<!--In My App created with Visual Studio default templates-->
<Page>
<Grid>
<NavigationView PaneDisplayMode="LeftCompact"/>
</Grid>
</Page>
In Template studio or WinUI3 Gallery
In My App created with Visual Studio default templates
Even if you modify the ShellPage of an app created with a Template Studio as follows, there is still a difference in appearance.
public sealed partial class ShellPage : Page
{
public ShellPage()
{
InitializeComponent();
}
}
<Page
x:Class="TemplateStudioApp.Views.ShellPage"
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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006">
<NavigationView PaneDisplayMode="LeftCompact"/>
</Page>
That space at the top is actually the AppTitleBar. This code should create the same look.
App.xaml
<Application
x:Class="WinUI3App.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WinUI3App">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
<!-- Other merged dictionaries here -->
</ResourceDictionary.MergedDictionaries>
<!-- Other app resources here -->
<SolidColorBrush
x:Key="WindowCaptionBackground"
Color="Transparent" />
<SolidColorBrush
x:Key="WindowCaptionBackgroundDisabled"
Color="Transparent" />
<Thickness x:Key="NavigationViewContentMargin">0,48,0,0</Thickness>
</ResourceDictionary>
</Application.Resources>
</Application>
MainWindow.xaml.cs
<Window
x:Class="WinUI3App.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:WinUI3App"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid>
<Grid
x:Name="AppTitleBar"
Height="{Binding ElementName=NavigationViewControl, Path=CompactPaneLength}"
VerticalAlignment="Top"
Canvas.ZIndex="1"
IsHitTestVisible="True">
<Image
Width="16"
Height="16"
HorizontalAlignment="Left"
Source="/Assets/WindowIcon.ico" />
<TextBlock
x:Name="AppTitleBarText"
Margin="28,0,0,0"
VerticalAlignment="Center"
Style="{StaticResource CaptionTextBlockStyle}"
TextWrapping="NoWrap" />
</Grid>
<NavigationView
x:Name="NavigationViewControl"
Canvas.ZIndex="0"
DisplayModeChanged="NavigationView_DisplayModeChanged"
ExpandedModeThresholdWidth="1280"
IsBackButtonVisible="Visible"
IsSettingsVisible="True" />
</Grid>
</Window>
MainWindow.xaml.cs
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
namespace WinUI3App;
public sealed partial class MainWindow : Window
{
public MainWindow()
{
this.InitializeComponent();
ExtendsContentIntoTitleBar = true;
SetTitleBar(this.AppTitleBar);
}
private void NavigationView_DisplayModeChanged(NavigationView sender, NavigationViewDisplayModeChangedEventArgs args)
{
AppTitleBar.Margin = new Thickness()
{
Left = sender.CompactPaneLength * (sender.DisplayMode == NavigationViewDisplayMode.Minimal ? 2 : 1),
Top = AppTitleBar.Margin.Top,
Right = AppTitleBar.Margin.Right,
Bottom = AppTitleBar.Margin.Bottom
};
}
}
<Thickness x:Key="NavigationViewContentGridBorderThickness">1,1,0,0</Thickness>
<CornerRadius x:Key="NavigationViewContentGridCornerRadius">8,0,0,0</CornerRadius>
<Thickness x:Key="NavigationViewContentMargin">0,48,0,0</Thickness>
<Thickness x:Key="NavigationViewHeaderMargin">56,34,0,0</Thickness>
<Thickness x:Key="NavigationViewPageContentMargin">56,24,56,0</Thickness>
In Template Studio, these resources from Styles/Thickness.xaml were the solution.
I have an issue with the NavigationView control in my UWP app. When I set the IsPaneToggleButtonVisible to false, my PaneHeader collapses too. Offically this bug was solved, am I doing something wrong?
<NavigationView PaneDisplayMode="Left" IsPaneToggleButtonVisible="False" IsBackButtonVisible="Collapsed" OpenPaneLength="200" IsSettingsVisible="False" Height="923">
<NavigationView.PaneHeader>
<Image x:Name="Header" Source="/Assets/Header.png" Stretch="UniformToFill" Margin="0,0,0,0" HorizontalAlignment="Left" Width="216" Height="53"/>
</NavigationView.PaneHeader>
<NavigationView/>
Based on this thread, it mentions
This issue was addressed in #1083, which has now been successfully
released as Microsoft.UI.Xaml v2.2.190731001-prerelease.
This means the bug has solved in the Windows UI Library version of NavigationView, so if you want to show your PaneHeader, you need to install the Microsoft.UI.Xaml nuget package and then add <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"/> to your Application.Resources.
.App.xaml:
<Application>
<Application.Resources>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
</Application.Resources>
</Application>
.MainPage.xaml:
<Page
......
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
>
<Grid>
<muxc:NavigationView PaneDisplayMode="Left" IsPaneToggleButtonVisible="False" IsBackButtonVisible="Collapsed" OpenPaneLength="200" IsSettingsVisible="False" Height="923">
<muxc:NavigationView.PaneHeader>
<Image x:Name="Header" Source="Assets/StoreLogo.png" Stretch="UniformToFill" Margin="0,0,0,0" HorizontalAlignment="Left" Width="53" Height="53"/>
</muxc:NavigationView.PaneHeader>
</muxc:NavigationView>
</Grid>
</Page>
I can't seem to get a DynamicResource working correctly.
Here's the XAML in App.xml:
<Application.Resources>
<ResourceDictionary>
<Thickness x:Key ="DefaultInsets"
Bottom="4"
Top ="4"
Left ="8"
Right ="8" />
</ResourceDictionary>
</Application.Resources>
And here's what I'm trying to do inside another file's ContentView:
<StackLayout
VerticalOptions="Center"
HeightRequest="225"
Margin="{DynamicResource DefaultInsets}" >
<Entry
x:Name="nameControl"
Placeholder="Full Name"
Margin="{DynamicResource DefaultInsets}"
/>
<Entry
x:Name="passwordControl"
IsPassword="True"
Placeholder="Password"
Margin="{DynamicResource DefaultInsets}" />
</StackLayout>
It seems like this should make consistent insets for the StackLayout from the ContentView, and for the Entry fields from the StackLayout. But I don't see any of that.
What have I done wrong?
Update : I have also tried this with StaticResource, and still no luck.
I use following type with ResourceDictionary. For distinguish, I set the top_margin to 40, here is my screenshot.
Here is my ResourceDictionary.
<Application.Resources>
<ResourceDictionary>
<OnPlatform x:Key="OuterPadding" x:TypeArguments="Thickness">
<On Platform="Android">8 ,40,8,4</On>
<On Platform="iOS">20</On>
<On Platform="WinPhone">24</On>
</OnPlatform>
<!-- left, top, right, and bottom-->
</ResourceDictionary>
</Application.Resources>
Here is my layout.
<StackLayout
VerticalOptions="Center"
HeightRequest="225"
Margin="{DynamicResource OuterMargin}" >
<Entry
x:Name="nameControl"
Placeholder="Full Name"
Margin="{DynamicResource OuterMargin}"
/>
<Entry
x:Name="passwordControl"
IsPassword="True"
Placeholder="Password"
Margin="{DynamicResource OuterMargin}" />
</StackLayout>
Update
I found you layout issue is related to the VerticalOptions="Center" in the StackLayout(If you set the VerticalOptions="Center", then set the margin value is not work).
If I delete it and use StaticResource.
Here is running screenshot(For testing, I change the value of margin top to 20)
Other answers may be valid for some people, but in the end here's what I was doing wrong:
InitializeComponent() was never getting called inside App.xaml.cs.
I had an if-then statement that was always hitting a return before ever getting to InitializeComponent().
When that doesn't get called, App.xaml is inaccessible to the rest of the app, and nothing defined there is available as a DynamicResource.
So I moved InitializeComponent() to happen before the if-then statement, and now it all works like gangbusters.
I hope this helps someone!
How do I create an application level resources in XAML? I'm developing a Windows Phone 8 app btw.
Below I have a rectangle, I want to create a resources that can be used to change the colour of the rectangle when tapped:
<Rectangle Fill="#FFF4F4F5"
HorizontalAlignment="Left"
Height="100"
Stroke="Black"
VerticalAlignment="Top"
Width="100"
x:Name="pad1"
Tap="pad1_tap"
/>
I have read some similar posts that say to use:
<Application.Resources>
<!-- Resources Here !-->
</Application.Resources>
... but there is no object under the name 'Application' within my application. When trying to use 'Application.Resources' I get an error stating: The member Resources is not recognized or accesssible.
The Application object is in your app.xaml file. But it's useful only if you want your resource to be shared by the whole application. If you need it only in one page, you can declare your resource in the PhoneApplicationPage element:
<phone:PhoneApplicationPage.Resources>
<!-- your resource -->
</phone:PhoneApplicationPage.Resources>
You'd need to import a mscorlib library and then refer to your resources using StaticResource keyword, like so:
<Application
x:Class="AppClass"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone">
<Application.Resources>
<sys:Int32 x:Key="Test">80</sys:Int32>
</Application.Resources>
</Application>
Usage:
<Rectangle Fill="#FFF4F4F5"
HorizontalAlignment="Left"
Height="100"
Stroke="Black"
VerticalAlignment="Top"
Width="{StaticResource Test}"
x:Name="pad1"
Tap="pad1_tap"
/>
I'm getting this exception when I run my app. I navigate to a XAML and the Debugger exits out with this message:
DrawingSurfaceBackgroundGrid must be the first element to begin
drawing.
On my MainPage.xaml, I navigate to this DirectX.xaml file when a button is clicked on MainPage.xaml. I made sure the DrawingSurfaceBackgroundGrid is the only control, so it's the FIRST element. Did I get the order wrong? (Also shown here are my App.xaml and MainPage.xaml)
DirectX.xaml
<phone:PhoneApplicationPage
x:Class="GameWp8Dx.Hud.Tests.DirectX"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<DrawingSurfaceBackgroundGrid x:Name="DrawingSurfaceBackground" Loaded="DrawingSurfaceBackground_Loaded">
</DrawingSurfaceBackgroundGrid>
</phone:PhoneApplicationPage>
MainPage.xaml
<phone:PhoneApplicationPage
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
xmlns:local="clr-namespace:GameWp8Dx"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:ec="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"
x:Class="GameWp8Dx.MainPage"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True"
local:TiltEffect.IsTiltEnabled="True"
ApplicationBar="{StaticResource socialAppBar}"
>
<!--Transitions-->
<toolkit:TransitionService.NavigationInTransition>
<toolkit:NavigationInTransition>
<toolkit:NavigationInTransition.Backward>
<toolkit:TurnstileTransition Mode="BackwardIn"/>
</toolkit:NavigationInTransition.Backward>
<toolkit:NavigationInTransition.Forward>
<toolkit:TurnstileTransition Mode="ForwardIn"/>
</toolkit:NavigationInTransition.Forward>
</toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot">
<phone:Panorama x:Name="test" HorizontalAlignment="Left" Height="686" VerticalAlignment="Top" Width="470"
Title="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource ResourceKey=LocalizedStrings}}" TitleTemplate="{StaticResource MainPageTitleTemplate}" HeaderTemplate="{StaticResource MainPageHeaderTemplate}">
App.xaml
<Application
x:Class="GameWp8Dx.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone">
<!--Application Resources-->
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="CustomStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>
<local:LocalizedStrings xmlns:local="clr-namespace:GameWp8Dx" x:Key="LocalizedStrings"/>
<shell:ApplicationBar x:Key="inGameAppBar" IsVisible="True" IsMenuEnabled="False">
<shell:ApplicationBarIconButton IconUri="/Assets/Icons/microphone.png" Text="record" Click="record_Click"/>
<shell:ApplicationBarIconButton IconUri="/Assets/Icons/questionmark.png" Text="info"/>
<shell:ApplicationBarIconButton IconUri="/Assets/Icons/map.png" Text="map" Click="map_Click"/>
</shell:ApplicationBar>
<shell:ApplicationBar x:Key="socialAppBar" IsVisible="True" IsMenuEnabled="False">
<shell:ApplicationBarIconButton IconUri="/Assets/Icons/appbar.twitter.png" Text="Tweet" Click="OnTweet"/>
<shell:ApplicationBarIconButton IconUri="/Assets/Icons/appbar.twitter.bird.png" Text="Tweet" Click="OnTweetSharp"/>
<shell:ApplicationBarIconButton IconUri="/Assets/Icons/appbar.facebook.png" Text="Share" Click="OnShare"/>
<shell:ApplicationBarIconButton IconUri="/Assets/Icons/appbar.facebook.heart.png" Text="Like" Click="OnLike"/>
</shell:ApplicationBar>
</ResourceDictionary>
</Application.Resources>
<Application.ApplicationLifetimeObjects>
<!--Required object that handles lifetime events for the application-->
<shell:PhoneApplicationService
Launching="Application_Launching" Closing="Application_Closing"
Activated="Application_Activated" Deactivated="Application_Deactivated"/>
</Application.ApplicationLifetimeObjects>
</Application>
UPDATE
Turns out TransitionFrame() is the culprit! Changed it back to PhoneApplicationPage() and DrawingSurfaceBackgroundGrid works without a hitch.
App.xaml.cs
private void InitializePhoneApplication()
{
if (phoneApplicationInitialized)
return;
// Create the frame but don't set it as RootVisual yet; this allows the splash
// screen to remain active until the application is ready to render.
RootFrame = new TransitionFrame();
//RootFrame = new PhoneApplicationFrame();
RootFrame.Navigated += CompleteInitializePhoneApplication;
// Handle navigation failures
RootFrame.NavigationFailed += RootFrame_NavigationFailed;
// Handle reset requests for clearing the backstack
RootFrame.Navigated += CheckForResetNavigation;
// Ensure we don't initialize again
phoneApplicationInitialized = true;
}
I'm just guessing here, but did you change the RootFrame to a special TransitionFrame? If so, I'm assuming that doesn't work well with DrawingSurfaceBackgroundGrid. You can probably change to a DrarwingSurface and resolve this issue. However DrawingSurface has an extra overdraw of all DirectX content shown on the screen due to an intermediary drawing layer used to interweave with XAML. So using DrawingSurface on full page D3D content will likely present performance problem (even more so on HD resolution screens).
To understand the problem , try thinking through what happens if you're navigating away from a page with DrawingSufaceBackgroundGrid? Should it animate? If so, you need XAML animations to be applied on D3D content and that's not supported for DrawingSurfaceBackgroundGrid. It is supported for DrawingSurface but at the heavy cost of having an intermediary drawing layer used to interweave with XAML.
I think in the tradeoff between bad DirectX perf and lacking page transitions, I'd opt out of having page transitions. That being said, different apps will have different compromises.
As another thought, you might be able to switch between a standard PhoneApplicationFrame and a TransitionFrame based on whether you need full screen D3D or not. I haven't tested something like that though.