Your SlideShare is downloading. ×
0
Windows 8: brushes and transforms
Windows 8: brushes and transforms
Windows 8: brushes and transforms
Windows 8: brushes and transforms
Windows 8: brushes and transforms
Windows 8: brushes and transforms
Windows 8: brushes and transforms
Windows 8: brushes and transforms
Windows 8: brushes and transforms
Windows 8: brushes and transforms
Windows 8: brushes and transforms
Windows 8: brushes and transforms
Windows 8: brushes and transforms
Windows 8: brushes and transforms
Windows 8: brushes and transforms
Windows 8: brushes and transforms
Windows 8: brushes and transforms
Windows 8: brushes and transforms
Windows 8: brushes and transforms
Windows 8: brushes and transforms
Windows 8: brushes and transforms
Windows 8: brushes and transforms
Windows 8: brushes and transforms
Windows 8: brushes and transforms
Windows 8: brushes and transforms
Windows 8: brushes and transforms
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Windows 8: brushes and transforms

1,555

Published on

Learn to work with solid, gradient, and image brushes, how to add transparency effects, including opacity mask, investigate built-in transforms and add reflection effect using opacity mask and …

Learn to work with solid, gradient, and image brushes, how to add transparency effects, including opacity mask, investigate built-in transforms and add reflection effect using opacity mask and transforms.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,555
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Windows 8Brushes and Transforms—Part 1Brushes 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 lines 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• Dont 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 doesnt extend fully across bounding area? • Doesnt 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

×