Paint Application In Silverlight 3 - Part I

Introduction

In this article we will try to incorporate the drawing in Silverlight 3.

Creating the Silverlight Project

We will create a simple Silverlight Project and name it as SilverlightPaintApplication.

pp1.gif

Figure 1.1 Creating Silverlight Project

Designing our Sample Application

I have used Blend 3 for designing the application. We will do some simple things like when user clicks one color; the user can draw in that particular color. We can change the Drawing Pen based on the user selection. And the user can change the Brush Size and Opacity. Last but not the least the drawings can be cleared at any time. Now follow the image below to know more about the application design.

pp2.gif

Figure 1.2 Designing the Application in Blend 3

pp3.gif

Figure 1.3 Control Hierarchies

Follow the XAML Code below to understand and correlate in a better way.

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" x:Class="SilverlightPaintApplication.MainPage"
    Width="805" Height="600" mc:Ignorable="d" BorderThickness="0,0,0,0" BorderBrush="{x:Null}">
                <Grid x:Name="LayoutRoot" Background="#FFFFFFFF" Width="Auto" >
                                <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="800"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                                <RowDefinition Height="0.865*"/>
                                                <RowDefinition Height="0.135*"/>
                                </Grid.RowDefinitions>
                                <StackPanel Grid.Row="1" Orientation="Vertical" HorizontalAlignment="Left" Background="#FFE7E7E7" Width="420" Margin="78,0,0,21">
                                <StackPanel Orientation="Horizontal">
                                    <Rectangle x:Name="rect0" Height="30" Width="30" Stroke="#FF000000" StrokeThickness="3" MouseLeftButtonDown="rect0_MouseLeftButtonDown"/>
                                <Rectangle x:Name="rect1" Height="30" Width="30" Stroke="#FF000000" StrokeThickness="3" MouseLeftButtonDown="rect1_MouseLeftButtonDown"/>
                                <Rectangle x:Name="rect2" Height="30" Width="30" Stroke="#FF000000" StrokeThickness="3" MouseLeftButtonDown="rect2_MouseLeftButtonDown"/>
                                <Rectangle x:Name="rect3" Height="30" Width="30" Stroke="#FF000000" StrokeThickness="3" MouseLeftButtonDown="rect3_MouseLeftButtonDown"/>
                                <Rectangle x:Name="rect4" Height="30" Width="30" Stroke="#FF000000" StrokeThickness="3" MouseLeftButtonDown="rect4_MouseLeftButtonDown"/>
                                <Rectangle x:Name="rect5" Height="30" Width="30" Stroke="#FF000000" StrokeThickness="3" MouseLeftButtonDown="rect5_MouseLeftButtonDown"/>
                                <Rectangle x:Name="rect6" Height="30" Width="30" Stroke="#FF000000" StrokeThickness="3" MouseLeftButtonDown="rect6_MouseLeftButtonDown"/>
                                <Rectangle x:Name="rect7" Height="30" Width="30" Stroke="#FF000000" StrokeThickness="3" MouseLeftButtonDown="rect7_MouseLeftButtonDown"/>
                                <Rectangle x:Name="rect8" Height="30" Width="30" Stroke="#FF000000" StrokeThickness="3" MouseLeftButtonDown="rect8_MouseLeftButtonDown"/>
                                <Rectangle x:Name="rect9" Height="30" Width="30" Stroke="#FF000000" StrokeThickness="3" MouseLeftButtonDown="rect9_MouseLeftButtonDown"/>
                                <Rectangle x:Name="rect10" Height="30" Width="30" Stroke="#FF000000" StrokeThickness="3" MouseLeftButtonDown="rect10_MouseLeftButtonDown"/>
                                <Rectangle x:Name="rect11" Height="30" Width="30" Stroke="#FF000000" StrokeThickness="3" MouseLeftButtonDown="rect11_MouseLeftButtonDown"/>
                                <Rectangle x:Name="rect12" Height="30" Width="30" Stroke="#FF000000" StrokeThickness="3" MouseLeftButtonDown="rect12_MouseLeftButtonDown"/>
                                <Rectangle x:Name="rect13" Height="30" Width="30" Stroke="#FF000000" StrokeThickness="3" MouseLeftButtonDown="rect13_MouseLeftButtonDown"/>
                                </StackPanel>
                                <StackPanel Orientation="Horizontal" d:LayoutOverrides="HorizontalMargin">
                                <Rectangle x:Name="rect14" Height="30" Width="30" Stroke="#FF000000" StrokeThickness="3" MouseLeftButtonDown="rect14_MouseLeftButtonDown"/>
                                <Rectangle x:Name="rect15" Height="30" Width="30" Stroke="#FF000000" StrokeThickness="3" MouseLeftButtonDown="rect15_MouseLeftButtonDown"/>
                                <Rectangle x:Name="rect16" Height="30" Width="30" Stroke="#FF000000" StrokeThickness="3" MouseLeftButtonDown="rect16_MouseLeftButtonDown"/>
                                <Rectangle x:Name="rect17" Height="30" Width="30" Stroke="#FF000000" StrokeThickness="3" MouseLeftButtonDown="rect17_MouseLeftButtonDown"/>
                                <Rectangle x:Name="rect18" Height="30" Width="30" Stroke="#FF000000" StrokeThickness="3" MouseLeftButtonDown="rect18_MouseLeftButtonDown"/>
                                <Rectangle x:Name="rect19" Height="30" Width="30" Stroke="#FF000000" StrokeThickness="3" MouseLeftButtonDown="rect19_MouseLeftButtonDown"/>
                                <Rectangle x:Name="rect20" Height="30" Width="30" Stroke="#FF000000" StrokeThickness="3" MouseLeftButtonDown="rect20_MouseLeftButtonDown"/>
                                <Rectangle x:Name="rect21" Height="30" Width="30" Stroke="#FF000000" StrokeThickness="3" MouseLeftButtonDown="rect21_MouseLeftButtonDown"/>
                                <Rectangle x:Name="rect22" Height="30" Width="30" Stroke="#FF000000" StrokeThickness="3" MouseLeftButtonDown="rect22_MouseLeftButtonDown"/>
                                <Rectangle x:Name="rect23" Height="30" Width="30" Stroke="#FF000000" StrokeThickness="3" MouseLeftButtonDown="rect23_MouseLeftButtonDown"/>
                                <Rectangle x:Name="rect24" Height="30" Width="30" Stroke="#FF000000" StrokeThickness="3" MouseLeftButtonDown="rect24_MouseLeftButtonDown"/
                                <Rectangle x:Name="rect25" Height="30" Width="30" Stroke="#FF000000" StrokeThickness="3" MouseLeftButtonDown="rect25_MouseLeftButtonDown"/>
                                <Rectangle x:Name="rect26" Height="30" Width="30" Stroke="#FF000000" StrokeThickness="3" MouseLeftButtonDown="rect26_MouseLeftButtonDown"/>
                                <Rectangle x:Name="rect27" Height="30" Width="30" Stroke="#FF000000" StrokeThickness="3" MouseLeftButtonDown="rect27_MouseLeftButtonDown"/>
                                </StackPanel>
                                </StackPanel>
