We Keep Coding

How to merge different resources in single App.xaml?

I've a long coded App.xaml which contains code for a Custom stylable window that I downloaded from the Internet.
<Application x:Class="MyProject.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MyProject"
xmlns:sw="clr-namespace:MyProject.StyleableWindow"
StartupUri="MainWindow.xaml">
<Application.Resources>
<SolidColorBrush x:Key="WindowColor" Color="Red"/>
<SolidColorBrush x:Key="WindowBackColor" Color="#FFC3C3C3"/>
<SolidColorBrush x:Key="WindowForeColor" Color="Black"/>
<SolidColorBrush x:Key="WindowForeHighlightColor" Color="WhiteSmoke"/>
................
................
................
................
<Setter Property="Background" Value="Black"/>
<Setter Property="BorderBrush" Value="Red"/>
<Setter Property="Template" Value="{StaticResource WindowTemplate}"/>
</Style>
Yesterday, I downloaded a custom Toggle Button Control. In order to make it function, I tried to merge below code in the App.xaml
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="SwitchTypeToggleButton.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
But it doesn't work. I keep getting the following error:
Each dictionary must have an associated key
My Toggle Button Control Code- (Stored in MyProject > Folder1 > Folder2)
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="SwitchTypeToggleButton"
TargetType="{x:Type ToggleButton}">
<Style.Resources>
<Color x:Key="Color.Additional.LightGrey">#989EA8</Color>
<Color x:Key="Color.Additional.MediumGrey">#61656B</Color>
............
............
What do I have to do to get rid of the error? Any help is appreciated.

The resources in app.xaml should look like this:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="SwitchTypeToggleButton.xaml" />
</ResourceDictionary.MergedDictionaries>
<SolidColorBrush x:Key="WindowColor" Color="Red"/>
...
<Setter Property="Template" Value="{StaticResource WindowTemplate}"/>
</ResourceDictionary>
</Application.Resources>
The reason is, that Application.Resources actually always needs to be a ResourceDictionary. As long as you use "simple" resources, the ResourceDictionary is created implicitly. But as soon as you want to merge another ResourceDictionary you have to specify the containing one explicitly.

Changing color used in storyboards?

I am in a situation where I have defined 3 colors in my program. They are defined in App.xaml as such:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary x:Name="Aero">
<Color x:Key="AccentColor">#3399ff</Color>
<Color x:Key="AccentDarkColor">#236bb2</Color>
<Color x:Key="AccentDarkerColor">#1e5b99</Color>
<SolidColorBrush x:Key="AccentBrush" Color="{DynamicResource AccentColor}" />
<SolidColorBrush x:Key="AccentDarkBrush" Color="{DynamicResource AccentDarkColor}" />
<SolidColorBrush x:Key="AccentDarkerBrush" Color="{DynamicResource AccentDarkerColor}" />
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
Now, I want these colors to be changeable, so there are areas of my program where I change them programmatically:
Application.Current.Resources["AccentColor"] = color;
Application.Current.Resources["AccentDarkColor"] = color;
Application.Current.Resources["AccentDarkerColor"] = color;
This however poses a problem, since I also have storyboards defined in my application that allow the application to fade (via a ColorAnimation) from one color to another (for instance fading from AccentColor to AccentDarkColor).
When these storyboards do this, they use a StaticResource since a DynamicResource can't be used (because the Storyboard has to be freezable) for WPF to do its thing.
What did I try?
I tried moving the storyboards to App.xaml as well, and then (in my BeginStoryboard refer to a DynamicResource of the storyboard:
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListBoxItem}}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{DynamicResource BackgroundToAccentBorderToAccentDarkTransitionStoryboard}" />
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
However, when I then programmatically change the storyboards, they don't change when the DataTrigger gets re-executed, despite it being a DynamicResource.
What can I do?

Change slider bar color

