Logo
programming4us
programming4us
programming4us
programming4us
Home
programming4us
XP
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server
programming4us
Windows Phone
 
Windows Phone

Programming Windows Phone 7 : Elements and Properties - Modes of Opacity

- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
5/19/2011 6:01:35 PM

UIElement defines an Opacity property that you can set to a value between 0 and 1 to make an element (and its children) more or less transparent. But a somewhat more interesting property is OpacityMask, which can “fade out” part of an element. You set the OpacityMask to an object of type Brush; most often you’ll use one of the two GradientBrush derivatives.

The actual color of the brush is ignored. Only the alpha channel is used to govern the opacity of the element.

For example, you can apply a RadialGradientBrush to the OpacityMask property of an Image element:

<Image Source="Images/BuzzAldrinOnTheMoon.png">
<Image.OpacityMask>
<RadialGradientBrush>
<GradientStop Offset="0" Color="White" />
<GradientStop Offset="0.8" Color="White" />
<GradientStop Offset="1" Color="Transparent" />
</RadialGradientBrush>
</Image.OpacityMask>
</Image>

Notice that the RadialGradientBrush is opaque in the center, and continues to be opaque until a radius of 0.8, at which point the gradient goes to fully transparent at the edge of the circle. Here’s the result, a very nice effect that looks much fancier than the few lines of XAML would seem to imply:



Here’s a popular technique that uses two identical elements but one of them gets both a ScaleTransform to flip it upside down, and an OpacityMask to make it fade out:

<Image Source="Images/BuzzAldrinOnTheMoon.png"
Stretch="None"
VerticalAlignment="Top" />
<Image Source="Images/BuzzAldrinOnTheMoon.png"
Stretch="None"
VerticalAlignment="Top"
RenderTransformOrigin="0.5 1">
<Image.RenderTransform>
<ScaleTransform ScaleY="-1" />
</Image.RenderTransform>
<Image.OpacityMask>
<LinearGradientBrush StartPoint="0 0" EndPoint="0 1">
<GradientStop Offset="0" Color="#00000000" />
<GradientStop Offset="1" Color="#40000000" />
</LinearGradientBrush>
</Image.OpacityMask>
</Image>

The two Image elements are the same size and aligned at the top and center. Normally the second one would be positioned on top of the other. But the second one has a RenderTransform set to a ScaleTransform that flips the image around the horizontal axis. The RenderTransformOrigin is set at (0.5, 1), which is the bottom of the element. This causes the scaling to flip the image around its bottom edge. Then a LinearGradientBrush is applied to the OpacityMask property to make the reflected image fade out:



Notice that the GradientStop values apply to the unreflected image, so that full transparency (the #00000000 value) seems to be at the top of the picture and then is reflected to the bottom of the composite display.

It is often little touches like these that make a program’s visuals pop out just a little more and endear themselves to the user. But indiscriminate use of OpacityMask—particularly in combination with complex animations—is discouraged because it sometimes tends to cripple performance. The general rule is: Only use OpacityMask if the effect is really, really cool.

Other -----------------
- Programming Windows Phone 7 : Elements and Properties - Non-Tiled Tile Brushes & Playing Movies
- Programming Windows Phone 7 : Items Controls - A Card File Metaphor
- Programming Windows Phone 7 : Items Controls - The DataTemplate Bar Chart
- Programming Windows Phone 7 : Items Controls - Changing the Panel
- Programming Windows Phone 7 : Items Controls - Sorting
- Items Controls : Fun with DataTemplates
- Items Controls : Databases and Business Objects
- Items Controls : Binding to ItemsSource
- Items Controls : ListBox Selection
- Items Controls : Customizing Item Displays
 
 
25 Inspiring Game of Thrones Quotes
Top 10
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
- First look: Apple Watch

- 3 Tips for Maintaining Your Cell Phone Battery (part 1)

- 3 Tips for Maintaining Your Cell Phone Battery (part 2)
programming4us programming4us
Popular tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 windows Phone 7 windows Phone 8
programming4us programming4us
 
programming4us
Natural Miscarriage
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server
programming4us
Game Trailer