×
Namespaces

Variants
Actions
(Difference between revisions)

Brushes in Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search
pavan.pareta (Talk | contribs)
(Pavan.pareta -)
hamishwillee (Talk | contribs)
m (Hamishwillee -)
 
(19 intermediate revisions by 5 users not shown)
Line 1: Line 1:
[[Category:Windows Phone]][[Category:Code Examples]][[Category:Code Snippet]][[Category:Graphics]][[Category:Multimedia]][[Category:UI]]
+
[[Category:Video on Windows Phone]][[Category:Graphics on Windows Phone]][[Category:Camera on Windows Phone]][[Category:XAML]][[Category:Code Examples]][[Category:Windows Phone 8]][[Category:Windows Phone 7.5]]
{{Abstract|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.}}
+
{{FeaturedArticle|timestamp=20120902}}
 +
{{Abstract|This article shows how to use the Silverlight Brush API in Windows Phone 7 using XAML. The [http://msdn.microsoft.com/en-us/library/system.windows.media.brush(VS.95).aspx Brush] classes allow you to paint an area of the screen, to set the background color or image, and also to access the device camera using the video brush.}}
  
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
|sourcecode= [[Media:WP Brushes.zip]]
+
|sourcecode= [[Media:WP8 Brushes.zip]], [[Media:WP Brushes.zip]] (WP7.5)
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|devices= Nokia Lumia 710
 
|devices= Nokia Lumia 710
|sdk= Windows Phone 7.1
+
|sdk= Windows Phone SDK 7.5, Windows Phone SDK 8.0
|platform= Windows Phone 7.5 (mango)
+
|platform= Windows Phone 7.5 (mango), Windows Phone 8.0
 
|devicecompatability= must have camera
 
|devicecompatability= must have camera
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->  
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
+
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|translated-by= <!-- [[User:XXXX]] -->
 
|translated-by= <!-- [[User:XXXX]] -->
|translated-from-title= <!-- Title only -->  
+
|translated-from-title= <!-- Title only -->
 
|translated-from-id= <!-- Id of translated revision -->
 
|translated-from-id= <!-- Id of translated revision -->
|review-by=<!-- After re-review: [[User:username]] -->
+
|review-by= <!-- After re-review: [[User:username]] -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
|creationdate= <!-- Format YYYYMMDD -->
+
|creationdate= 20120720
|author= <!-- Display as link [[User:username]] -->
+
|author= [[User:Pavan.pareta]]
 
}}
 
}}
 
== Introduction ==
 
In this article we will learn how to use Silverlight Brush API in Windows Phone 7 using XAML. Basically [http://msdn.microsoft.com/en-us/library/system.windows.media.brush(VS.95).aspx 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 ==
 
== Types of Brush ==
In Windows Phone 7 SDK, Silverlight supports five different types of brushes and different types of output it has.
+
In Windows Phone 7.5 SDK and Windows Phone 8 SDK, Silverlight supports five different types of brushes:
 
+
# [http://msdn.microsoft.com/en-us/library/system.windows.media.solidcolorbrush(v=vs.95) SolidColorBrush]
1) SolidColorBrush
+
# [http://msdn.microsoft.com/en-us/library/system.windows.media.lineargradientbrush(v=vs.95) LinearGradientBrush]
 
+
# [http://msdn.microsoft.com/en-us/library/system.windows.media.radialgradientbrush(v=vs.95) RadialGradientBrush]
2) LinearGradientBrush
+
# [http://msdn.microsoft.com/en-us/library/system.windows.media.imagebrush(v=vs.95) ImageBrush]
 
+
# [http://msdn.microsoft.com/en-us/library/system.windows.media.videobrush(v=vs.95) VideoBrush]
3) RadialGradientBrush
+
 
+
4) ImageBrush
+
  
5) VideoBrush
 
  
 +
In this example I have used separate panoramic pages to achieve functionality on different drawing objects such as (Rectangle, Circle, Polygon, Text and Page Background)
  
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.
  
