Theme Resources to define gradient stop color UWP

Question

I am creating UWP application.I have few LinearGradientBrushes, where the color is set directly in the LinearGradientBrush reference as GradientStops. However, I want to have a predefined set of colors defined in the resource distionary that I can use a a reference for each GradientStop, so that changing the color scheme for the application is a matter of changing the values of the SolidColorBrushes:

   <!--Resource Dictionary  -->
<ResourceDictionary.ThemeDictionaries>
        <ResourceDictionary x:Key="Default">
             <SolidColorBrush x:Key="stop1" Color="#FF5A5A5A"/>
<SolidColorBrush x:Key="stop2" Color="#FF222222"/>
</ResourceDictionary>
<ResourceDictionary x:Key="Dark">
             <SolidColorBrush x:Key="stop1" Color="Black"/>
<SolidColorBrush x:Key="stop2" Color="White"/>
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
             <SolidColorBrush x:Key="stop1" Color="Black"/>
<SolidColorBrush x:Key="stop2" Color="White"/>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
    <!-- control Template-->
    <LinearGradientBrush x:Key="gradient">
      <GradientStop Color="{Binding Source={Themeresource stop1},Path=Color}" Offset="0"/>
      <GradientStop Color="{Binding Source={Themeresource stop2},Path=Color}" Offset="1"/>
    </LinearGradientBrush>

Its Giving error that nam/key stop1 is not Found

Nico Zhu · Answer 1 · 2020-06-23T15:18:29.080

The problem is stop1 is static resource but not Themeresource . So, we need edit binding source as StaticResource.

<LinearGradientBrush x:Key="gradient">
    <GradientStop Color="{Binding Source={StaticResource stop1},Path=Color}" Offset="0"/>
    <GradientStop Color="{Binding Source={StaticResource stop2},Path=Color}" Offset="1"/>
</LinearGradientBrush>

Update

For the testing, if we place above in ResourceDictionary, it will work.

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Default">
                <SolidColorBrush x:Key="stop1" Color="#FF5A5A5A"/>
                <SolidColorBrush x:Key="stop2" Color="#FF222222"/>
            </ResourceDictionary>
            <ResourceDictionary x:Key="Dark">
                <SolidColorBrush x:Key="stop1" Color="Black"/>
                <SolidColorBrush x:Key="stop2" Color="White"/>
            </ResourceDictionary>
            <ResourceDictionary x:Key="HighContrast">
                <SolidColorBrush x:Key="stop1" Color="Black"/>
                <SolidColorBrush x:Key="stop2" Color="White"/>
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
   

 
    <!-- control Template-->
    <LinearGradientBrush x:Key="gradient">
        <GradientStop Color="{Binding Source={ThemeResource stop1},Path=Color}" Offset="0"/>
        <GradientStop Color="{Binding Source={ThemeResource stop2},Path=Color}" Offset="1"/>
    </LinearGradientBrush>
    </ResourceDictionary>
</Page.Resources>

I have the edited above code.have a look into it.Actually I want to bind to themeresouce so that i can support system them change i.e dakmode,highcontrast,lightmode — sridhar patro, Jun 23 '20 at 14:23
And I found you used wrong code `Themeresource` should be `ThemeResource` — Nico Zhu, Jun 23 '20 at 15:20
I have used ThemeResource but still it gives key not found error — sridhar patro, Jun 23 '20 at 17:20
I used the same `ThemeResource` and it could work in my side, could you mind share a blank sample for us. — Nico Zhu, Jun 29 '20 at 07:15

sridhar patro · Answer 2 · 2020-07-03T10:08:38.537

The above problem can be solved by using binding

public LinearGradientBrush GradientBrush
    {
        get { return _GradientBrush; }
        set
        {
            _GradientBrush = value;
            RaisePropertyChanged("GradientBrush");
        }
    }
 GradientBrush = GetGradientBrush();

 public static LinearGradientBrush GetGradientBrush()
    {
        var grColor1 = ((SolidColorBrush)Application.Current.Resources["stop1"]).Color;
        var grColor2 = ((SolidColorBrush)Application.Current.Resources["stop2"]).Color;
        LinearGradientBrush lgBrush = new LinearGradientBrush();
        lgBrush.GradientStops.Add(new GradientStop() { Color = grColor1, Offset = 0.1 });
        lgBrush.GradientStops.Add(new GradientStop() { Color = grColor2, Offset = 0.9 });

        lgBrush.StartPoint = new Point(0, 1);
        lgBrush.EndPoint = new Point(1, 0);

       return lgBrush;
    }

<Grid Background="{Binding GradientBrush}" >

Theme Resources to define gradient stop color UWP

2 Answers2