<
Canvas Grid.Row="1" Background="#FFF2F2F2" Width="78" HorizontalAlignment="Left">
<
Rectangle Height="67" x:Name="rectFront" Width="70" Fill="#FF000000" Stroke="#FFB9B9B9" StrokeThickness="3" StrokeLineJoin="Miter"StrokeStartLineCap="Flat" Stretch="Uniform" Canvas.Left="4"/>
</
Canvas>
<
Slider x:Name="BrushSize" HorizontalAlignment="Right" Margin="0,18,86,39" Width="90" Grid.Row="1"/>
                <TextBlock Height="13" HorizontalAlignment="Right" VerticalAlignment="Top" Width="59" FontSize="10" Text="Size" TextWrapping="Wrap" Grid.Row="1" Margin="0,5,86,0"/>
                <Slider x:Name="BrushOpacity" HorizontalAlignment="Right" Margin="0,0,86,5" Width="90" Grid.Row="1" VerticalAlignment="Bottom" Height="20"/>
                <TextBlock HorizontalAlignment="Right" Margin="0,0,86,25" Width="59" FontSize="10" Text="Opacity" TextWrapping="Wrap" Grid.Row="1" Height="14" VerticalAlignment="Bottom"/>
                <RadioButton x:Name="RadioRound" Height="18" HorizontalAlignment="Right" Margin="0,5,188,0" VerticalAlignment="Top" Width="101" Grid.Row="1" Content="Round" IsChecked="True"/>
                <RadioButton x:Name="RadioSquare" HorizontalAlignment="Right" Margin="0,23,188,39" Width="101" Grid.Row="1" Content="Square" />
                <RadioButton x:Name="RadioTriangle" HorizontalAlignment="Right" Margin="0,0,188,21" Width="101" Grid.Row="1" Content="Triangle" VerticalAlignment="Bottom" Height="18" />
                <RadioButton x:Name="RadioFlat" HorizontalAlignment="Right" Margin="0,0,188,3" Width="101" Grid.Row="1" Content="Flat" Height="18" VerticalAlignment="Bottom" />
                <Button x:Name="btnClear" HorizontalAlignment="Right" Margin="0,4,2,12" Width="74" Grid.Row="1" Content="Clear" Click="btnClear_Click" ToolTipService.ToolTip="Click to Clear the Drawing"/>
                <Grid x:Name="DrawingArea" Margin="0,0,-5,8" MouseMove="DrawingArea_MouseMove" MouseLeftButtonDown="DrawingArea_MouseLeftButtonDown" MouseLeftButtonUp="DrawingArea_MouseLeftButtonUp" Background="#FFFFFFFF"/>
                </Grid>