'''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.
+
[[File:SBrush.png|frame|none|Solid colour brush in the XAML Page Design View]]
  
Create a SolidColorBrush in XAML, see the below code snippet.
+
Create a {{Icode|SolidColorBrush}} in XAML, see the below code snippet.
  
 
<code xml>
 
<code xml>
Line 52: Line 48:
 
</code>
 
</code>
  
'''- PPSolidColorBrush.xaml'''
+
'''PPSolidColorBrush.xaml'''
  
 
<code xml>
 
<code xml>
Line 110: Line 106:
 
</code>
 
</code>
  
'''- XAML Page Design View:'''
+
== LinearGradientBrush==
 +
Linear Gradient Brush used to paint more than two colors with a linear gradient using two main properties {{Icode|StartPoint&#61;"0,0" EndPoint&#61;"1,0"}} which is a by default values.
  
[[File:SBrush.png]]
+
[[File:LinearGradientBrush.png|frame|none|Linear Gradient brush in the XAML Page Design View]]
  
'''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 {{Icode|LinearGradientBrush}} in XAML, see the below code snippet.
 
+
Create a LinearGradientBrush in XAML, see the below code snippet.
+
  
 
<code xml>
 
<code xml>
 
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
 
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                <GradientStop Color="Yellow" Offset="0.0" />
+
    <GradientStop Color="Yellow" Offset="0.0" />
                                <GradientStop Color="Red" Offset="0.25" />
+
    <GradientStop Color="Red" Offset="0.25" />
                                <GradientStop Color="Blue" Offset="0.75" />
+
    <GradientStop Color="Blue" Offset="0.75" />
                                <GradientStop Color="LimeGreen" Offset="1.0" />
+
    <GradientStop Color="LimeGreen" Offset="1.0" />
                            </LinearGradientBrush>
+
</LinearGradientBrush>
 
+
 
</code>
 
</code>
  
'''- LinearGradientBrush.xaml'''
+
'''LinearGradientBrush.xaml'''
  
 
<code xml>
 
<code xml>
Line 185: Line 179:
 
</code>
 
</code>
  
'''- XAML Page Design View:'''
+
== RadialGradientBrush ==
 +
Radial Gradient Brush used to paint or fill more than two colors in the circular gradient or a circular manner.
  
[[File:LinearGradientBrush.png]]
+
[[File:RadialGradientBrush.png|frame|none|Radial Gradient brush in the XAML Page Design View]]
  
RadialGradientBrush: Radial Gradient Brush used to paint or fill more than two colors in the circular gradient or a circular manner.
+
Create a {{Icode|RadialGradientBrush}} in XAML, see the below code snippet.
 
+
Create a RadialGradientBrush in XAML, see the below code snippet.
+
  
 
<code xml>
 
<code xml>
 
<RadialGradientBrush RadiusX=".5" RadiusY=".5" GradientOrigin=".0,.5" SpreadMethod="Reflect">
 
<RadialGradientBrush RadiusX=".5" RadiusY=".5" GradientOrigin=".0,.5" SpreadMethod="Reflect">
                                <GradientStop Color="Red" Offset="0.5" />
+
      <GradientStop Color="Red" Offset="0.5" />
                                <GradientStop Color="BlueViolet" Offset="1" />
+
      <GradientStop Color="BlueViolet" Offset="1" />
                            </RadialGradientBrush>
+
</RadialGradientBrush>
 
</code>
 
</code>
  
 
''Here:''
 
''Here:''
 +
* {{Icode|Radius x}}, {{Icode|Radius y}}:' This property used to set Gradient x-Radius and y-Radius.
 +
* {{Icode|GradientOrigin}}: This property used to set Focal point to the radial.
 +
* {{Icode|SpreadMethod}}: This property used to set Gradient Reflect.
  
