Bind to property in App.xaml - c#

I have a quick question: I want to bind a Solidcolorbrush, which is located in App.xaml's Resources. It has a key assigned to it, but how would I bind to that property from another page?
Here is the App.xaml itself:
<Application x:Class="Mplayer.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>
<Color x:Key="PrimaryAccentColor" A="255" R="3" G="169" B="244"/>
<SolidColorBrush x:Key="PrimaryAccentBrush" Color="{StaticResource PrimaryAccentColor}"/>
<Color x:Key="SecondaryAccentColor" A="255" R="3" G="169" B="244"/>
<SolidColorBrush x:Key="SecondaryAccentBrush" Color="{StaticResource SecondaryAccentColor}"/>
<Color x:Key="LightBackgroundColor" A="255" R="3" G="169" B="244"/>
<SolidColorBrush x:Key="LightBackgroundBrush" Color="{StaticResource LightBackgroundColor}"/>
<Color x:Key="DarkBackgroundColor" A="255" R="3" G="169" B="244"/>
<SolidColorBrush x:Key="DarkBackgroundBrush" Color="{StaticResource DarkBackgroundColor}"/>
</ResourceDictionary>
</Application.Resources>
If I then have a page which I want to bind to the PrimaryAccentColorBrush, how would that bind look?
I tried setting the bind to {Binding Path={StaticResource PrimaryAccentColorBrush}}, but it did not locate it.
Any help would be appreciated =)

You don't have to use Binding, just use StaticResource, like you already do:
Property="{StaticResource PrimaryAccentBrush}"

You almost had it... try this instead:
<TextBlock Background="{Binding Source={StaticResource PrimaryAccentColorBrush}}" />
Although you don't seem to have a PrimaryAccentColorBrush in your example... did you mean PrimaryAccentBrush?

Related

WPF How to reference color resources in other projects