It should be very easy to do this but I haven't found the information that I need. What I want is as simple as changing the color of the slider bar:
I'm using ModernUI and the default bar color is very similar to my background and I want to make it a bit lighter.

You should be able to change it editing the template.
Right click your Slider, Edit Template -> Edit Copy.;.
A new window will appear asking you where VS should put the XAML code for the ControlTemplate and Styles. Chek the tags and such.
Good luck!
Edit:
Ok, here it goes.
Assuming that you already have a ModernUI App, create a new folder called Assets, right click it Add -> New Item... -> ModernUI Theme. Call it whatever you like it.
Inside the newly created XAML file insert these SolidColorBrush under the AccentColor Color tag:
<SolidColorBrush x:Key="SliderSelectionBackground" Color="Red" />
<SolidColorBrush x:Key="SliderSelectionBorder" Color="Red" />
<SolidColorBrush x:Key="SliderThumbBackground" Color="Red" />
<SolidColorBrush x:Key="SliderThumbBackgroundDisabled" Color="Red" />
<SolidColorBrush x:Key="SliderThumbBackgroundDragging" Color="Red" />
<SolidColorBrush x:Key="SliderThumbBackgroundHover" Color="Red" />
<SolidColorBrush x:Key="SliderThumbBorder" Color="Red" />
<SolidColorBrush x:Key="SliderThumbBorderDisabled" Color="Red" />
<SolidColorBrush x:Key="SliderThumbBorderDragging" Color="Red" />
<SolidColorBrush x:Key="SliderThumbBorderHover" Color="Red" />
Each one of these represents a state of the Thumb (the slider "rectangle"). After that open your App.xaml file and include your theme there (this is what my file looks like):
<Application x:Class="ModernUIApp1.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />
<ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml"/>
<ResourceDictionary Source="/Assets/ModernUI.Theme1.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
The <ResourceDictionary Source="/Assets/ModernUI.Theme1.xaml" /> bit represents my theme.
Setting all the colors to Red, this is what it looked like:
I guess that's more clear!
Hope you like it.
EDIT:
It will change when you apply your theme. But, as you're familiar with styles, I'm sending the complete template. What you can do is create a UserDictionary with only this template and when you you want to use it, change the slider Template property. You'll want to change only the Thumb Tags. Pastebin code
And if you want to change only THIS one put the template between <Windows.Resources> or <Slider.Resources> - Another option would be create your own control

I found two approaches:
You can customize your slider by insert corresponding brushes in
appropriate Slider.Resources section.
You can add brushes to separate xaml file with dictionary and then
merge it with corresponding slider in the Slider.Resources. In some cases it fits better because you can change colors of few controls at once.
Any does not need to changing of the control's template.
Both approaches are presented below:
Page1.xaml
<Grid Style="{StaticResource ContentRoot}">
<StackPanel>
<!-- Slider with default theme and colors from ModernUI -->
<Slider/>
<!-- Slider with custom colors from approach 1 -->
<Slider>
<Slider.Resources>
<SolidColorBrush x:Key="SliderSelectionBackground" Color="Green" />
<SolidColorBrush x:Key="SliderSelectionBorder" Color="Green" />
<SolidColorBrush x:Key="SliderThumbBackground" Color="Green" />
<SolidColorBrush x:Key="SliderThumbBackgroundDisabled" Color="Green" />
<SolidColorBrush x:Key="SliderThumbBackgroundDragging" Color="Green" />
<SolidColorBrush x:Key="SliderThumbBackgroundHover" Color="Green" />
<SolidColorBrush x:Key="SliderThumbBorder" Color="Green" />
<SolidColorBrush x:Key="SliderThumbBorderDisabled" Color="Green" />
<SolidColorBrush x:Key="SliderThumbBorderDragging" Color="Green" />
<SolidColorBrush x:Key="SliderThumbBorderHover" Color="Green" />
</Slider.Resources>
</Slider>
<!-- Slider with custom colors from approach 2 -->
<Slider>
<Slider.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Dictionary1.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Slider.Resources>
</Slider>
</StackPanel>
</Grid>
Dictionary1.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<SolidColorBrush x:Key="SliderSelectionBackground" Color="Blue" />
<SolidColorBrush x:Key="SliderSelectionBorder" Color="Blue" />
<SolidColorBrush x:Key="SliderThumbBackground" Color="Blue" />
<SolidColorBrush x:Key="SliderThumbBackgroundDisabled" Color="Blue" />
<SolidColorBrush x:Key="SliderThumbBackgroundDragging" Color="Blue" />
<SolidColorBrush x:Key="SliderThumbBackgroundHover" Color="Blue" />
<SolidColorBrush x:Key="SliderThumbBorder" Color="Blue" />
<SolidColorBrush x:Key="SliderThumbBorderDisabled" Color="Blue" />
<SolidColorBrush x:Key="SliderThumbBorderDragging" Color="Blue" />
<SolidColorBrush x:Key="SliderThumbBorderHover" Color="Blue" />
</ResourceDictionary>
As result you get following:

