Search...

Friday, March 21, 2014

Awesome LinearGradientBrush

Introduction

A linear gradient brush paints an area with a linear gradient. The LinearGradientBrush object represents a linear gradient brush. The default value linear gradient value is diagonal. The StartPoint and EndPoint properties of the LinearGradientBrush represent the start and end points of a gradient. The default values of these properties is (0,0) and (1,1), which is upper-left corner to lower-right corner of an area.

Figure 1 and 2 shows a diagonal gradient.

Fig1. Linear Gradient


Fig2. Linear Gradient with Stops


Example of Linear Gradient Brush
This example shows how to use the LinearGradientBrush class to paint an area with a linear gradient.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<Window x:Class="LinearGradientBrushTutorial.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Width="722" SizeToContent="Height" ResizeMode="NoResize">

    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary
                  Source="Theme.xaml">
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

    <WrapPanel FlowDirection="LeftToRight" Margin="10">

        <Rectangle Fill="{StaticResource CyanThemeBG}"/>
        <Rectangle Fill="{StaticResource MagentaBG}"/>
        <Rectangle Fill="{StaticResource BlackBG}"/>
        <Rectangle Fill="{StaticResource LightBG}"/>

        <Rectangle Fill="{StaticResource TealGreen}"/>
        <Rectangle Fill="{StaticResource CyanLargeBG}"/>
        <Rectangle Fill="{StaticResource MagentaLargeBG}"/>
        <Rectangle Fill="{StaticResource LightLargeBG}"/>

        <Rectangle Fill="{StaticResource GreenLargeBG}"/>
        <Rectangle Fill="{StaticResource PurpleBG}"/>
        <Rectangle Fill="{StaticResource DarkGreen}"/>
        <Rectangle Fill="{StaticResource DarkYellow}"/>

        <Rectangle Fill="{StaticResource DarkGrape}"/>
        <Rectangle Fill="{StaticResource DarkBrown}"/>
        <Rectangle Fill="{StaticResource ReflectedGradient}"/>
        <Rectangle Fill="{StaticResource ReflectedGradientBlue}"/>
        <Rectangle Fill="{StaticResource ReflectedGradientGray}"/>
        <Rectangle Fill="{StaticResource MulticoloredGradientRainbow}"/>
        <Rectangle Fill="{StaticResource DiagonalLinearGradientRainbow1}"/>
        <Rectangle Fill="{StaticResource DiagonalLinearGradientRainbow2}"/>
        <Rectangle Fill="{StaticResource DiagonalLinearGradient}"/>
        <Rectangle Fill="{StaticResource HorizontalLinearGradient1}"/>
        <Rectangle Fill="{StaticResource HorizontalLinearGradient2}"/>
        <Rectangle Fill="{StaticResource GradientStopCollection}"/>
        <Rectangle Fill="{StaticResource LinearGradientBrushSpreadMethodPad}"/>
        <Rectangle Fill="{StaticResource LinearGradientBrushSpreadMethodReflect}"/>
        <Rectangle Fill="{StaticResource LinearGradientBrushSpreadMethodRepeat}"/>
        <Rectangle Fill="{StaticResource RadialGradientBrush}"/>
        <Rectangle Fill="{StaticResource RadialGradientBrushSpreadMethodPad}"/>
        <Rectangle Fill="{StaticResource RadialGradientBrushSpreadMethodReflect}"/>
        <Rectangle Fill="{StaticResource RadialGradientBrushSpreadMethodRepeat}"/>
        <Rectangle Fill="{StaticResource RadialGradientBrushOpp}"/>
        <Rectangle Fill="{StaticResource LinearGradientBrushWithOpacity1}"/>
        <Rectangle Fill="{StaticResource LinearGradientBrushWithOpacity2}"/>
        <Rectangle Fill="{StaticResource LinearGradientBrushWithOpacity3}"/>
        <Rectangle Fill="{StaticResource LinearGradientBrushWithOpacity4}"/>
    </WrapPanel>

