William works as a Windows Store app developer at WegaApps Co. He has a new assignment for creating a basic paint app.

Problem Statement:

William works as a Windows Store app developer at WegaApps Co. He has a new assignment for creating a basic paint app.

The paint app should have the following features:

• Paint area: A full screen area for drawing lines and shapes.
• Drawing toolbar: A toolbar that allows drawing an ellipse, a rectangle, and a straight line. In addition, the toolbar should contain a button for clearing the screen.
• Color toolbar: A toolbar that allows selecting a color for stroke and fill of the shapes with the help of the various color buttons.
• In addition, a toggle button allows to switch between the stroke and fill colors. To select a stroke/fill color, first the toggle button needs to be clicked, and then a color needs to be selected by clicking a color. Further, the app allows the user to change the stroke thickness from 1 to 100.
• Both the toolbars should be displayed to the user on demand.

The interface of the app should look like the one shown in the following figure.

Solution:

To create a basic paint app, William needs to perform the following tasks:

Create a blank Windows Store app.
Create the paint area.
Create the color toolbar.
Create the drawing toolbar.
Verify the created app.

XAML CODE:

<AppBar n:Name="appBarColors" HorizontalAlignment="Right" Background="Black" Width="1250">
<GridView SelectionMode="None" Tapped="1boxColors_Tapped" x:Name="1boxColors" HorizontalAlignment="Center" Width="1250">
VerticalAlignment="Center" Background="Black" ScrollViewer.HorizontalScrollMode="Auto"
ScrollViewer.VerticalScrollMode="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto" Margin="10,0,7,210"

<Button Background="Aqua" Heigh="300" Width="300"></Button>
<Button Background="Black" Heigh="300" Width="300"></Button>
<Button Background="Blue" Heigh="300" Width="300"></Button>
<Button Background="Chocolate" Heigh="300" Width="300"></Button>
<Button Background="Crimson" Heigh="300" Width="300"></Button>
<Button Background="Cyan" Heigh="300" Width="300"></Button>
<Button Background="DarkGreen" Heigh="300" Width="300"></Button>
<Button Background="DarkMagenge" Heigh="300" Width="300"></Button>
<Button Background="DarkOrange" Heigh="300" Width="300"></Button>
<Button Background="DarkRad" Heigh="300" Width="300"></Button>
<Button Background="ForestGreen" Heigh="300" Width="300"></Button>
<Button Background="Fuchsia" Heigh="300" Width="300"></Button>
<Button Background="Gold" Heigh="300" Width="300"></Button>
<Button Background="Gray" Heigh="300" Width="300"></Button>
<Button Background="Green" Heigh="300" Width="300"></Button>
<Button Background="GreenYellow" Heigh="300" Width="300"></Button>
<Button Background="HotPink" Heigh="300" Width="300"></Button>
<Button Background="Indigo" Heigh="300" Width="300"></Button>
<Button Background="LavenderBlush" Heigh="300" Width="300"></Button>
<Button Background="LightBlue" Heigh="300" Width="300"></Button>
<Button Background="LightPink" Heigh="300" Width="300"></Button>
<Button Background="Lime" Heigh="300" Width="300"></Button>
<Button Background="LimeGreen" Heigh="300" Width="300"></Button>
<Button Background="Magenta" Heigh="300" Width="300"></Button>
<Button Background="Maroon" Heigh="300" Width="300"></Button>
<Button Background="OrangeRed" Heigh="300" Width="300"></Button>
<Button Background="Pink" Heigh="300" Width="300"></Button>
<Button Background="Purple" Heigh="300" Width="300"></Button>
<Button Background="Red" Heigh="300" Width="300"></Button>
<Button Background="RosyBrown" Heigh="300" Width="300"></Button>
<Button Background="RoyalBlue" Heigh="300" Width="300"></Button>
<Button Background="SandyBrown" Heigh="300" Width="300"></Button>
<Button Background="Silver" Heigh="300" Width="300"></Button>
<Button Background="SkyBlue" Heigh="300" Width="300"></Button>
<Button Background="Tomato" Heigh="300" Width="300"></Button>
<Button Background="Violet" Heigh="300" Width="300"></Button>
<Button Background="White" Heigh="300" Width="300"></Button>
<Button Background="Yellow" Heigh="300" Width="300"></Button>
<Button Background="YellowGreen" Heigh="300" Width="300"></Button>

<ToggleButton Background="Blue" x:Name="tglBtnStrokeFill" Content="Stroke" FontSize="70" Tapped="tglBtnStrokeFill_Tapped" Wigth="300" Height="300"/>
<Slider x:Name="sldrstrokeThickness" Orientation="Vertical" Minimum="1" Maximum="100" Height="250" ValueChanged="sldrStrokeThickness_ValueChanged"/>
<TextBlock Text="Thickness" FontSize="70" Height="300" Width="300"/>
</GridView>

</AppBar>

------------------------------------------------------------------------------------------------------------------
CS page:

privare void 1boxColors_Tapped(object sender, TappedRoutedEventArgs e)
{
UIElement controls = e.OriginalSource as UIElement;
while (controls != null && controls !=sender as UIElement)
{
if (controls is Button)
{
Button bttn = controls as Button;
if (tglBtnStrokeFill.Content.ToString() == "Stroke")
strokeColor = (SolidColorBrush) bttn.Background;
else
fillColor = (SolidColorBrush)bttn.Background;
break;
}
controls  = VisulTreeHelper.GetParent(controls) as UIElement;
}
}
private void tglBtnStrokeFill_Tapped(object sender, TappedRoutedEventArgs e)
{
if (tglBtnStrokeFill.Content.ToString() == "Stroke")
{
tglBtnStrokeFill.Content = "Fill";
}
else
{
tglBtnStrokeFill.Content = "Stroke";
}

}