Foreground property is used to fill the "completed" part of the slider with a particular color. (Background does the uncompleted part.)
<Slider Value="40" Maximum="100" Foreground="Red" />

Here you have the templates you should use: Slider Styles and Templates
The property you are looking to edit is the TrackBackground.BackGround.
If you define a style for this control template and put it either in you app.xaml or in the window.resources or in any other file, as long as you give it a key you can use it in a specific slider through the "Style" property of that slider using that same key.

Windows 8.1 Store/Phone Apps.
Add this to the App.xaml and change the color values to your liking:
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<SolidColorBrush x:Key="SliderTrackDecreaseBackgroundThemeBrush" Color="#FFFF0000" />
<SolidColorBrush x:Key="SliderTrackDecreasePointerOverBackgroundThemeBrush" Color="#FF00FF00" />
<SolidColorBrush x:Key="SliderTrackDecreasePressedBackgroundThemeBrush" Color="#FF0000FF" />
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrastBlack">
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrastWhite">
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
You probably only want to change the slider for the default theme and probably only the three color values shown above. For all colors / resources that you can change, see this link at MSDN: Slider styles and templates.

For what it's worth, the only way I could change the Slider Thumb color on Win10 UWP for Phone was to overwrite the System Foreground brush. (You can also apparently completely re-template the whole Slider)
So, I put into my App.xaml
<Application
x:Class="App1.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
RequestedTheme="Dark">
<Application.Resources>
<SolidColorBrush x:Key="SystemControlForegroundAccentBrush" Color="White" />
</Application.Resources>
</Application>
The addition to Application.Resources is the really important thing here. It's where we're overwriting the Foreground color for ALL common elements, like Checkbox, ContentDialog, ProgressRing, etc.... So, that's the downside to this method too.
Changing the Thumb color on a Slider is a known problem point for XAML UWP. Microsoft has plans to make it easier in the immediate future.

Change selection highlight color in list view

How do I do this? Everything I've founds says this should work, but it doesn't for me. What am I doing wrong?
<ListView ItemsSource="{Binding ListViewItems}" >
<ListView.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Green"/>
</Style.Resources>
</Style>
</ListView.ItemContainerStyle>
</ListView>

The code you have shown above does work for me. This, however, sets the colors when ListBox is in focus. To set the color when it is not in focus, try ...
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Green" />
Check this example to implement it on Win 8.

Try to directly set it in <ListView.Resources><SolidColorBrush x:Key=...></ListView.Resources>
Try to define a SolidColorBrush with Key "{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" too.
UPDATE:
Just tried to run the following xaml on win7 and targeting .net 4.5:
<ListView ItemsSource="{Binding DummyItems}">
<ListView.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Green"/>
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="LightGreen"/>
</ListView.Resources>
</ListView>
Works like a charm!
Nevertheless, it seems to be that this is not going to work on win8.
So there may be no way of getting around to define your own template. Refer to this page.

