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

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.
The Expected Interface of the App
Help William accomplish the preceding task.

Solution;

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 Code

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";
}
}