</UserControl>

pp4.gif

Figure 1.4 Stack Panels Containing the Color Rectangles

Loading Colors

Our idea is not to fill the rectangles at design time. So I am filling the rectangles at runtime. As you can see from the following code, the rectangles are filled with their respective color.

rect0.Fill = new SolidColorBrush(Color.FromArgb(100,0,0,0));
rect1.Fill = new SolidColorBrush(Color.FromArgb(100,128,128,128));
rect2.Fill = new SolidColorBrush(Color.FromArgb(100,128,0,0));
rect3.Fill = new SolidColorBrush(Color.FromArgb(100,128,128,0));
rect4.Fill = new SolidColorBrush(Color.FromArgb(100,0,128,0));
rect5.Fill = new SolidColorBrush(Color.FromArgb(100,0,128,128));
rect6.Fill = new SolidColorBrush(Color.FromArgb(100,0,0,128));
rect7.Fill = new SolidColorBrush(Color.FromArgb(100,128,0,128));
rect8.Fill = new SolidColorBrush(Color.FromArgb(100,128,128,64));
rect9.Fill = new SolidColorBrush(Color.FromArgb(100,0,64,64));
rect10.Fill = new SolidColorBrush(Color.FromArgb(100,0,128,255));
rect11.Fill = new SolidColorBrush(Color.FromArgb(100,0,64,128));
rect12.Fill = new SolidColorBrush(Color.FromArgb(100,128,0,255));
rect13.Fill = new SolidColorBrush(Color.FromArgb(100,128,64,0));

rect14.Fill = new SolidColorBrush(Color.FromArgb(100,255,255,255));
rect15.Fill = new SolidColorBrush(Color.FromArgb(100,192,192,192));
rect16.Fill = new SolidColorBrush(Color.FromArgb(100,255,0,0));
rect17.Fill = new SolidColorBrush(Color.FromArgb(100,255,255,0));
rect18.Fill = new SolidColorBrush(Color.FromArgb(100,0,255,0));
rect19.Fill = new SolidColorBrush(Color.FromArgb(100,0,255,255));
rect20.Fill = new SolidColorBrush(Color.FromArgb(100,0,0,255));
rect21.Fill = new SolidColorBrush(Color.FromArgb(100,255,0,255));
rect22.Fill = new SolidColorBrush(Color.FromArgb(100,255,255,128));
rect23.Fill = new SolidColorBrush(Color.FromArgb(100,0,255,128));
rect24.Fill = new SolidColorBrush(Color.FromArgb(100,128,255,255));
rect25.Fill = new SolidColorBrush(Color.FromArgb(100,128,128,255));
rect26.Fill = new SolidColorBrush(Color.FromArgb(100,255,0,128));
rect27.Fill = new SolidColorBrush(Color.FromArgb(100,255,128,64));

You must be wondering how did I get all the combinations right. Actually I did assign the rectangle's Fill property and then typed manually in my code.

I think up to this you must be pretty tired of designing. So I will explain the rest in Part II.

 
Happy Coding. 


Similar Articles