Apply theme with Silverlight 4 - silverlight-4.0

So I've been trying for some time to get theming to work in Silverlight 4.
I've added a reference to System.Windows.Controls.Theming.Toolkit and System.Windows.controls.Theming.ShinyRed
Then I went and did something like this:
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input" xmlns:WebbyDraw="clr-namespace:WebbyDraw" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" x:Class="SilverlightApplication1.MainPage"
Width="960" Height="700" mc:Ignorable="d"
xmlns:shinyRed="clr-namespace:System.Windows.Controls.Theming;assembly=System.Windows.Controls.Theming.ShinyRed" >
<shinyRed:ShinyRedTheme>
<Grid x:Name="LayoutRoot2">
....
</Grid>
</shinyRed:ShinyRedTheme>
</UserControl>
But I always get the same old theme...no errors, but nothing happens either. I've also tried other themes from the Silverlight 4 toolkit, and also tried applying it to a single control...nothing...what am I doing wrong? I've read several tutorials and haven't found the answer.

This is how i use theming, i also allow my users to change to their preferred theme -
you can replace ShinyRed.xaml with any other style resource file to support multiple themes can also be done programmatically(remove one resource dictionary and add another).
In your user control xmal
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
<toolkit:Theme x:Name="ThemeContainer">
<Grid x:Name="LayoutRoot">
... all other controls in the page
</Grid>
Copy all brushes and fonts required for the shinyred theme and create one single Style file called ShinyRed.xaml (you can simply follow the includes in each file to get it all in one file)
So in your App.xaml reference this newly created xaml adn that is it compile and run!
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Assets/ShinyRed.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>

Related

Add ViewModel to Mobile View

I am working on making a separate set of views for mobile devices, rather than using additional adaptive UI states for the phone. I am able to achieve this by adding a sub-folder in my Views folder called DeviceFamily-Mobile and adding a new View with the same name as the one I am overriding.
I have the following View that will work and display "MOBILE" on a mobile device/emulator.
<Page x:Class="MyApp.PayeesPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:behaviors="using:Template10.Behaviors"
xmlns:controls="using:Template10.Controls"
xmlns:core="using:Microsoft.Xaml.Interactions.Core"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:models="using:MyApp.Models"
xmlns:viewModels="using:MyApp.ViewModels"
xmlns:views="using:MyApp.Views"
mc:Ignorable="d">
<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBlock x:Name="MobileTextBlock"
Foreground="{ThemeResource ForegroundColorBrush}"
Text="MOBILE" />
</RelativePanel>
</Page>
However, if I try to set the DataContext to allow me to actual display something useful, like so:
<Page.DataContext>
<viewModels:PayeesPageViewModel x:Name="ViewModel" />
</Page.DataContext>
Then I get an error when navigating to the PayeesPage:
Unable to cast object of type 'Windows.UI.Xaml.Controls.TextBlock' to type 'MyApp.ViewModels.PayeesPageViewModel'.
This is the same way I set the DataContext on the original PayeesPage and it works fine. Is there a different way to set the DataContext on these alternate Views, or am I missing something?
It turns out that the mobile View needs to have the same x:Class as the original Page. ReSharper was complaining when I tried to call it MyApp.Views.PayeesPage because that already existed, so I changed it to MyApp.PayeesPage. However, when I switched it back so that both were using the same x:Class then everything started working as expected.
Unfortunately, I am getting a bunch of red squigglies from ReSharper, but things are working as they should be. Just in case anyone comes across this question in the future:
Views/PayeesPage.xaml:
<Page x:Class="MyApp.Views.PayeesPage"
...>
Views/DeviceFamily-Mobile/PayeesPage.xaml:
<Page x:Class="MyApp.Views.PayeesPage"
...>

UWP ResourceDictionary is not being loaded when I add a second object to it

I have a UWP application for Windows 10 with MVVM Light plugged in.
I store a ViewModelLocator in the App.Resources.
When I have just a ViewModelLocator in my App.Resources, everything works fine.
<Application.Resources>
<viewModel:ViewModelLocator x:Key="Locator" />
</Application.Resources>
As soon as I add a String, Converter or something similar, application doesn't crash but the ViewModelLocator constructor is not being called anymore.
No errors or exceptions being thrown, just ResourceDictionary is not being loaded or fails during load.
<Application.Resources>
<viewModel:ViewModelLocator x:Key="Locator" />
<x:String x:Key="SampleString">Hello</x:String>
</Application.Resources>
If I add a Style, DataTemplate, Brush, Color - everything works fine.
Haven't noticed that behavior on Windows Phone 8, Silverlignt or WPF before.
Moving styles or objects to separate ResourceDictionaries and load them using MergedDictionaries didn't help.
I would like to have a list of objects in ResourceDictionary so that all constructors of these objects are being called automatically on the app start.
Please advise.
P.S.:
Even two similar converters don't work, while one is created without any problem
<Application.Resources>
<!--<viewModel:ViewModelLocator x:Key="Locator" />-->
<converters:StringFormatConverter x:Key="StringFormat1" />
<converters:StringFormatConverter x:Key="StringFormat2" />
</Application.Resources>
Looking for an example of ResourceDictionary usage, found similar question:
Merged ResourceDictionary initalization in UWP app
Try adding them in a Resource Dictionary like this
<Application.Resources>
<ResourceDictionary>
<viewModels:ViewModelLocator x:Key="Locator"/>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="XAMLResources/Styles.xaml" />
<ResourceDictionary Source="XAMLResources/DataTemplates.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
If you want to take a look at a complete example the code snippet is from this repository on GitHub https://github.com/AppCreativity/Kliva
You will notice we add our Converters in the Styles.xaml and that is working fine...
That's all because of lazy initialization. I've made some experiments and figured out this picture. I hope you will catch the idea.
http://screencast.com/t/mxyBGBDuZ

