Application Level Resources XAML - xaml

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

Related

NavigationView does not show PaneHeader when IsPaneToggleButtonVisible is false

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>

Override theme resource in the scope of a Page

I want to override a theme resource, specifically the SystemAccentColor, in the scope of a specific page.
I have successfully done it in application wide scope. But I can't do it for a specific page.
XAML in App.xaml (this works fine)
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<Color x:Key="SystemAccentColor">#862E2D</Color>
<SolidColorBrush x:Key="SystemControlHighlightAccentBrush" Color="Black"/>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Application.Resources>
XAML in Page.xaml (this doesn't work)
<Page.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<Color x:Key="SystemAccentColor">#111111</Color>
<SolidColorBrush x:Key="SystemControlHighlightAccentBrush" Color="Black"/>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Page.Resources>
<!-- Control to test that the resource is overriden. The `ProgressBar` uses the accent color by default -->
<ProgressBar
Height="10"
Grid.ColumnSpan="3"
VerticalAlignment="Top"
IsIndeterminate="True" />
I don't know why the resource is not overridden in the scope of the page.
I have tried removing the override from App.xaml and only overriding the resources in Page.xaml but that doesn't work either.
However if I do this
XAML in Page.xaml
<ProgressBar
Height="10"
Grid.ColumnSpan="3"
VerticalAlignment="Top"
IsIndeterminate="True"
Foreground="{StaticResource SystemControlHighlightAccentBrush}"/>
Then the ProgressBar gets the correct foreground value. Which means that the ovverride does take place.
Does anybody know why this is happening? Or how I can override a theme resource for a specific page?
The best way is using Visual Studio or 'Blend for Visual Studio'. I'm using Visual Studio
Right click on the Element you want to edit (in your case, Progress bar) > select 'Edit Template' > 'Edit a Copy'
A 'Create Style Resource' shows up, Enter a name for your style & in the 'Define in' section, select 'This Document' (this ensures the style only applies to the page/window and not app wide) and click okay
Immediately, the Progress Bar includes a style attribute (see last image) using the new style you created. You can go ahead and modify the code snippet inserted by the IDE to suite your imagination.
I hope this helps out.

XAML images as StaticResources throw an error in Windows Universal app

I have some vector icons I want to use throughout my windows universal application. I've added them to a resource dictionary, added the dictionary to a merged dictionary in app.xml, and tried using the resources in a page. The images actually show up in the editor preview window, but throw an error when I attempt to debug the application.
ManaSymbols.xaml
<?xml version="1.0" encoding="UTF-8"?>
<xaml:ResourceDictionary
xmlns:xaml="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Viewbox x:Key="BlueManaSymbol" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform">
<Canvas Width="100" Height="100">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas>
<Canvas>
<Ellipse Width="100" Height="100" Fill="#FFC1D7E9"/>
</Canvas>
<Path Fill="#FF0D0F0F">
<Path.Data>
M 68.91657 83.71021 C 58.968869 94.408441 39.101769 93.367284 30.985174 80.955583 23.700186 70.338629 25.060135 55.965661 30.782622 44.970201 37.43962 31.696018 47.119757 19.99635 58.53257 10.53421 c -1.779599 7.330526 -2.971221 15.369494 0.5678 22.406733 4.282692 9.098857 12.226705 16.065144 15.7407 25.557642 2.950311 8.612064 0.582748 18.823437 -5.9245 25.211625 z m -0.129 -27.362 c -0.82319 -2.47714 -5.460323 -8.506164 -4.125006 -2.813916 -0.362035 4.191263 -1.937779 8.124558 -3.178994 12.106916 -0.269255 7.254198 11.007675 4.685165 9.226 -1.795 -0.01849 -2.611632 -0.877381 -5.133602 -1.922 -7.498 z
</Path.Data>
</Path>
</Canvas>
</Canvas>
</Viewbox>
</xaml:ResourceDictionary>
App.xaml
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Assets/ManaSymbols.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
Page.xaml
<ContentControl Content="{StaticResource BlueManaSymbol}" Grid.Row="0" Margin="70,0,0,0" Width="30" Height="30" />
Error throw when debugging:
A first chance exception of type 'Windows.UI.Xaml.Markup.XamlParseException' occurred in MagicStats.Windows.exe
WinRT information: Failed to assign to property 'Windows.UI.Xaml.Controls.ContentControl.Content'. [Line: 79 Position: 25]
The error message seems to indicate that the binding failed, but it actually works in the design window. Any thoughts are appreciated.

How to use vector XAML files?

I have 93 SVG files which I converted to XAML using XamlTune and following these instructions. The resulting files place the vector information into a Canvas.
I know need to how to use these files in my application. Do I need to put these into a ResourceDictionary, or can I access them directly from the app package?
An example XAML file:
<Canvas Name="Layer_1" Width="20" Height="20" ClipToBounds="True" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"><Canvas><Path Fill="#FF222222"><Path.Data><PathGeometry FillRule="Nonzero" Figures="M4.3,0.025C3.776,0.025,3.35,0.451,3.35,0.975L3.35,4.775C3.35,5.299 3.776,5.725 4.3,5.725 4.824,5.725 5.25,5.299 5.25,4.775L5.25,0.975C5.25,0.451,4.824,0.025,4.3,0.025z" /></Path.Data></Path><Path Fill="#FF222222"><Path.Data><PathGeometry FillRule="Nonzero" Figures="M15.7,0.025C15.176,0.025,14.75,0.451,14.75,0.975L14.75,4.775C14.75,5.299 15.176,5.725 15.7,5.725 16.224,5.725 16.65,5.299 16.65,4.775L16.65,0.975C16.65,0.451,16.224,0.025,15.7,0.025z" /></Path.Data></Path><Path Fill="#FF222222"><Path.Data><PathGeometry FillRule="Nonzero" Figures="M18.55,3.35L17.6,3.35 17.6,4.775C17.6,5.82 16.745,6.675 15.7,6.675 14.655,6.675 13.8,5.82 13.8,4.775L13.8,3.35 6.2,3.35 6.2,4.775C6.2,5.82 5.345,6.675 4.3,6.675 3.255,6.675 2.4,5.82 2.4,4.775L2.4,3.35 1.45,3.35C0.926,3.35,0.5,3.776,0.5,4.3L0.5,7.15 0.5,8.575 1.925,8.575 18.075,8.575 19.5,8.575 19.5,7.15 19.5,4.3C19.5,3.776,19.074,3.35,18.55,3.35z" /></Path.Data></Path><Path Fill="#FF222222"><Path.Data><PathGeometry FillRule="Nonzero" Figures="M0.5,9.525L0.5,19.025C0.5,19.549,0.926,19.975,1.45,19.975L18.55,19.975C19.074,19.975,19.5,19.549,19.5,19.025L19.5,9.525 0.5,9.525z M17.6,18.075L2.4,18.075 2.4,11.425 17.6,11.425 17.6,18.075z" /></Path.Data></Path></Canvas></Canvas>
I suppose I understand what you are asking. Let's start that using them in a ResourceDictionary is perfectly fine, and might be ideal. The second, most obvious use, would be to put them in a UserControl. Both options would allow you to reuse them however you want.
Let's pretend I had a Canvas and I wanted to do just that.
<Canvas Height="100" Width="100" Background="Blue" />
Now, to use a ResourceDictionary, I would do this:
<Grid>
<Grid.Resources>
<DataTemplate x:Name="MyShape">
<Canvas Height="100" Width="100" Background="Red" />
</DataTemplate>
</Grid.Resources>
<ContentPresenter Content="{x:Null}" ContentTemplate="{StaticResource MyShape}" />
</Grid>
Note you can remove this from Resources and move it to a file if you like.
And, if you want a user control which gives you advantage of code-behind, you can do that, too.
Best of luck.

How to create WPF UserControl having a Canvas as the "main panel"?

I want to create a UserControl having a Canvas inside it. Then I can use it like this in XAML:
<Window ...>
<Grid>
<local:MyCanvasLikeControl>
<Path .../>
<Path .../>
<Polygon.../>
</local:MyCanvasLikeControl>
</Grid>
</Window>
I have tried some things, but always get this error: "Property Content can only be set once". I know of ControlTemplates and such, but could not find my way by reading the docs by myself.
My goal is to have an equivalent to this:
<Window ...>
<Grid ...>
<Border ....>
<Canvas ...>
<Path ...>
<Path ...>
<Polygon ...>
</Canvas>
</Border>
</Grid>
</Window>
But moving the "Border / Canvas" to a UserControl named "MyCanvasLikeControl"
It's the same type of scenario as if you to stuff a bunch of elements of any other type into a control that would produce the same error like for example;
<UserControl>
<Grid/>
<StackPanel/>
<Canvas/>
<!-- you get the idea -->
</UserControl>
It's just telling you that you need to specify a parent capable of holding your content to act as the single content of its parent, which in this case would be your control. So to fix this, it's luckily simple;
<local:MyCanvasLikeControl>
<Grid>
<Path .../>
<Path .../>
<Polygon.../>
</Grid>
</local:MyCanvasLikeControl>
Or switch Grid with Canvas or whatever you want so long as it can host children elements. Hope this helps.
EDIT:
Ok, so I think the definition of requirement may have been a bit over-complicated in its explanation. If I'm understanding you correctly then here's why you're breaking.
You have your first layer of elements that contain your UserControl, but the way you're trying to insert content into it isn't the way that works, you'll need to provide that ability by specifying how you wish to allow it to be added to your control via a ContentPresenter or ContentControl etc. So instead it would be more like this inside your external UserControl;
<Border ....>
<Canvas ...>
<ContentPresenter/> or <ContentControl/> etc.
</Canvas>
</Border>
So then you can inject that stuff in there the way you want.
<Window ...>
<Grid>
<local:MyCanvasLikeControl>
<local:MyCanvasLikeControl.Content>
<Path .../>
<Path .../>
<Polygon.../>
</local:MyCanvasLikeControl.Content>
</local:MyCanvasLikeControl>
</Grid>
</Window>
Make sense?