I create a custom control library like this:
enter image description here
Generic.xaml:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/KiwiWPFControl;component/Themes/KiwiButton.xaml"/>
<ResourceDictionary Source="/KiwiWPFControl;component/Themes/KiwiColor.xaml"/>
</ResourceDictionary.MergedDictionaries>
And I create a demo project:
enter image description here
App.xaml:
<Application x:Class="KiwiWPFDemo.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:KiwiWPFDemo"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/LayUI.Wpf;component/Themes/Default.xaml" />
<ResourceDictionary Source="pack://application:,,,/KiwiWPFControl;component/Themes/Generic.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
MainWindow.xaml:
<Window
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"
xmlns:local="clr-namespace:KiwiWPFDemo"
xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
xmlns:Lay="clr-namespace:LayUI.Wpf.Controls;assembly=LayUI.Wpf"
xmlns:Controls="clr-namespace:KiwiWPFControl.Controls;assembly=KiwiWPFControl" x:Class="KiwiWPFDemo.MainWindow"
mc:Ignorable="d"
Height="800" Width="1000">
<Grid>
<Controls:KiwiButton Content="KiwiButton" FontSize="15" Width="100" Height="50" HorizontalAlignment="Left" Margin="108,191,0,0" VerticalAlignment="Top"/>
<Button Background="{StaticResource HiGreenBrush}" Content="KiwiButton" FontSize="15" Width="100" Height="50" HorizontalAlignment="Left" Margin="108,300,0,0" VerticalAlignment="Top"/>
</Grid>
The code
Background="{StaticResource HiGreenBrush}"
reports : Unable to resolve resource "HiGreenBrush"
Modify App.xaml as follows:
<Application x:Class="KiwiWPFDemo.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:KiwiWPFDemo"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/LayUI.Wpf;component/Themes/Default.xaml" />
<ResourceDictionary Source="pack://application:,,,/KiwiWPFControl;component/Themes/Generic.xaml" />
<ResourceDictionary Source="pack://application:,,,/KiwiWPFControl;component/Themes/KiwiColor.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
No change happens
Modify MainWindow.xaml as follows::
<Window
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"
xmlns:local="clr-namespace:KiwiWPFDemo"
xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
xmlns:Lay="clr-namespace:LayUI.Wpf.Controls;assembly=LayUI.Wpf"
xmlns:Controls="clr-namespace:KiwiWPFControl.Controls;assembly=KiwiWPFControl" x:Class="KiwiWPFDemo.MainWindow"
mc:Ignorable="d"
Height="800" Width="1000">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/KiwiWPFControl;component/Themes/KiwiColor.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid>
<Controls:KiwiButton Content="KiwiButton" FontSize="15" Width="100" Height="50" HorizontalAlignment="Left" Margin="108,191,0,0" VerticalAlignment="Top"/>
<Button Background="{StaticResource HiGreenBrush}" Content="KiwiButton" FontSize="15" Width="100" Height="50" HorizontalAlignment="Left" Margin="108,300,0,0" VerticalAlignment="Top"/>
</Grid>
The error is gone
How should I reference the KiwiColor.xaml in App.xaml?
KiwiColor.xaml:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Color x:Key="HiGreen">#FF00AAA6</Color>
<SolidColorBrush x:Key="HiGreenBrush">#FF00AAA6</SolidColorBrush>
<Color x:Key="ButtonStepColor">#FF00BB86</Color>
<Color x:Key="HiGreenGradientStep1">#FF00BB88</Color>
<Color x:Key="HiGreenGradientStep2">#FF00AA88</Color>
<Color x:Key="HiBlack">#FF0E0E0E</Color>
<SolidColorBrush x:Key="HiBlackBrush">#FF0E0E0E</SolidColorBrush>
<Color x:Key="HiGray">#FFC0C0C0</Color>
<SolidColorBrush x:Key="HiGrayBrush">#FFC0C0C0</SolidColorBrush>
<SolidColorBrush x:Key="ProgressBar.Background" Color="#C0C0C0"/>
<LinearGradientBrush x:Key="HiBackgroundBrush" EndPoint="1,0" StartPoint="0,0" >
<GradientStop Color="{StaticResource HiGreenGradientStep1}" Offset="0"/>
<GradientStop Color="{StaticResource HiGreenGradientStep2}" Offset="0.5"/>
<GradientStop Color="{StaticResource HiGreen}" Offset="1"/>
</LinearGradientBrush>
I find the point:
1.The "Output type" of the demo project is "Class Library"
2.The "Build Action" of the demo project is "Page"
Then reports : The resource "HiGreenBrush" could not be resolved.
I use another program to start the demo project, so it is set to dll.
And I change the demo project as follows:
1.The "Output type" of the demo project is "Windows Application"
2.The "Build Action" of the demo project is "ApplicationDefinition"
The error is gone.
And this is why #Andy and #mm8 said it should work ok.
How should I reference the KiwiColor.xaml if the demo project is a dll??
I tried replicating this issue.
I have a customcontrol library WpfCustomControlLibrary1 which has my version of kiwibutton in it.
I added a usercontrol library and put a resource dictionary in that.
There's the one brush in that:
<SolidColorBrush Color="Green" x:Key="MyGreen"/>
I merge it in app.xaml
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/ColourLibrary;component/ColourDictionary.xaml"/>
<ResourceDictionary Source="pack://application:,,,/WpfCustomControlLibrary1;component/Themes/Generic.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
Have a reference to ColourLibrary and WpfCustomControlLibrary1 in my main project.
In there I have a kiwibutton
<Button Background="{StaticResource MyGreen}"
Content="KiwiButton" FontSize="15" Width="100" Height="50"
HorizontalAlignment="Left" Margin="108,300,0,0" VerticalAlignment="Top"/>
And that works fine for me.
That's one way to implement what you describe.
Ordinarily, I would expect everything that is part of a theme to be in the one theme rather than different projects.
The way custom controls work is rather a complication from that perspective and I rarely use them. I see the reason to have a custom control at all is if you want to completely re template it depending on various themes. Creating a viable all encompassing theme is a lot of work. Very few clients want a full on switchable theme, in my experience. Cost way too much to develop.
I wonder whether there's something subtly wrong with your resource dictionary merging.

XAML: How to bind over 2 properties to a DynamicResourceExtension

I have a ResourceDictionary for Colors:
<ResourceDictionary>
<Color x:Key="Ori">#000000</Color>
</ResourceDictionary>
Then use DynamicResource to reference them:
<DynamicResource x:Key="Ref", ResourceKey="Ori" />
When over 2 properties bind to Ref:
<SomeControl1.Background>
<SolidColorBrush Color="{StaticResource Ref}">
</SomeControl1.Background>
<SomeControl2.Background>
<SolidColorBrush Color="{StaticResource Ref}">
</SomeControl2.Background>
It would cause when running:
"Ref" is not a valid value for property "Color"
I guess that's because they're both TwoWay Bindings.
Any method to fix?
You can simply do it in that way:
<ResourceDictionary>
<Color x:Key="Ori">#000000</Color>
</ResourceDictionary>
Your controls:
<SomeControl1.Background>
<SolidColorBrush Color="{DynamicResource Ori}">
</SomeControl1.Background>
<SomeControl2.Background>
<SolidColorBrush Color="{DynamicResource Ori}">
</SomeControl2.Background>
Using also StaticResource is weird.

Organizing Xaml - Unable to apply StaticResource from different xaml file

