Why does applying this gradient style break my silverlight app? - silverlight

I am having some issues with applying a gradient to a RadButton.
I have a gradient definition in my styles resource dictionairy like so :
<LinearGradientBrush x:Key="GridView_HeaderBackground" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF5B5B5B" Offset="1"/>
<GradientStop Color="#FF868686"/>
<GradientStop Color="#FF4F4F4F" Offset="0.42"/>
<GradientStop Color="#FF0E0E0E" Offset="0.43"/>
</LinearGradientBrush>
When i apply this gradient directly to the background of a RadButton everything works.
Here is the button and the template definition:
Button
<telerik:RadButton Margin="5,10,5,0" Click="RadButton_Click" Tag="30" Content="30 Days" Style="{StaticResource SliderButton}" Background="{StaticResource GridView_HeaderBackground}" />
Template:
<!-- Style Template for Slider RadButton -->
<Style x:Key="SliderButton" TargetType="telerik:RadButton">
<Setter Property="Height" Value="30" />
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Margin" Value="5,2" />
</Style>
However when applying this gradient in the resource dictionary, my application will not load it simply gets to the silverlight loading screen and then never proceeds
Here is the button and template which breaks my app.
Button:
<telerik:RadButton Margin="5,10,5,0" Click="RadButton_Click" Tag="30" Content="30 Days" Style="{StaticResource SliderButton}" />
Template:
<!-- Style Template for Slider RadButton -->
<Style x:Key="SliderButton" TargetType="telerik:RadButton">
<Setter Property="Background" Value="{StaticResource GridView_HeaderBackground}" />
<Setter Property="Height" Value="30" />
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Margin" Value="5,2" />
</Style>
When i observe the js error console in google chrome i notice the following error is produced:
"Cannot find a resource with the
name/key ResourceWrapper"

The "GridView_HeaderBackground" needs to be defined before "SliderButton". If they are in the same Xaml then that is determined by document order.

Related

BorderThickness doesn't work

I'm trying to create style for button in XAML, here is my code:
<Window.Resources>
<Style x:Key="buttons"
TargetType="Control">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush>
<GradientStop Color="GoldenRod"
Offset="0" />
<GradientStop Color="Gold"
Offset="0.10" />
<GradientStop Color="White"
Offset="0.45" />
<GradientStop Color="Gold"
Offset="0.9" />
<GradientStop Color="GoldenRod"
Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="FontFamily"
Value="Consolas" />
<Setter Property="FontSize"
Value="15" />
<Setter Property="FontWeight"
Value="Bold" />
<Setter Property="BorderThickness"
Value="5" />
<Setter Property="Padding"
Value="0,0" />
</Style>
</Window.Resources>
Everything works fine except BorderThickness property - no matter what value I'm putting there, it doesn't change. I'm wondering what is missing in my code.
Checkout the Button control default template here.
http://msdn.microsoft.com/en-us/library/ms753328%28v=vs.90%29.aspx
If we see BorderThickness property has been set to fixed value 1. Hence no changes are reflected.
You need to create a new ControlTemplate for this purpose.

WPF style for Border affecting window

I have a simple WPF (4.0) sample that aims the demonstrate the strangeness I am facing in another project. The sample tries to display a few rectangle shapes for which I use Border elements. Below is the markup:
<Window x:Class="WpfApplication1.Window3"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window3" Height="1000" Width="1500">
<Window.Resources>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" x:Key="grad">
<LinearGradientBrush.GradientStops>
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<Style TargetType="Border">
<Setter Property="Background" Value="{StaticResource grad}" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Width" Value="100" />
<Setter Property="Height" Value="100" />
<Setter Property="BorderThickness" Value="1" />
</Style>
</Window.Resources>
<StackPanel Orientation="Horizontal">
<Border />
<Border />
<Border />
</StackPanel>
</Window>
In the designer this looks exactly how I imagine it: 3 squares next to each other on the top left of the screen. However at runtime only 1 is displayed and the rest of the window is black. Seemingly the window's content itself is affected by the layout properties. If I use Rectangles instead of Borders the sample works just fine. Can anyone explain please why I am seeing this behaviour (inheritance related maybe)? Also is the difference between design-time view and run-time view basically a VS bug?
Change it like this:
<Style TargetType="Border" x:Key="myborder">
<Setter Property="Background" Value="{StaticResource grad}" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Width" Value="100" />
<Setter Property="Height" Value="100" />
<Setter Property="BorderThickness" Value="1" />
</Style>
</Window.Resources>
<StackPanel Orientation="Horizontal">
<Border Style = {StaticResources myborder}/>
<Border Style = {StaticResources myborder}/>
<Border Style = {StaticResources myborder}/>
</StackPanel>
Now its OK.
EDIT:
Each Winwow's template is a Border that has a AdornerDecorator in it. And in that decorator there is a ContentPresenter. So when you create a default style for borders it affect the Window's border too.

