Weitere ähnliche Inhalte Mehr von LearnNowOnline (20) Kürzlich hochgeladen (20) Windows 8: brushes and transforms1. 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
2. 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
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
3. 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
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
4. 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
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
5. 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
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
6. 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
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
7. 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
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
8. 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
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
9. 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
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
10. 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
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
11. 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
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
12. 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>
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
13. DEMO
• SolidColorBrush
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
14. 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
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
15. 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
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
16. 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)
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
17. 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
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
18. 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
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
19. DEMO
• LinearGradient1
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
20. 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
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
21. 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
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
22. Rectangles Only?
• Is LinearGradientBrush restricted to
rectangular areas?
• Absolutely not
• Can use in ellipses, text, anywhere you need a
brush
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
23. DEMO
• LinearGradient2
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
24. 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
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
25. DEMO
• Visual Studio Design tools
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company
26. End of Part 1
http://www.LearnNowOnline.com
Learn More @ http://www.learnnowonline.com
Copyright © by Application Developers Training Company