×
Namespaces

Variants
Actions
Revision as of 22:54, 20 July 2012 by pavan.pareta (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Brushes in Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search

In this article we will learn all about Silverlight Brushes API in Windows Phone 7, Brush API use to fill color or paint as well as set Background with color or image in windows phone application. In this example I have used XAML coding for achieving API’s functionality.

Enter article metadata as described below. Note that this template can be placed anywhere in the article. Do not remove parameters that you do not use

WP Metro Icon Multimedia.png
WP Metro Icon UI.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
SDK: Windows Phone 7.1
Devices(s): Nokia Lumia 710
Compatibility
Platform(s): Windows Phone 7.5 (mango)
Windows Phone 8
Windows Phone 7.5
Device(s): must have camera
Article
Created: (02 Aug 2012)
Last edited: pavan.pareta (20 Jul 2012)

Contents

Introduction

In this article we will learn how to use Silverlight Brush API in Windows Phone 7 using XAML. Basically Brush class allows you to paint an area of the screen, to set the background color or image of the screen using color or image brush, apart from that we can also access device’s camera using video brush. Brush class has a verity of Brushes for Windows Phone 7.

Types of Brush

In Windows Phone 7 SDK, Silverlight supports five different types of brushes and different types of output it has.

1) SolidColorBrush

2) LinearGradientBrush

3) RadialGradientBrush

4) ImageBrush

5) VideoBrush


In this example I have used separate – separate panoramic pages to achieve functionality on different-different drawing objects such as (Rectangle, Circle, Polygon, Text and Page Background)

SolidColorBrush: Solid Color Brush API used to paint/fill with a single color with transparency of color using set opacity property between 0 and 1. Where 0 is fully transparent and 1 is fully opaque.

Create a SolidColorBrush in XAML, see the below code snippet.

<SolidColorBrush Color="Green" Opacity="0.5" />

- PPSolidColorBrush.xaml

<Grid x:Name="LayoutRoot">
<controls:Panorama Title="solid color brush">
<!--Panorama item one-->
<controls:PanoramaItem Header="fill property">
<Grid>
<Rectangle Width="300" Height="250">
<Rectangle.Fill>
<SolidColorBrush Color="Green" Opacity="0.5" />
</Rectangle.Fill>
</Rectangle>
</Grid>
</controls:PanoramaItem>
 
<!--Panorama item two-->
<controls:PanoramaItem Header="stroke property">
<Grid>
<Rectangle Width="300" Height="250" Stroke="Tomato" StrokeThickness="10">
<Rectangle.Fill>
<SolidColorBrush Color="Green" Opacity="0.5" />
</Rectangle.Fill>
</Rectangle>
</Grid>
 
</controls:PanoramaItem>
 
<!--Panorama item three-->
<controls:PanoramaItem Header="RadiusX/Y">
<Grid>
<Rectangle Width="300" Height="250" Stroke="Tomato" StrokeThickness="10" RadiusX="50" RadiusY="40">
<Rectangle.Fill>
<SolidColorBrush Color="Green" Opacity="0.5" />
</Rectangle.Fill>
</Rectangle>
</Grid>
 
</controls:PanoramaItem>
 
<!--Panorama item four-->
<controls:PanoramaItem Header="RadiusX/Y">
<Grid>
<Rectangle Width="300" Height="250" Stroke="Tomato" StrokeThickness="10" RadiusX="50" RadiusY="40">
<Rectangle.Fill>
<SolidColorBrush Color="Green" Opacity="0.5" />
</Rectangle.Fill>
<Rectangle.RenderTransform>
<RotateTransform Angle="35" CenterX="120" CenterY="140" />
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
 
</controls:PanoramaItem>
</controls:Panorama>
</Grid>

- XAML Page Design View:

SBrush.png

LinearGradientBrush: Linear Gradient Brush used to paint more than two colors with a linear gradient using two main properties StartPoint="0,0" EndPoint="1,0" which is a by default values.

Create a LinearGradientBrush in XAML, see the below code snippet.

<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="LimeGreen" Offset="1.0" />
</LinearGradientBrush>

- LinearGradientBrush.xaml

 <Grid x:Name="LayoutRoot">
<controls:Panorama Title="linear gradient brush">
 
<!--Panorama item one-->
<controls:PanoramaItem Header="horizontal">
<Grid>
<Rectangle Width="300" Height="250">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="LimeGreen" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</controls:PanoramaItem>
 
<!--Panorama item two-->
<controls:PanoramaItem Header="vertical">
<Grid>
<Rectangle Width="300" Height="250">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="LimeGreen" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</controls:PanoramaItem>
 