I have a situation where the wpf application is not able to pickup StaticResource and instead fails with XamlParseException. But if I used a DynamicResource instead, the resource is found and no exception occurs.
I was trying to style and organize wpf resources as recommended at http://projekt202.com/blog/2010/xaml-organization/
I have 2 projects accordingly, a wpf control library that houses all resources and a main wpf project which uses those resources. Here is the structure of the 2 projects
Projects Structure
Wpf_Theme.ControlLibrary
--ResourceDictionaries
----BaseControlStyles
------ButtonStyle.xaml
------TextBoxStyle.xaml
----Brushes
------DefaultBlueTheme
----ResourceLibrary.xaml
Wpf_Theme.Main
--App.xaml
--MainWindow.xaml
Contents of xaml files
ButtonStyle.xaml
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="{StaticResource ControlBackground}"/>
<Setter Property="BorderBrush" Value="{StaticResource BorderColor}"/>
...
</Style>
DefaultBlueTheme.xaml (Brushes)
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<SolidColorBrush x:Key="PanelBackground" Color="#C8DCF0"/>
<SolidColorBrush x:Key="BorderColor" Color="#6A8FB5"/>
<SolidColorBrush x:Key="SelectedItemBackground" Color="Wheat"/>
<SolidColorBrush x:Key="TextForeground" Color="Black"/>
<LinearGradientBrush x:Key="ControlBackground" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="#DBECFD"/>
<GradientStop Offset="0.5" Color="#C7DBEF"/>
<GradientStop Offset="1" Color="#B0CAE5"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</ResourceDictionary>
ResourceLibrary.xaml (Merges all dictionaries in one file to be used by main project)
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Brushes/DefaultBlueTheme.xaml"/>
<ResourceDictionary Source="BaseControlStyles/ButtonStyle.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
App.xaml (In Main project)
<Application x:Class="Wpf_Themes.Main.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="/Wpf_Themes.ControlLibrary;component/ResourceDictionaries/ResourceLibrary.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
MainWindow.xaml
<Window x:Class="Wpf_Themes.Main.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<StackPanel Width="200" Margin="10">
<Button>Click Me</Button>
</StackPanel>
</Window>
As stated earlier in the post, I am not able to resolve the style(Background and Border brushes) for the Button using the StaticResource applied in ButtonStyle.xaml. If I use DynamicResource instead, the brushes are found correctly and applied to the Button. Any insights why this behavior occurs.
Edit:
Following Mike's suggestion, I included the xaml files from the Wpf_Theme.ControlLibrary project directly into the App.xaml of the Main project like below
App.xaml
<Application x:Class="Wpf_Themes.Main.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="/Wpf_Themes.ControlLibrary;component/ResourceDictionaries/Brushes/DefaultBlueTheme.xaml"/>
<ResourceDictionary Source="/Wpf_Themes.ControlLibrary;component/ResourceDictionaries/BaseControlStyles/ButtonStyle.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
and resources are now located correctly using the StaticResource
Static resource references are resolved at parse time (for the most part), whereas dynamic references are resolved at run time. This means a static reference can only be used if the resource has been parsed before the reference, whereas a dynamic reference can be used as a forward reference for a resource that is defined later.
Source: http://drwpf.com/blog/category/resources/
When the two ResourceDictionaries are in a separte Assembly and you reference them at the same time I would guess that this processing happens at the same time. Whereas if you load them in App.xaml directly it is ensured that they are loaded in the right order.
So the Resources of your first Dictionary are not available to the second Dictionary since you include them in the same Dictionary.
There is two ways to solve the Problem. Either you use DynamicResources which are evalutated at runtime (like you already tried).
Another solution if you now the hyrachie of your Resource Dictionaries you can do several levels. Like:
<Application x:Class="WPF_Theme.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="pack://application:,,,/ControlLibrary;component/ResourceDictionaries/BaseLevel.xaml" />
<ResourceDictionary Source="pack://application:,,,/ControlLibrary;component/ResourceDictionaries/SecondLevel.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
BaseLevel.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Brushes/DefaultBlueTheme.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
SecondLevel.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="BaseControlStyles/ButtonStyle.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
DefaultBlueTheme.xaml and ButtonStyle.xaml stays unchanged.
With this you would ensure that the different ResourceDictionaries are already there if you need them.
I hope that helps.

How to use a StaticResource Brush's Color?

I have a brush as a Resource:
<Application.Resources>
<SolidColorBrush x:Key="AppBrush" Color="#FFFFFF"/>
</Application.Resources>
and I want to use it's Color:
<... BackgroundColor="{StaticResource AppBrush.Color}"/>
But it isn't possible and I get a xaml corruption error. How can I do that?
or in other away how to use Brush's Color in another Color resource:
<Application.Resources>
<Color x:Key="AppColor">#FFFFFF { here how to use AppBrush.Color?}</Color>
<SolidColorBrush x:Key="AppBrush" Color="#FFFFFF"/>
</Application.Resources>
it's even easier:
BackgroundColor="{StaticResource AppBrush}"
or try this
<Application.Resources>
<Color x:Key="AppColor">#FFFFFF</Color>
<SolidColorBrush x:Key="AppBrush" Color="{StaticResource AppColor}"/
</Application.Resources>
Try this:
BackgroundColor="{Binding Color, Source={StaticResource AppBrush}}"
This will only work if AppBrush is a SolidColorBrush.

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.

Categories