Windows 8: brushes and transforms

Windows 8
Brushes and Transforms—
Part 1
Brushes and Transforms—
Parthttp://www.LearnNowOnline.com
1

Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company

Objectives
• Work with solid, gradient, and image brushes
• Add transparency effects, including opacity
mask
• Investigate built-in transforms
• Add reflection effect using opacity mask and
transforms


Working with Brushes
• Never used a complex brush? Never used a
brush at all?
• No way to avoid it: Every Fill property uses a
SolidColorBrush
• Single, solid color

• Windows.UI.Xaml.Media.Brush parent for all


What’s a Brush?
• Brush provides means to paint, or fill an area
with output
• SolidColorBrush
• Paints area with solid color
• LinearGradientBrush
• Paints with linear gradient, gradually changing colors
along a line
• ImageBrush
• Paints with an image


Missing in Action
• XAML for Windows Store apps not the same as
XAML for Silverlight or WPF
• Among many other differences…
• Missing RadialGradientBrush
• No good workaround


SolidColorBrush Class
• Simplest brush, does one thing:
• Paints an area with a solid color
• Might be Fill for rectangle
• Background for cell
• Foreground for a text font
• Every time select a solid color, selecting a
SolidColorBrush


How to Select a Color
• Can use predefined colors by name
• Red, MediumBlue
• Choose a color from 32-bit color palette
• Format: #rrggbb (red, green, blue values between 0
and 255, or 0 and #FF)
• Can also specify alpha value: #aarrggbb
• aa specifies opacity, where #FF is totally opaque, and 0
is transparent


How to Select a Color
• Can use Element.Property syntax to describe
the SolidColorBrush
• More verbose
• Allows you to use a named color and opacity at the
same time
• Without using the #aarrggbb format


Use Named Colors
• Simplest way to use colors
<Rectangle Margin="0, 0, 20, 0"
Width="90" Height="90"
Fill="Plum"
Stroke="Yellow"
StrokeThickness="10" />

• Chart here:
• http://msdn.microsoft.com/
en-us/library/system.
windows.media.brushes
(v=vs.110).aspx

Use #rrggbb or #aarrggbb Syntax
• Can specify using either #rrggbb or #aarrggbb
syntax
• Each pair of letters represents two hex digits
• rr=red, bb=blue, gg=green
• #FFFFFF represents white, #000000=black
• #00FF00 = green


Use #rrggbb or #aarrggbb Syntax
• Can specify opacity by adding alpha value
• #aarrggbb: aa contains value between 0 and FF
• #FF is fully opaque, 00 is fully transparent
• Transparent named color has alpha value set to 0
• All other named colors have alpha set to #FF


Use Element.Property Syntax
• Use more verbose Element.Property syntax
gets best of both worlds:
• Can use a named color
• Can also specify Opacity property for brush
• For altering opacity at runtime, this is best choice

<Rectangle.Fill>
<SolidColorBrush
Color="Red" Opacity="0.5" />
</Rectangle.Fill>


DEMO
• SolidColorBrush


LinearGradientBrush Class
• Paints an area with a
linear gradient
• You control
• Direction and position of gradient
• Colors that make up gradient
• Locations at which colors change


LinearGradientBrush
• Linear gradient defines color gradient along
line
• Set gradient line's end points using
StartPoint and EndPoint properties
• Default line gradient is diagonal
• Endpoints 0,0 and 1,1
• Upper-left corner to lower-right corner
• Coordinates relative to container


LinearGradientBrush
• Add one GradientStop to brush for each color
• For each GradientStop
• Provide Offset along line
• At Offset point, color is
100% saturated
• Offsets range from 0 (at the StartPoint) to
1 (at the EndPoint)


Rotating the Gradient
• Can rotate gradient by modifying StartPoint
and EndPoint properties
• Don't like relative coordinate mapping system?
• Set MappingMode property of brush to Absolute
• Default is RelativeToBoundingBox


Changing the Stop Points
• Offset property indicates GradientStop location
along gradient line
• Must be between 0 and 1
• As Offset property altered
• Alter the point at which fully saturated color starts


DEMO
• LinearGradient1


Extending the Gradient
• What happens if gradient doesn't extend fully
across bounding area?
• Doesn't necessarily fill entire area
• Default behavior pads extra with most local color
from gradient


Extending the Gradient
• Brush.SpreadMethod property controls
behavior
• Pad (default): uses solid fill of appropriate color
• Reflect: areas outside gradient fill painted in
original gradient, in reverse order—provides
"reflected" look
• Repeat: areas outside gradient fill painted in
original gradient repeated until area filled


Rectangles Only?
• Is LinearGradientBrush restricted to
rectangular areas?
• Absolutely not
• Can use in ellipses, text, anywhere you need a
brush


DEMO
• LinearGradient2


Using Visual Studio
• Seems difficult to lay out gradients!
• Doesn’t have to be:
• Use design tools built into Visual Studio
• Makes it easy to create linear gradients


DEMO
• Visual Studio Design tools


End of Part 1

http://www.LearnNowOnline.com


Windows 8: brushes and transforms

Recomendados

Recomendados

Mais conteúdo relacionado

Mais de LearnNowOnline

Mais de LearnNowOnline (20)

Último

Último (20)

Windows 8: brushes and transforms