26
Sep

Create Gradient Background

Post a comment » Popularity: 1%

Most of the time when you are using Visual Studio and you don’t’ want to open Blend for just setting a very Gradient Background! The below code can surely help you.

Create Gradient Background in XAML

Creat gradient background in c#:
LinearGradientBrush linear = new LinearGradientBrush();
linear.StartPoint = new Point(0.5, 0);
linear.EndPoint = new Point(0.5, 1);

GradientStop g1 = new GradientStop();
g1.Color = _backgroundColor1;
g1.Offset = 0;

GradientStop g2 = new GradientStop();
g2.Color = _backgroundColor2;
g1.Offset = 1;

linear.GradientStops.Add(g2);
linear.GradientStops.Add(g1);

Border border = new Border();
border.Background = linear;
Creating gradient background in xaml:
<UserControl x:Class="GradientBackground.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="600" Height="400">
    <Grid x:Name="LayoutRoot" Background="White">
        <Rectangle Stroke="Black" Height="180" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="285">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="0"/>
                    <GradientStop Color="White" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle Stroke="Black" Height="190" HorizontalAlignment="Left" Margin="10,0,0,10" VerticalAlignment="Bottom" Width="285">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0,0" StartPoint="0,1">
                    <GradientStop Color="Black" Offset="0"/>
                    <GradientStop Color="White" Offset="0.1"/>
                    <GradientStop Color="Black" Offset="0.2"/>
                    <GradientStop Color="White" Offset="0.3"/>
                    <GradientStop Color="Black" Offset="0.4"/>
                    <GradientStop Color="White" Offset="0.5"/>
                    <GradientStop Color="Black" Offset="0.6"/>
                    <GradientStop Color="White" Offset="0.7"/>
                    <GradientStop Color="Black" Offset="0.8"/>
                    <GradientStop Color="White" Offset="0.9"/>
                    <GradientStop Color="Black" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle Stroke="Black" Height="180" HorizontalAlignment="Right" Margin="0,10,10,0" VerticalAlignment="Top" Width="285">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0,0" StartPoint="1,1">
                    <GradientStop Color="Black" Offset="0"/>
                    <GradientStop Color="Red" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle Stroke="Black" Height="190" HorizontalAlignment="Right" Margin="0,0,10,10" VerticalAlignment="Bottom" Width="285">
            <Rectangle.Fill>
                <RadialGradientBrush>
                    <GradientStop Color="White" Offset="0"/>
                    <GradientStop Color="Black" Offset="1"/>
                </RadialGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
    </Grid>
</UserControl>
View Demo: New Window
  • DZone
  • Digg
  • del.icio.us
  • StumbleUpon
  • Reddit

Related Posts

Leave a Reply