''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'''
+
'''RadialGradientBrush.xaml'''
  
 
<code xml>
 
<code xml>
Line 280: Line 271:
  
  
''''''Most impotent:'''''' 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, [http://en.wikipedia.org/wiki/32-bit_color#Truecolor here] is more information.
+
{{Tip|By default windows phone 7 app runs on 16-bit colour. 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''' - see [http://en.wikipedia.org/wiki/32-bit_color#Truecolor here] for more information.}}
  
'''- XAML Page Design View:'''
+
== ImageBrush ==
  
[[File:RadialGradientBrush.png]]
+
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.
  
'''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.
+
[[File:ImageBrush.png|frame|none|Image brush in the XAML Page Design View]]
  
Create an ImageBrush in XAML, see the below code snippet.
+
Create an {{Icode|ImageBrush}} in XAML, see the below code snippet.
  
 
<code xml>
 
<code xml>
Line 295: Line 286:
  
 
''Here:''
 
''Here:''
''AlignmentX:'' use to sets the horizontal alignment  
+
* {{Icode|AlignmentX}}: use to sets the horizontal alignment  
''AlignmentY:'' use to sets the vertical alignment
+
* {{Icode|AlignmentY}}: use to set the vertical alignment
  
'''- PPImageBrush.xaml'''
+
 
 +
'''PPImageBrush.xaml'''
  
 
<code xml>
 
<code xml>
Line 347: Line 339:
 
</code>
 
</code>
  
'''- XAML Page Design View:'''
+
== VideoBrush ==
[[File:ImageBrush.png]]
+
Video Brush used to paint or fill with running video in the specific area with [http://msdn.microsoft.com/en-us/library/system.windows.controls.mediaelement(VS.95).aspx MediaElement] class object. {{Icode|MediaElement}} object supports audio or video both. I have used in this application mp4 file (video file) to play a video, see [http://msdn.microsoft.com/en-us/library/ff462087(VS.92).aspx Supported Media Codes for Windows Phone] in the Silverlight documentation on MSDN. Apart from that I have also integrated live camera as with {{Icode|VideoBrush}} and end item of panorama, you can access through the *camera open* button in this component.
  
'''VideoBrush''': Video Brush used to paint or fill with running video in the specific area with [http://msdn.microsoft.com/en-us/library/system.windows.controls.mediaelement(VS.95).aspx 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 [http://msdn.microsoft.com/en-us/library/ff462087(VS.92).aspx 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.
+
[[File:VideoBrush.png|frame|none|Video brush in the XAML Page Design View]]
  
Create a VideoBrush and MediaElement object in XAML, see the below code snippet.
+
Create a {{Icode|VideoBrush}} and {{Icode|MediaElement}} object in XAML, see the below code snippet:
  
 
<code xml>
 
<code xml>
Line 364: Line 356:
 
</code>
 
</code>
  
'''- PPVideoBrushes.xaml'''
+
'''PPVideoBrushes.xaml'''
  
 
<code xml>
 
<code xml>
Line 453: Line 445:
 
</code>
 
</code>
  
 +
=== Camera with video brush ===
  
'''- XAML Page Design View:'''
+
[[File:Video camera.png|frame|none|Image brush in the XAML Page Design View]]
 
+
[[File:VideoBrush.png]]
+
  
 +
To play camera using video brush, tap on open camera button and it will navigate to camera screen and add the below mentioned code in '''PPCamera.xaml.cs''' class
  
 
'''PPCamera.xaml'''
 
'''PPCamera.xaml'''
 
To play camera using video brush, tap on open camera button and it will navigate to camera screen and add the below mentioned code in PPCamera.xaml.cs class
 
 
 
<code csharp>
 
<code csharp>
 
public partial class PPCamera : PhoneApplicationPage
 
public partial class PPCamera : PhoneApplicationPage
Line 482: Line 471:
 
     }
 
     }
 
</code>
 
</code>
 
[[File:Video camera.png]]
 
  
  
 
~ Happy Coding ~
 
~ Happy Coding ~
  
== Summary ==
+
== Download ==
Silverlight Brush API is very useful to create elegant UI (User Interface) for developing Metro style app for Windows Phone 7.
+
Windows Phone 7.5 -  [[Media:WP Brushes.zip]]
  
== MSDN References ==
+
Windows Phone 8.0 - [[File:WP8 Brushes.zip]]
[http://msdn.microsoft.com/en-us/library/system.windows.media.brush(v=vs.95) Brush Class]
+
  
[http://msdn.microsoft.com/en-us/library/system.windows.media.imagebrush(v=vs.95) ImageBrush Class]
 
  
[http://msdn.microsoft.com/en-us/library/system.windows.media.lineargradientbrush(v=vs.95) LinearGradientBrush Class]
+
== Summary ==
 
+
Silverlight Brush API is very useful to create elegant UI (User Interface) for developing Metro style app for Windows Phone 7.5 and Windows Phone 8.0
[http://msdn.microsoft.com/en-us/library/system.windows.media.radialgradientbrush(v=vs.95) RadialGradientBrush Class]
+
<!-- Translation --> [[zh-hans:Windows Phone中画笔(Brushes)]]
 
+
[http://msdn.microsoft.com/en-us/library/system.windows.media.videobrush(v=vs.95) VideoBrush Class]
+

Latest revision as of 04:50, 1 July 2013

Featured Article
02 Sep
2012

This article shows how to use the Silverlight Brush API in Windows Phone 7 using XAML. The Brush classes allow you to paint an area of the screen, to set the background color or image, and also to access the device camera using the video brush.

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 SDK 7.5, Windows Phone SDK 8.0
Devices(s): Nokia Lumia 710
Compatibility
Platform(s): Windows Phone 7.5 (mango), Windows Phone 8.0
Windows Phone 8
Windows Phone 7.5
Device(s): must have camera
Article
Created: pavan.pareta (20 Jul 2012)
Last edited: hamishwillee (01 Jul 2013)

Contents

[edit] Types of Brush

In Windows Phone 7.5 SDK and Windows Phone 8 SDK, Silverlight supports five different types of brushes:

  1. SolidColorBrush
  2. LinearGradientBrush
  3. RadialGradientBrush
  4. ImageBrush
  5. VideoBrush


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

[edit] 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.

Solid colour brush in the XAML Page Design View

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>

[edit] 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.

Linear Gradient brush in the XAML Page Design View

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>

[edit] RadialGradientBrush

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

Radial Gradient brush in the XAML Page Design View

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.
  • GradientOrigin: This property used to set Focal point to the radial.
  • SpreadMethod: 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>


Tip.pngTip: By default windows phone 7 app runs on 16-bit colour. 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 - see here for more information.

[edit] 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.

Image brush in the XAML Page Design View

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 set 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>

[edit] 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.

Video brush in the XAML Page Design View

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>

[edit] Camera with video brush

Image brush in the XAML Page Design View

To play camera using video brush, tap on open camera button and it will navigate to camera screen and add the below mentioned code in PPCamera.xaml.cs class

PPCamera.xaml

public partial class PPCamera : PhoneApplicationPage
{
private PhotoCamera devicePhotoCamera;
 
public PPCamera()
{
InitializeComponent();
 
this.Loaded += new RoutedEventHandler(PPCamera_Loaded);
}
 
void PPCamera_Loaded(object sender, RoutedEventArgs e)
{
devicePhotoCamera = new PhotoCamera();
viewCamera1.SetSource(devicePhotoCamera);
}
}


~ Happy Coding ~

[edit] Download

Windows Phone 7.5 - Media:WP Brushes.zip

Windows Phone 8.0 - File:WP8 Brushes.zip


[edit] Summary

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

This page was last modified on 1 July 2013, at 04:50.
374 page views in the last 30 days.
×