Load control style from separate file in wpf

I have the following style added to my Windows.Resources
<Window.Resources>
...
<!--A Style that extends the previous TextBlock Style-->
<!--This is a "named style" with an x:Key of TitleText-->
<Style BasedOn="{StaticResource {x:Type TextBlock}}"
TargetType="TextBlock"
x:Key="TitleText">
<Setter Property="FontSize" Value="26"/>
<Setter Property="Foreground">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.0" Color="#90DDDD" />
<GradientStop Offset="1.0" Color="#5BFFFF" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
...
</Window.Resources>
I have a lot of those styles in my xaml code and I would like to save each component style to an extra file (not an external file).. for example all the styles related to TextBlocks should be in a file called TextBlockStyles.xaml
How would I do this in wpf?
How do I link the style in my project ?
Thanks in advance

You use merged resource dictionaries
In you app.xaml you would use
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary
Source="/Your.Assembly.Name;component/TextBlockStyles.xaml"/>
... other dictionaries here
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
or directly into a UserControl would be
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary
Source="/Your.Assembly.Name;component/TextBlockStyles.xaml"/>
... other dictionaries here
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
You can shorten Source="..." to just Source="TextBlockStyles.xaml" if the file is in the same assembly and in the root of the project, or alternatively Source="Styles\TextBlockStyles.xaml" if you put the resource dictionary into the folder Styles.

Use case: you have a user control called MyView.xaml with a button. You want to style the button with an external XAML file.
In MyView.xaml:
<User Control ...namespaces...>
<UserControl.Resources>
<ResourceDictionary>
...converters...
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="MyButton.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
...the rest of the control...
</UserControl>
In MyButton.xaml:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MSDNSample">
<Style x:Key="FooButton" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Pink" />
</Style>
</ResourceDictionary>
Back to MyView.xaml ("the rest of the control"):
<Button Style="{StaticResource FooButton}">
Hello World
</Button>

In Solution Explorer Right Click on your Project Select Add After that click on Resource Dictionary...
Choose name and add to your project.
Open App.xaml
Add This Code in Application Tag
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="YourStyle.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
In YourStyle.xaml :
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:APPNAME">
<Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Pink" />
</Style>
</ResourceDictionary>

you are looking for the dynamic resources. well the best way is to load and marge the dictionary in the resources. application or either on control page.
here is a good sample for it.
http://blogs.msdn.com/b/wpfsdk/archive/2007/06/08/defining-and-using-shared-resources-in-a-custom-control-library.aspx
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Dictionary1.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
this.Resources.MergedDictionaries.Add(Smyresourcedictionary);

Simply, go to your Window (example: MaindWindow.xaml) where you want to include the resource from the outer file and use MergedDictionaries principle to refer to that file:
<Window x:Class="UseMergedResource.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MainWindow"
Height="600"
Width="600">
<Window.Resources>
<!-- DECLARING MERGED DICTIONARY -->
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source='Merged/BrushResources.xaml' />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
<!---------------------------------->
</Window.Resources>
<StackPanel>
<Rectangle Width='200'
Height='100'
Fill='{StaticResource PrimaryBrush}' /> <!-- USAGE HERE -->
</StackPanel>
</Window>
From above Merged/BrushResources.xaml is the location of the resource file, which is located under the folder called Merged.
Now if you are wondering what should be the declaration syntax in the outer file, check this:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Location for application brushes -->
<SolidColorBrush x:Key='BorderBrush'
Color='Orange' />
<SolidColorBrush x:Key='HighLightBrush'
Color='LightBlue' />
<SolidColorBrush x:Key='PrimaryBrush'
Color='Pink' />
<SolidColorBrush x:Key='AccentBrush'
Color='Yellow' />
</ResourceDictionary>
If you want to make the resource available through all application (visible in all your windows) then declare in the App.xaml resources section.