<!--Panorama item three-->
<controls:PanoramaItem Header="diagonal">
<Grid>
<Rectangle Width="300" Height="250">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Green" Offset="0.0" />
<GradientStop Color="Yellow" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="Red" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</controls:PanoramaItem>
</controls:Panorama>
</Grid>

- XAML Page Design View:

LinearGradientBrush.png

RadialGradientBrush: Radial Gradient Brush used to paint or fill more than two colors in the circular gradient or a circular manner.

Create a RadialGradientBrush in XAML, see the below code snippet.

<RadialGradientBrush RadiusX=".5" RadiusY=".5" GradientOrigin=".0,.5" SpreadMethod="Reflect">
<GradientStop Color="Red" Offset="0.5" />
<GradientStop Color="BlueViolet" Offset="1" />
</RadialGradientBrush>

Here: Radius x, Radius y: This property used to set Gradient x-Radius and y-Radius. Gradient Origin: This property used to set Focal point to the radial. Spread Method: This property used to set Gradient Reflect.

- RadialGradientBrush.xaml

 <Grid x:Name="LayoutRoot">
 
<controls:Panorama Title="radial gradient brush">
<!--Panorama item one-->
<controls:PanoramaItem Header="rectangle">
<Grid>
<Rectangle Width="300" Height="250" RadiusX="100" RadiusY="100">
<Rectangle.Fill>
<RadialGradientBrush RadiusX=".5" RadiusY=".5" GradientOrigin=".0,.5" SpreadMethod="Reflect">
<GradientStop Color="Red" Offset="0.5" />
<GradientStop Color="BlueViolet" Offset="1" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</controls:PanoramaItem>
 
<!--Panorama item two-->
<controls:PanoramaItem Header="rectangle">
<Grid>
<Rectangle Width="300" Height="250">
<Rectangle.Fill>
<RadialGradientBrush>
<GradientStop Color="Red" Offset=".1"/>
<GradientStop Color="Blue" Offset=".2"/>
<GradientStop Color="Wheat" Offset=".3"/>
<GradientStop Color="Green" Offset=".4"/>
<GradientStop Color="Yellow" Offset=".6"/>
<GradientStop Color="BlueViolet" Offset="1"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</controls:PanoramaItem>
 
<!--Panorama item three-->
<controls:PanoramaItem Header="ellipse">
<Grid>
<Ellipse Height="300" Width="300">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="Red" Offset="0.0"/>
<GradientStop Color="LightPink" Offset="0.5"/>
<GradientStop Color="DarkGray" Offset="1.0"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Grid>
</controls:PanoramaItem>
 
<controls:PanoramaItem Header="ellipse">
<Grid>
<Ellipse Height="300" Width="300">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="Red" Offset="0.0"/>
<GradientStop Color="Yellow" Offset="0.5"/>
<GradientStop Offset="1.0"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Grid>
</controls:PanoramaItem>
 
</controls:Panorama>
</Grid>

Most impotent:Italic text By default windows phone 7 app runs on 16-bit. However we can also use 32-bit color to get better color effect binding in gradient brush or image resources to set BitsPerPixel attributes inside the App tag of WMAppManifest.xml, here is more information.

- XAML Page Design View:

RadialGradientBrush.png

ImageBrush: Image Brush used to paint or fill the area with an image, to specify by its ImageSource property and Stretch property by default use Fill.

Create an ImageBrush in XAML, see the below code snippet.

<ImageBrush ImageSource="images/Flower.jpg" Stretch="Fill" AlignmentX="Center" AlignmentY="Center" />

Here: AlignmentX: use to sets the horizontal alignment AlignmentY: use to sets the vertical alignment

- PPImageBrush.xaml

    <Grid x:Name="LayoutRoot">
<controls:Panorama Title="image brush">
<!--Panorama item one-->
<controls:PanoramaItem Header="rectangle">
<Grid>
<Rectangle Width="300" Height="250" >
<Rectangle.Fill>
<ImageBrush ImageSource="images/Flower.jpg"
Stretch="Fill"
AlignmentX="Center"
AlignmentY="Center" />
</Rectangle.Fill>
</Rectangle>
</Grid>
</controls:PanoramaItem>
 
<!--Panorama item two-->
<controls:PanoramaItem Header="ellipse">
<Grid>
<Ellipse Height="300" Width="300">
<Ellipse.Fill>
<ImageBrush ImageSource="images/Flower.jpg"
AlignmentX="Center"
AlignmentY="Center" />
</Ellipse.Fill>
</Ellipse>
</Grid>
</controls:PanoramaItem>
 
