Have you ever been to a restaurant ordering a red steak from the menu, just to find out that you very well done (almost white) steak?
Well, that is how I felt when I ordered a silverlight button with red background.
I created a background like this
<Canvas Height="50" Width="200" Margin="0,0,0,20"> <Canvas.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFB72020" Offset="0.539"/> <GradientStop Color="#FFFFDCDC"/> <GradientStop Color="#FF530000" Offset="1"/> </LinearGradientBrush> </Canvas.Background> </Canvas> but when I create a button with the same background
<Button Height="50" Width="200" Click="Button2_Click" x:Name="_button2"> <Button.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFB72020" Offset="0.539"/> <GradientStop Color="#FFFFDCDC"/> <GradientStop Color="#FF530000" Offset="1"/> </LinearGradientBrush> </Button.Background> <TextBlock>Click Me</TextBlock> </Button> it looked like this
That was not the button background I ordered!
So I started digging...
The default button template for in Silverlight is defined as
<ControlTemplate TargetType="controls:Button"> <Grid> <!-- snipped the 36 lines of VisualStatManager here --> <Border x:Name="Background" CornerRadius="3" Background="White" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}"> <Grid Background="{TemplateBinding Background}" Margin="1"> <Border Opacity="0" x:Name="BackgroundAnimation" Background="#FF448DCA" /> <Rectangle x:Name="BackgroundGradient" > <Rectangle.Fill> <LinearGradientBrush StartPoint=".7,0" EndPoint=".7,1"> <GradientStop Color="#FFFFFFFF" Offset="0" /> <GradientStop Color="#F9FFFFFF" Offset="0.375" /> <GradientStop Color="#E5FFFFFF" Offset="0.625" /> <GradientStop Color="#C6FFFFFF" Offset="1" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> </Grid> </Border> <ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/> <Rectangle x:Name="DisabledVisualElement" RadiusX="3" RadiusY="3" Fill="#FFFFFFFF" Opacity="0" IsHitTestVisible="false" /> <Rectangle x:Name="FocusVisualElement" RadiusX="2" RadiusY="2" Margin="1" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" /> </Grid> </ControlTemplate> ...so, the standard button template is using a rectangle which hide background defined on the button.
I created I quick fix (hiding the rectangle), now the background shines through. public color SlBackgroundButton : Button { public override void OnApplyTemplate() { base.OnApplyTemplate(); Rectangle rect = GetTemplateChild("BackgroundGradient") as Rectangle; if (rect != null) { LinearGradientBrush lbrush = rect.Fill as LinearGradientBrush; if (lbrush != null && lbrush.GradientStops.Count > 3) { lbrush.GradientStops[0].Color = Colors.Transparent; lbrush.GradientStops[1].Color = Colors.Transparent; lbrush.GradientStops[2].Color = Colors.Transparent; lbrush.GradientStops[3].Color = Colors.Transparent; } } } } The result is the button "Steak" :-) I ordered
|
Blog >