WPF binding linear gradient property with Button

I want to bind the gradient property to the button. I am using below code. I am able to bind the style. Can you suggest how should i bind the linergradientbrush property??
<Window.Resources>
<ResourceDictionary>
<LinearGradientBrush x:Key="buttonStyleGradient" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0" />
<GradientStop Color="#FFACC3F5" Offset="1" />
</LinearGradientBrush>
<Style x:Key="buttonStyle" TargetType="Button">
<Setter Property="FontFamily" Value="Vrinda"/>
<Setter Property="FontSize" Value="24"/>
<Setter Property="Padding" Value="8,4" />
<Setter Property="Margin" Value="0" />
</Style>
</ResourceDictionary>
</Window.Resources><Button Style="{StaticResource buttonStyle}" >
<Label>Home</Label>
</Button>
Just add the buttonStyleGradient to the buttonStyle as a Background Property:
<Style x:Key="buttonStyle" TargetType="Button">
<Setter Property="FontFamily" Value="Vrinda"/>
<Setter Property="FontSize" Value="24"/>
<Setter Property="Padding" Value="8,4" />
<Setter Property="Margin" Value="0" />
<Setter Property="Background" Value="{StaticResource buttonStyleGradient}" />
</Style>
And if you don't want to add it to the style, you can manually put in on the button like this:
<Button Style="{StaticResource buttonStyle}" Background="{StaticResource buttonStyleGradient}" >
You need a property to apply the gradient to, try Background:
<Setter Property="Background" Value="{StaticResource buttonStyleGradient}"/>

Silverlight Toolkit - how to theme the tick color of a line series chart

i am in the middle of theming a Silverlight Line Series chart and for the life of me can't fiure out how to theme the color of the period ticks on my chart
they look great when showing on a light colored background, however on a dark background they are invisible (they are black)
any help will be greatly appreciated
thanks
Doug
When you look at the built-in styles of Silverlight Toolkit charts, you'll see the following:
<!-- charting:Chart -->
<Style TargetType="charting:Chart">
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Padding" Value="10" />
<Setter Property="Palette">
<Setter.Value>
<datavis:ResourceDictionaryCollection>
<!-- Blue -->
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
<GradientStop Color="#FFB9D6F7" />
<GradientStop Color="#FF284B70" Offset="1" />
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}" />
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}" />
<Setter Property="StrokeThickness" Value="2" />
<Setter Property="StrokeMiterLimit" Value="1" />
<Setter Property="Fill" Value="{StaticResource Background}" />
</Style>
</ResourceDictionary>
<!-- Red -->
<ResourceDictionary>
<RadialGradientBrush x:Key="Background" GradientOrigin="-0.1,-0.1" Center="0.075,0.015" RadiusX="1.05" RadiusY="0.9">
<GradientStop Color="#FFFBB7B5" />
<GradientStop Color="#FF702828" Offset="1" />
</RadialGradientBrush>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="{StaticResource Background}" />
</Style>
<Style x:Key="DataShapeStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{StaticResource Background}" />
<Setter Property="StrokeThickness" Value="2" />
<Setter Property="StrokeMiterLimit" Value="1" />
<Setter Property="Fill" Value="{StaticResource Background}" />
</Style>
</ResourceDictionary>
The colors come from the Palette property - each new series gets another entry from this palette, as far as I can tell.

In XAML style, how to change solid background to gradient?

I've got a MainResources.xaml file in which I have a style that defines how each of my windows in my application look:
<Style x:Key="MainBorderStyle" TargetType="{x:Type Border}">
<Setter Property="Background" Value="WhiteSmoke" />
<Setter Property="BorderBrush" Value="LightGray" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="5" />
<Setter Property="SnapsToDevicePixels" Value="True" />
</Style>
Instead of "WhiteSmoke" I want my background to be this gradient:
<LinearGradientBrush>
<GradientStop Color="#ccc" Offset="0"/>
<GradientStop Color="#bbb" Offset="1"/>
</LinearGradientBrush>
But the following attempt causes VS2008 to tell me "Style setters do not support child elements":
<Style x:Key="MainBorderStyle" TargetType="{x:Type Border}">
<Setter Property="Background">
<LinearGradientBrush>
<GradientStop Color="#ccc" Offset="0"/>
<GradientStop Color="#bbb" Offset="1"/>
</LinearGradientBrush>
</Setter>
<Setter Property="BorderBrush" Value="LightGray" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="5" />
<Setter Property="SnapsToDevicePixels" Value="True" />
</Style>
What is the correct way to put a gradient color as the background for this style?
You are missing the <Setter.Value>
<Style ...>
<Setter Property="...">
<Setter.Value>
<LinearGradientBrush />
</Setter.Value>
</Setter>
</Style>

Resources