<!--Panorama item three-->
<controls:PanoramaItem Header="text">
<Grid>
<TextBlock Text="#WP7" FontSize="150" FontWeight="ExtraBlack" Margin="0,120">
<TextBlock.Foreground>
<ImageBrush ImageSource="images/Flower.jpg"
Stretch="Fill"
AlignmentX="Center"
AlignmentY="Center" />
</TextBlock.Foreground>
</TextBlock>
</Grid>
</controls:PanoramaItem>
</controls:Panorama>
</Grid>

- XAML Page Design View: ImageBrush.png

VideoBrush: Video Brush used to paint or fill with running video in the specific area with MediaElement class object. MediaElement object supports audio or video both. I have used in this application mp4 file (video file) to play a video, see Supported Media Codes for Windows Phone in the Silverlight documentation on MSDN. Apart from that I have also integrated live camera as with VideoBrush and end item of panorama, you can access through the *camera open* button in this component.

Create a VideoBrush and MediaElement object in XAML, see the below code snippet.

<MediaElement x:Name="media1" Source="video/NokiaLumia710.mp4" 
IsMuted="False"
Opacity="0.0"
Volume="10"
IsHitTestVisible="False"/>
 
<VideoBrush x:Name="viewVideo" SourceName="media1"/>

- PPVideoBrushes.xaml

<Grid x:Name="LayoutRoot">
<MediaElement x:Name="media1"
Source="video/NokiaLumia710.mp4"
IsMuted="False"
Opacity="0.0"
Volume="10"
IsHitTestVisible="False" />
 
<controls:Panorama x:Name="vp" Title="video brushes">
 
<!--Panorama item one-->
<controls:PanoramaItem Header="rectangle">
<Grid>
<Rectangle Width="372" Height="340" Stroke="White" StrokeThickness="5" Margin="21,88,27,70">
<Rectangle.Fill>
<VideoBrush x:Name="viewVideo" SourceName="media1"/>
</Rectangle.Fill>
</Rectangle>
</Grid>
</controls:PanoramaItem>
 
<controls:PanoramaItem Header="circle">
<Grid>
<Ellipse Margin="44,98,48,106"
Height="294"
Width="328"
StrokeThickness="5"
Stroke="White">
<Ellipse.Fill>
<VideoBrush x:Name="viewVideoc" SourceName="media1"/>
</Ellipse.Fill>
 
</Ellipse>
</Grid>
</controls:PanoramaItem>
 
<controls:PanoramaItem Header="polygon">
<Grid>
<Polygon Points="5,270 270,270 270,10"
Stroke="White"
StrokeThickness="10"
Margin="51,104,57,114" Height="280" Width="312" >
<Polygon.Fill>
<VideoBrush x:Name="viewVideoP" SourceName="media1"/>
</Polygon.Fill>
</Polygon>
</Grid>
</controls:PanoramaItem>
 
<controls:PanoramaItem Header="star">
<Grid>
<Polygon Points="240 48, 352 396, 58 180, 422 180, 128 396"
Stroke="Magenta"
StrokeThickness="10" FillRule="NonZero" Margin="-22,0,2,0" Width="440">
<Polygon.Fill>
<VideoBrush x:Name="viewVideoT" SourceName="media1"/>
</Polygon.Fill>
</Polygon>
 
</Grid>
</controls:PanoramaItem>
 
<!--Panorama item four-->
<controls:PanoramaItem Header="text block">
<Grid>
<TextBlock FontFamily="Verdana"
Margin="0,50"
FontSize="120"
FontWeight="Bold"
Text="PHONE">
<TextBlock.Foreground>
<VideoBrush SourceName="media1" />
</TextBlock.Foreground>
</TextBlock>
</Grid>
</controls:PanoramaItem>
<!--Panorama item five-->
<controls:PanoramaItem Header="camera">
<Grid>
<Button Content="open camera" Height="72" HorizontalAlignment="Left" Margin="76,198,0,0" Name="button1" VerticalAlignment="Top" Width="239" Click="button1_Click" />
</Grid>
</controls:PanoramaItem>
</controls:Panorama>
</Grid>

- XAML Page Design View: VideoBrush.png

To play camera using video brush, tap on open camera button. Video camera.png

Summary

Silverlight Brush API is very useful to create elegant UI (User Interface) for developing Metro style app for Windows Phone 7.

MSDN References

Brush Class ImageBrush Class LinearGradientBrush Class RadialGradientBrush Class VideoBrush Class

585 page views in the last 30 days.
×