WinRT information: Cannot find a resource with the given key

I am creating a Windows Universal app and now working on the Windows Phone section. I have a Storyboard for a simple button animation placed in the Storyboards.xaml file and I've merged this file with my App.xaml Resources.
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ms-appx:///Dictionaries/Templates.xaml"/>
<ResourceDictionary Source="ms-appx:///Dictionaries/Storyboards.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
I locate the storyboard using this code
Storyboard sb = App.Current.Resources["StoryboardButton"] as Storyboard;
The animation works fine on the main page. But once I go to other page and return back to the main page and re-initiate the animation I get this error
WinRT information: Cannot find a resource with the given key.
What am I missing?
I can't see how you defined StoryboarButton, but try adding x:Key="StoryboardButton" to that definition.

Custom Theme That Overrides Default Theme WP7

Is it possible to create a custom theme and have it used as the default theme?
Every example I can find anywhere says you can create custom themes by copying the ThemeResources.xaml and System.Windows.xaml files and including them as merged dictionaries in your app.
http://windowsphonegeek.com/articles/Creating-WP7-Custom-Theme-ndash-Basic-Theme-Implementation
Overriding themes in Windows Phone 7
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources/CustomThemeResources.xaml" />
<ResourceDictionary Source="Resources/CustomThemeStyles.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
Then I've read some more that you need to include the brushes inside the styles file, so in CustomThemeStyles.xaml I have this.
http://www.windowsphonegeek.com/articles/Creating-WP7-Custom-Theme---Complex-Theme
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="CustomThemeResources.xaml" />
</ResourceDictionary.MergedDictionaries>
It doesn't work... so I download the sample app and sure enough, every page that wants to have some color changed, like the background color, will set it on it's outer most component.
<Grid Background="{StaticResource PhoneBackgroundBrush}">
...
</Grid>
Is it possible to include custom themes that change the style/brushes/colors/etc of all the defaults without having to explicitly set them everywhere?
It is not possible in the current version of WP7 to have a new Style that changes the default one without explicitly set it via "x:Key":
Implicit Styles are a feature of Silverlight 4 (and WPF): Windows Phone 7 is based on Silverlight 3+(with a few Silverlight 4 features added). Since there’s no Implicit Styles in Silverlight 3 this mean that there is no way to use them in Windows Phone 7 as well.
For now you can:
Only override the default Brushes/Colors resources as explained in the first article that you pointed out. Note that all WP7 controls will change their colors. Note also that for some reason the default Background remains unchanged. This is a known issue with the current version of WP7 and probably will be fixed in the "Mango" update.
If you want to have any new Style/ControlTemplate you must use the "x:Key"/{StaticResource ...} approach as mentioned in the second article that you pointed out.
Finally, as Derek Lakin mentioned previously: hopefully this bug will get fixed in the Mango update!
If you create a resource dictionary and call it something like Reset.xaml that contains all of the standard brush resources. Put any custom resource styles/brushes into another resource dictionary (we'll call it Custom.xaml for now). In App.xaml include both of these resource dictionaries as shown here:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources/Reset.xaml"/>
<ResourceDictionary Source="Resources/Custom.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
In theory, this should be enough, but unfortunately it's not. For some reason (hopefully a bug that will get fixed in the Mango update) you also need to include the Reset.xaml in the Custom.xaml like this:
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Reset.xaml"/>
</ResourceDictionary.MergedDictionaries>
Once you've done this, that should be it; you shouldn't need to do anything else.
With the release of Windows Phone Mango (7.1), the feature of merging XAML dictionary styles no longer works. Currently, you will have to change the application resource Brush color entry in the code-behind; preferably in constructor of App() in App.xaml.cs.
Example:
(App.Current.Resources["PhoneAccentBrush"] as SolidColorBrush).Color = Color.FromArgb(12, 12, 54, 145);
(App.Current.Resources["PhoneForegroundBrush"] as SolidColorBrush).Color = Colors.Green;
(App.Current.Resources["PhoneBackgroundBrush"] as SolidColorBrush).Color = Colors.Purple;
Hopefully in the WP8 SDK we will no longer need to do this workaround.

Error in Silverlight 4 + PRISM when a custom style is applied

The situation:
"Shell" project with App.xaml and a resource dictionary in Styles/Default.xaml with the interesting parts thus:
Default.xmal
<ResourceDictionary
<Style x:Key="StandardTextBox" TargetType="TextBox">
...
</Style>
</ResourceDictionary
App.xaml
<Application>
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Styles/Default.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
In a module project I've got a form with:
<TextBox Style="{StaticResource StandardTextBox}" />
At runtime I get the infamous "Error HRESULT E_FAIL has been returned from a call to a COM component." exception. The funny thing is during design time, in VS, the style is applied just fine in design mode. (and how VS.Net works the magic of knowing there's a resource in App.xaml in the Shell project - which is not referenced by the module project AT ALL - is baffling ... but I digress)
My overall goal is to have resources defined in files separate from App.xaml, in the Shell project, and have the styles applied intrinsically across the Module projects.
Update: Yeah, I was totally on the wrong war path here. The TextBox style that Blend generates references another style for the ValidationToolTip. Failing to include that will cause the issue described above. Unfortunately the error message was quite unhelpful and the squiggle underline in VS is easily missed when it's deep in the middle of the XAML definition and way off to the right. Live and learn.
The real issue was not including another referenced style. See this.