Jump to: navigation, search

Comments

Hamishwillee - Nice introduction to the topic!

Hi Pavan

Thanks, another really useful article. I've restructured and updated to use wiki styles - ie Icode for inline code, and link for first instance where a code item occurs. I've also put the images before the XAML which creates them, since that helps people work out whether the code is relevant faster. I've also created heading sections to make it easier to navigate.

I think that perhaps the section on the camera should be extended - I'm not sure this is sufficient.

Are there any other guides or links on MSDN to this topic that it is worth linking to?

Regards

Hamish

hamishwillee 06:23, 2 August 2012 (EEST)

Joaocardoso - Nice one

That's a well written and useful article.

Keep up the good work Pavan :)

Cheers

Joao Cardoso

joaocardoso 03:37, 3 September 2012 (EEST)

Hamishwillee - Accurate for WP8

Hi Pavan

Can we still trust this for WP8? Not just "will the code run" (I assume it will) but has anything changed in WP8 which would encourage us to update this -e.g. new brushes etc?

regards

Hamish

hamishwillee 07:36, 29 May 2013 (EEST)

Pavan.pareta - Yes it is.- Completely Accurate for WP8 .

Hi Hamish,

It is Completely Accurate for WP8. It have written code for Windows Phone 8 also and its working fine.

only the panorama control and their Item's namespace need to change here.

For Windows Phone 7

xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
 
 <controls:Panorama x:Name="vp" Title="video brushes">
           <controls:PanoramaItem Header="rectangle">
 
           </controls:PanoramaItem>
</controls:Panorama>

For Windows Phone 8

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
 
 <phone:Panorama x:Name="vp" Title="video brushes">
           <phone:PanoramaItem Header="rectangle">
 
           </phone:PanoramaItem>
</phone:Panorama>

I have attached code for Windows Phone 8 too.

Regards,

Pavan

Pavan Pareta 09:02, 30 May 2013 (EEST)

Hamishwillee - I'm probably responding too quickly but

Where did you attach the new WP8 code? Please also update the SDKs and devices you tested against and add the "Windows Phone 8" category

Thank you very much.

Regards

Hamish

hamishwillee 09:08, 30 May 2013 (EEST)

Pavan.pareta - It's Ok

Hi Hamish,

I have attached code in download section, and amended accordingly.

Regards,

Pavan

Pavan Pareta 09:16, 30 May 2013 (EEST)

Hamishwillee - I also added to ArticleMetaData

Thanks - I also added the WP8 media to the article metadata.

hamishwillee 09:26, 3 June 2013 (EEST)

Log in or Join to leave comments.

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.

Article Metadata

Code Example

Source file: Media:WP8 Brushes.zip, Media:WP Brushes.zip (WP7.5)

Tested 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

Device(s): must have camera

Article

Created: pavan.pareta (20 Jul 2012)

Last edited: pavan.pareta (07 Jun 2013)

Types of Brush

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

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)

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>

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>

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: 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.

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>

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>

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 ~

Download

Windows Phone 7.5 - Media:WP Brushes.zip

Windows Phone 8.0 - File:WP8 Brushes.zip

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

Wiki

Wiki Resources

Main Platforms

Other

Natural Languages

Toolbox

In other languages

Namespaces

Variants

Views

Actions

Contents

Brushes in Windows Phone

Comments

Contents

Hamishwillee - Nice introduction to the topic!

Joaocardoso - Nice one

Hamishwillee - Accurate for WP8

Pavan.pareta - Yes it is.- Completely Accurate for WP8 .

Hamishwillee - I'm probably responding too quickly but

Pavan.pareta - It's Ok

Hamishwillee - I also added to ArticleMetaData

Article Metadata

Contents

Types of Brush

SolidColorBrush

LinearGradientBrush

RadialGradientBrush

ImageBrush

VideoBrush

Camera with video brush

Download

Summary