Create a theme in Windows 8.1 - xaml

In Windows 8, you were able to create your own themes for your application (here's a tutorial).
In Windows 8.1 Applications, themes are handled differently: you can change them at run-time and set a theme for a specific control in your XAML (if you don't want to apply the theme to the whole Application).
For instance:
<Grid x:Name="MainGrid" RequestedTheme="Dark">
However, I could not find a way to create my own themes. The property RequestedTheme takes an enumeration (its type is FrameworkElement.RequestedTheme) and an enumeration by definition cannot be extended (in C#). Also, if I want to define a new Theme Dictionary I would have written:
<ResourceDictionary.ThemeDictionaries>
But it is not available in Windows 8.1.
How can one create a theme in Windows 8.1? Am I limited to the existing ones (light & dark)?

Yes you're restricted to 3 themes I believe
Default (light)
Dark
High Contrast
You can create new styles or override existing ones for the 3 themes like this in 8.1
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="24" />
<Setter Property="Foreground" Value="Green"/>
</Style>
</ResourceDictionary>
<ResourceDictionary x:Key="Dark">
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="30" />
<Setter Property="Foreground" Value="Orange"/>
</Style>
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="24" />
<Setter Property="Foreground" Value="Blue"/>
</Style>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

Related

Xamarin Forms Styling using StyleClass vs Style attribute

We're building a Xamarin Forms app we've noticed we could style an element in 2 ways by creating styles in the App.xaml ResourceDictionary
Class and StyleClass option
In App.xaml we'll write
<Style Class="EntryStandard" TargetType="Entry">
<Setter Property="TextColor" Value="#575e62" />
<Setter Property="BackgroundColor" Value="#9facb3" />
<Setter Property="FontSize" Value="14" />
</Style>
Then this gets used in one of the contentpages like this
<Entry StyleClass="EntryStandard" Placeholder="Login Name" Text="{Binding EntryEmailAddress}" />
Key and Style option
This is what we write under App.xaml
<Style x:Key="ButtonMainMenu_Purple" TargetType="Button">
<Setter Property="BackgroundColor" Value="#5d4785" />
<Setter Property="FontSize" Value="14" />
<Setter Property="TextColor" Value="#FFFFFF" />
</Style>
And then we use the following in our contentpages
<Button Style="{StaticResource ButtonMainMenu_Purple}" Text="Friends" Command="{Binding OnFriendsButtonCommand}" />
Both work fine, I just wanted to know which one is better than the other and why?
Regular styles follow the standard, relatively inflexible WPF model. Style classes includes cascade semantics and are part of the new theme support. They are poorly documented, however, and still in beta.

Cannot find a Resource with the Name / Key

I have a UWP App. The Styles works without a problem when I execute the app. But not in the Designer. Especially User Control can't be loaded. The Error message who is displayed is:
Cannot find a Resource with the Name / Key [Name]
When I go to that User Control it mostly is displayed correctly.
I reference the style with:
Style="{StaticResource DeemphasizedBodyTextBlockStyle}"
I have a file for my Textstyles. In that file I have the style defined as followed:
<Style x:Key="DeemphasizedBodyTextBlockStyle"
TargetType="TextBlock"
BasedOn="{StaticResource BodyTextBlockStyle}">
<Setter Property="FontSize"
Value="12" />
<Setter Property="TextWrapping"
Value="NoWrap" />
<Setter Property="CharacterSpacing"
Value="75" />
<Setter Property="HorizontalAlignment"
Value="Left" />
<Setter Property="VerticalAlignment"
Value="Top" />
<Setter Property="Foreground"
Value="{StaticResource AppForegroundColorSecondary}" />
</Style>
And in the properties of the view project I have a Designer Resource file added (as page) with the following content:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ms-appx:///Style/AppStyles.xaml" />
<ResourceDictionary Source="ms-appx:///Style/ColorsDark.xaml" />
<ResourceDictionary Source="ms-appx:///Style/ColorsLight.xaml" />
<ResourceDictionary Source="ms-appx:///Style/ControlStyles.xaml" />
<ResourceDictionary Source="ms-appx:///Style/TextStyles.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
The whole repo is available here: https://github.com/MoneyFox/MoneyFox

Windows Store app failed to create style BasedOn shared style

I have a windows 8.1 app.
In Project.Shared there is ResourceDictionary SharedResources.xaml with base style,
<Style x:Key="CommonLayerListItemStyle" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe WP" />
<Setter Property="Foreground" Value="{StaticResource UnselectBrush}" />
<Setter Property="VerticalAlignment" Value="Stretch" />
</Style>
in Windows Phone app is StyleResources.xaml wiht style based on this
<Style x:Key="LayerListItemStyle"
BasedOn="{StaticResource CommonLayerListItemStyle}"
TargetType="TextBlock">
<Setter Property="FontSize" Value="20" />
</Style>
same in Windows app StyleResources.xaml:
<Style x:Key="LayerListItemStyle"
BasedOn="{StaticResource CommonLayerListItemStyle}"
TargetType="TextBlock">
<Setter Property="FontSize" Value="28" />
<Setter Property="Margin" Value="42,0,0,0" />
</Style>
All styles are used in UserControl created in Shared project.
I do this to override FontSize on diffrent platforms.
I merged all dictionaries in App.xaml
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Styles/SharedResources.xaml" />
<ResourceDictionary Source="Styles/StyleResources.xaml" />
</ResourceDictionary.MergedDictionaries>
But my app does not start with Unhandled exception
Cannot find a Resource with the Name/Key CommonLayerListItemStyle [Line: 10 Position: 37]
Why does this happens?
I had the same issue. You need to merge the SharedResources.xaml directly into StyleResources.xaml, and only reference StyleResources.xaml from App.xaml.
Here is a complete example:
http://blog.craftingbytes.com/2015/05/resource-sharing-in-windows-universal.html

MergedDictionaries can not be referenced from App.xaml

My styles are separated in separate files for better organization and readability. All files are referenced in my App.xaml. Some styles are BasedOn other styles, so I have placed them in the proper order so that the inherited styles are loaded before the dependent ones. However, I am still getting the following error on my XAML views that reference a font style, for example...Cannot find a Resource with the Name/Key SourceSansPro-Light.
Can someone enlighten me on why this Name/Key cannot be found? Here's the relevant code.
App.xaml
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Common/Styles/StyleResources.xaml" />
<ResourceDictionary Source="Common/Styles/InputStyles.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
StyleResources.xaml
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="TextBoxBackgroundBrush" Color="White"/>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
<FontFamily x:Key="SourceSansPro-Light">../../Assets/Fonts/SourceSansPro-Light.otf#Source Sans Pro</FontFamily>
<Style x:Key="TextBlockStyle" TargetType="TextBlock" BasedOn="{StaticResource BaseTextBlockStyle}">
<Setter Property="FontSize" Value="18"/>
<Setter Property="FontFamily" Value="{StaticResource SourceSansPro-Semibold}" />
</Style>
InputStyles.xaml
<Style x:Key="SecondaryTextStyle" TargetType="TextBlock" BasedOn="{StaticResource TextBlockStyle}">
<Setter Property="FontFamily" Value="{StaticResource SourceSansPro-Light}"/>
</Style>
HomePage.xaml (where style, SourceSansPro-Light, is being called in this view)
<Page.Resources>
<Style x:Name="InfoBodyTextStyle" TargetType="TextBlock">
<Setter Property="FontFamily" Value="{StaticResource SourceSansPro-Light}"/>
</Style>
Please try this code.
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="#FF64CCEF"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="FontFamily" Value="{DynamicResource FontFamilyResource}"/>
</Style>
<FontFamily x:Key="FontFamilyResource">/ApplicationName(SolutionName);component/Resources/Fonts/#Vladimir Script</FontFamily>

Inheritance in Silverlight 2 Styles

I want to build up styles in XAML, e.g.
<UserControl.Resources>
<Style x:Key="MyStyle" TargetType="TextBlock">
<Setter Property="Margin" Value="2,2,2,2" />
<Setter Property="Foreground" Value="DarkRed" />
</Style>
<Style x:Key="MyBoldStyle" TargetType="TextBlock">
<Setter Property="Style" Value="{StaticResource MyStyle}" />
<Setter Property="FontWeight" Value="Bold" />
</Style>
</UserControl.Resources>
But this does not work. (In Silverlight 2) How can I make one inherit from the other?
June 2010 Update: Style Inheritance is in Silverlight 3, use BasedOn="{StaticResource MyStyle}
Nevermind. I found the answer in MacDonald's Pro Silverlight 2 in C# 2008:
(source: apress.com)
"If you've used styles in WPF, you'll find
that Silverlight styles are
dramatically scaled back ... [for example, you can't]
create styles that inherit from other styles."
Too bad. Maybe in Silverlight 3.