Question

I have created a style which defines a common look for a control. This includes a RadialGradientBrush, and a border with a corner radius.

I apply this style to the relevant Border controls that I want to look like this.

Within the style, I indicate the 3 colours for the RadialGradientBrush, however, I want to be able to make one of the colours specified pick up the colour from the actual Border control.

<Style x:Key='ButtonStyle' TargetType='Border'>
    <Setter Property='CornerRadius' Value='10' />
    <Setter Property='Margin' Value='2' />
    <Setter Property='BorderThickness' Value='1'/>
    <Setter Property='BorderBrush' Value='White'/>
    <Setter Property='Background'>
        <Setter.Value>
            <RadialGradientBrush >
                <GradientStop Color='DarkBlue' Offset='0.9'/>
                <GradientStop Color='White' Offset='0.7'/>
                <GradientStop Color='Black' Offset='0.3' />
            </RadialGradientBrush>
        </Setter.Value>
    </Setter>
</Style>

So, where it says DarkBlue in the <Style> I want it to say something like Control.Backcolor. Then it will use the background colour defined in the actual control to replace this value.

Hope that makes sense.
Thanks
Rich.

Answer 1

You could solve it this way:

    <Grid>
    <Grid.Resources>
      <local:ColorConverter x:Key="myColorConverter"/>
      <Style x:Key="ButtonStyle" TargetType="{x:Type Border}">
        <Setter Property="CornerRadius" Value="10" />
        <Setter Property="Margin" Value="2" />
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Background">
          <Setter.Value>
            <RadialGradientBrush >
              <GradientStop Color="{Binding Path=BorderBrush,Converter={StaticResource myColorConverter}, RelativeSource={RelativeSource AncestorType={x:Type Border}}}" Offset="0.9" />
              <GradientStop Color='White' Offset='0.7'/>
              <GradientStop Color='Black' Offset='0.3' />
                     </RadialGradientBrush>
          </Setter.Value>
        </Setter>
      </Style>

    </Grid.Resources>
      <StackPanel x:Name="myStackPanel">
        <Border x:Name="myBorder1" Style="{StaticResource ButtonStyle}" BorderBrush="Yellow" Height="25"></Border>
        <Border x:Name="myBorder2" Style="{StaticResource ButtonStyle}" BorderBrush="Green" Height="25"></Border>
      </StackPanel>
  </Grid>

And you need a converter to access the brush’s color.

  public class ColorConverter : IValueConverter
  {
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
      if (value is SolidColorBrush)
      {
        var brush = value as SolidColorBrush;
        return brush.Color;
      }
      return null;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
      throw new NotImplementedException();
    }
  }

In this sample I use the BorderBrush of the border to be the outmost color for your RadialGradientBrush. You can’t use the Background property here as it would override the value set by the style.
A cleaner solution would be to derive your own Border and create DependencyProperties for your distinct color values …