</Window>

Theme File:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   
    <Style TargetType="Rectangle">
        <Setter Property="Width" Value="150"/>
        <Setter Property="Height" Value="50"/>
        <Setter Property="Margin" Value="10"/>
        <Setter Property="BitmapEffect">
            <Setter.Value>
                <DropShadowBitmapEffect />
            </Setter.Value>
        </Setter>
    </Style>

    <LinearGradientBrush x:Key="CyanThemeBG" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFC6ECFE"/>
        <GradientStop Color="#FF003FFF" Offset="1"/>
        <GradientStop Color="#FF37AFF9" Offset="0.5"/>
        <GradientStop Color="#FF0076DB" Offset="0.5"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="MagentaBG" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFFFCFFB" Offset="0"/>
        <GradientStop Color="#FF930E2F" Offset="1"/>
        <GradientStop Color="#FFFF659D" Offset="0.5"/>
        <GradientStop Color="#FFC7174B" Offset="0.5"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="BlackBG" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFE5E7FA"/>
        <GradientStop Color="#FF747C8D" Offset="0.5"/>
        <GradientStop Color="#FF000000" Offset="0.5"/>
        <GradientStop Color="#FF0F0F0F" Offset="1"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="LightBG" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFE5E7FA"/>
        <GradientStop Color="#FFE3E6F5" Offset="0.5"/>
        <GradientStop Color="#FFD5DBF1" Offset="0.5"/>
        <GradientStop Color="#FFE1E4FF" Offset="1"/>
    </LinearGradientBrush>
   
   
    <LinearGradientBrush x:Key="TealGreen" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFE3FCA9" Offset="0"/>
        <GradientStop Color="#FF82B03C" Offset="1"/>
        <GradientStop Color="#FFD8FA6C" Offset="0.5"/>
        <GradientStop Color="#FFE0FF98" Offset="0.5"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="CyanLargeBG" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF003FFF" Offset="1"/>
        <GradientStop Color="#FF37AFF9" Offset="0"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="MagentaLargeBG" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF930E2F" Offset="1"/>
        <GradientStop Color="#FFFF659D" Offset="0"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="LightLargeBG" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFE3E6F5" Offset="0"/>
        <GradientStop Color="#FF9D9D9D" Offset="1"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="GreenLargeBG" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF82B03C" Offset="1"/>
        <GradientStop Color="#FFD8FA6C" Offset="0"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="PurpleBG" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFB0B8FF"/>
        <GradientStop Color="#FF747C8D" Offset="0.5"/>
        <GradientStop Color="#FF000000" Offset="0.5"/>
        <GradientStop Color="#FF151733" Offset="1"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="DarkGreen" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFB0FFC4"/>
        <GradientStop Color="#FF5D645F" Offset="0.5"/>
        <GradientStop Color="#FF000000" Offset="0.5"/>
        <GradientStop Color="#FF15331F" Offset="1"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="DarkYellow" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFF3FFB0"/>
        <GradientStop Color="#FF63645D" Offset="0.5"/>
        <GradientStop Color="#FF000000" Offset="0.5"/>
        <GradientStop Color="#FF2F3315" Offset="1"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="DarkGrape" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFFFB0FD"/>
        <GradientStop Color="#FF8D7485" Offset="0.5"/>
        <GradientStop Color="#FF000000" Offset="0.5"/>
        <GradientStop Color="#FF331532" Offset="1"/>
    </LinearGradientBrush>
   
    <LinearGradientBrush x:Key="DarkBrown" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFFFEAB0"/>
        <GradientStop Color="#FF8D8774" Offset="0.5"/>
        <GradientStop Color="#FF000000" Offset="0.5"/>
        <GradientStop Color="#FF332A15" Offset="1"/>
    </LinearGradientBrush>
 
    <LinearGradientBrush x:Key="ReflectedGradient" StartPoint="0,0" EndPoint="0,0.5" SpreadMethod="Reflect">
        <GradientStop Color="Red" Offset="0"/>
        <GradientStop Color="White" Offset="1" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="ReflectedGradientBlue" StartPoint="0,0" EndPoint="0,0.5" SpreadMethod="Reflect">
        <GradientStop Color="CadetBlue" Offset="0"/>
        <GradientStop Color="White" Offset="1" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="ReflectedGradientGray" StartPoint="0,0" EndPoint="0,0.5" SpreadMethod="Reflect">
        <GradientStop Color="LightGray" Offset="0"/>
        <GradientStop Color="White" Offset="1" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="MulticoloredGradientRainbow" StartPoint="0,0" EndPoint="0,1">
        <GradientStop Color="Red" Offset="0.0" />
        <GradientStop Color="Orange" Offset="0.33" />
        <GradientStop Color="Yellow" Offset="0.5" />
        <GradientStop Color="Green" Offset="0.75" />
        <GradientStop Color="Blue" Offset="0.66" />
        <GradientStop Color="Indigo" Offset="0.83" />
        <GradientStop Color="Violet" Offset="1" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="DiagonalLinearGradientRainbow1" StartPoint="0,0" EndPoint="1,0">
        <GradientStop Color="Red" Offset="0.0" />
        <GradientStop Color="Orange" Offset="0.33" />
        <GradientStop Color="Yellow" Offset="0.5" />
        <GradientStop Color="Green" Offset="0.75" />
        <GradientStop Color="Blue" Offset="0.66" />
        <GradientStop Color="Indigo" Offset="0.83" />
        <GradientStop Color="Violet" Offset="1" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="DiagonalLinearGradientRainbow2" StartPoint="0,0" EndPoint="1,1">
        <GradientStop Color="Red" Offset="0.0" />
        <GradientStop Color="Orange" Offset="0.33" />
        <GradientStop Color="Yellow" Offset="0.5" />
        <GradientStop Color="Green" Offset="0.75" />
        <GradientStop Color="Blue" Offset="0.66" />
        <GradientStop Color="Indigo" Offset="0.83" />
        <GradientStop Color="Violet" Offset="1" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="DiagonalLinearGradient" StartPoint="0,0" EndPoint="1,1">
        <GradientStop Color="BurlyWood" Offset="0" />
        <GradientStop Color="White" Offset="1" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="HorizontalLinearGradient1" StartPoint="0,0" EndPoint="0,1">
        <GradientStop Color="Brown" Offset="0" />
        <GradientStop Color="White" Offset="1" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="HorizontalLinearGradient2" StartPoint="0,0" EndPoint="0,1">
        <GradientStop Color="MediumBlue" Offset="1"/>
        <GradientStop Color="White" Offset="0" />
    </LinearGradientBrush>

    <GradientStopCollection x:Key="CustomGradientStops">
        <GradientStop Offset="0.0" Color="White" />
        <GradientStop Offset="0.4" Color="Red" />
        <GradientStop Offset="0.5" Color="Yellow" />
        <GradientStop Offset="0.6" Color="Blue" />
        <GradientStop Offset="0.7" Color="Wheat" />
    </GradientStopCollection>
    <LinearGradientBrush x:Key="GradientStopCollection" GradientStops="{StaticResource CustomGradientStops}">
        <LinearGradientBrush.Transform>
            <RotateTransform CenterX="87.5" CenterY="45" Angle="45" />
        </LinearGradientBrush.Transform>
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="LinearGradientBrushSpreadMethodPad" StartPoint="0.3,0.5" EndPoint="0.7,0.5" SpreadMethod="Pad">
        <GradientStop Color="Chocolate" Offset="1"/>
        <GradientStop Color="Lavender" Offset="0" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="LinearGradientBrushSpreadMethodReflect" StartPoint="0.3,0.5" EndPoint="0.7,0.5" SpreadMethod="Reflect">
        <GradientStop Color="White" Offset="1"/>
        <GradientStop Color="BurlyWood" Offset="0" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="LinearGradientBrushSpreadMethodRepeat" StartPoint="0.3,0.5" EndPoint="0.7,0.5" SpreadMethod="Repeat">
        <GradientStop Color="White" Offset="1"/>
        <GradientStop Color="Turquoise" Offset="0" />
    </LinearGradientBrush>

    <RadialGradientBrush  x:Key="RadialGradientBrush">
        <GradientStop Color="White" Offset="0" />
        <GradientStop Color="Black" Offset="1" />
    </RadialGradientBrush >

    <RadialGradientBrush  x:Key="RadialGradientBrushSpreadMethodPad" SpreadMethod="Pad">
        <GradientStop Color="Red" Offset="0.0" />
        <GradientStop Color="Orange" Offset="0.33" />
        <GradientStop Color="Yellow" Offset="0.5" />
        <GradientStop Color="Green" Offset="0.75" />
        <GradientStop Color="Blue" Offset="0.66" />
        <GradientStop Color="Indigo" Offset="0.83" />
        <GradientStop Color="Violet" Offset="1" />
    </RadialGradientBrush >

    <RadialGradientBrush  x:Key="RadialGradientBrushSpreadMethodReflect" SpreadMethod="Reflect">
        <GradientStop Color="Red" Offset="0.0" />
        <GradientStop Color="Orange" Offset="0.33" />
        <GradientStop Color="Yellow" Offset="0.5" />
        <GradientStop Color="Green" Offset="0.75" />
        <GradientStop Color="Blue" Offset="0.66" />
        <GradientStop Color="Indigo" Offset="0.83" />
        <GradientStop Color="Violet" Offset="1" />
    </RadialGradientBrush >


    <RadialGradientBrush  x:Key="RadialGradientBrushSpreadMethodRepeat" SpreadMethod="Repeat">
        <GradientStop Color="Red" Offset="0.0" />
        <GradientStop Color="Orange" Offset="0.33" />
        <GradientStop Color="Yellow" Offset="0.5" />
        <GradientStop Color="Green" Offset="0.75" />
        <GradientStop Color="Blue" Offset="0.66" />
        <GradientStop Color="Indigo" Offset="0.83" />
        <GradientStop Color="Violet" Offset="1" />
    </RadialGradientBrush >

    <RadialGradientBrush  x:Key="RadialGradientBrushOpp">
        <GradientStop Color="White" Offset="1" />
        <GradientStop Color="Black" Offset="0" />
    </RadialGradientBrush >

    <GradientStopCollection x:Key="CustomGradientStops1">
        <GradientStop Color="Red" Offset="0.0" />
        <GradientStop Color="Orange" Offset="0.33" />
        <GradientStop Color="Yellow" Offset="0.5" />
        <GradientStop Color="Green" Offset="0.75" />
        <GradientStop Color="Blue" Offset="0.66" />
        <GradientStop Color="Indigo" Offset="0.83" />
        <GradientStop Color="Violet" Offset="1" />
    </GradientStopCollection>

    <LinearGradientBrush x:Key="LinearGradientBrushWithOpacity1" GradientStops="{StaticResource CustomGradientStops1}" Opacity="0.25"/>
    <LinearGradientBrush x:Key="LinearGradientBrushWithOpacity2" GradientStops="{StaticResource CustomGradientStops1}" Opacity="0.5"/>
    <LinearGradientBrush x:Key="LinearGradientBrushWithOpacity3" GradientStops="{StaticResource CustomGradientStops1}" Opacity="0.75"/>
    <LinearGradientBrush x:Key="LinearGradientBrushWithOpacity4" GradientStops="{StaticResource CustomGradientStops1}" Opacity="1"/>

</ResourceDictionary>

Expected  Output



External Resources




Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)