Drawing Features in Windows Store App

Introduction

In this article we will discuss drawing features in Windows 8 Metro Style applications. Here we will discuss how to draw vector based graphics in our applications.

In this example we will explain different shapes of graphics, apply the strokes on a particular box, resizing accordingly and drawing gradients with different colors. We have to select an option from a given list and working with selected options. We have to set these colors with the color offset according to the choice. In the stroke option we adjust the thickness of the rectangle box and in the gradient option adjust the controls, which will change the appearance of the gradients in the rectangle. We use the different namespace.

Step 1 : First of all you have to create a new Metro Style Application; let us see the description with images of how you will create it.

Open Visual Studio 2011
File -> New -> Project
Choose Template -> Visual C# -> Windows Metro Style -> Application
Rename this Application

Step 2 : In the Solution Explorer there are two files that we will primarily work with; MainPage.xaml and MainPage.xaml.cs files. In the images folder add any image to the application.

Step 3 : The MainPage.xaml file look like as below with the following code.

Code : Let us see the code which is given below.

<Grid x:Name="LayoutRoot" Background="LemonChiffon">

<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="OrientationStates">
<VisualState x:Name="Full"/>
<VisualState x:Name="Fill">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>35,20,35,20</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(StackPanel.Orientation)" Storyboard.TargetName="InputPanel">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Orientation>Horizontal</Orientation>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="Description">
<DiscreteObjectKeyFrame KeyTime="0" Value="700">
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Portrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>38,20,38,20</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="Description">
<DiscreteObjectKeyFrame KeyTime="0" Value="700">
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>20,20,20,20</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(StackPanel.Orientation)" Storyboard.TargetName="InputPanel">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Orientation>Vertical</Orientation>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="Description">
<DiscreteObjectKeyFrame KeyTime="0" Value="250">
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="LegalPanel">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Thickness>0,0,10,0</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Step 4 : In this step you will see the code for the MainPage.Xaml.cs file.

Code :

using System;
using System.Collections.Generic;
using System.Threading.Tasks;
using Windows.Foundation;
using Windows.Graphics.Display;
using Windows.System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Imaging;
namespace Drawing
{
partial class MainPage
{
public MainPage()
{
InitializeComponent();
ScenarioList.SelectionChanged += new SelectionChangedEventHandler(ScenarioList_SelectionChanged);
// Starting scenario is the first or based upon a previous selection
ListBoxItem startingScenario = null;
if (SuspensionManager.SessionState.ContainsKey("SelectedScenario")) {
String selectedScenarioName = SuspensionManager.SessionState["SelectedScenario"] as string;
startingScenario = this.FindName(selectedScenarioName) as ListBoxItem;
}
ScenarioList.SelectedItem = startingScenario != null ? startingScenario : Scenario1;
Scenario1Init();
Scenario2Init();
Scenario3Init();
Windows.UI.ViewManagement.ApplicationLayout.GetForCurrentView().LayoutChanged += newTypedEventHandler<Windows.UI.ViewManagement.ApplicationLayout, Windows.UI.ViewManagement.ApplicationLayoutChangedEventArgs(MainPage_LayoutChanged);
DisplayProperties.OrientationChanged += new DisplayPropertiesEventHandler(DisplayProperties_OrientationChanged); }
void DisplayProperties_OrientationChanged(object sender)
{
if (DisplayProperties.CurrentOrientation == DisplayOrientations.Portrait || DisplayProperties.CurrentOrientation == DisplayOrientations.PortraitFlipped)
{
VisualStateManager.GoToState(this, "Portrait", false);
}
}
void MainPage_LayoutChanged(Windows.UI.ViewManagement.ApplicationLayout sender, Windows.UI.ViewManagement.ApplicationLayoutChangedEventArgs args) {
switch (args.Layout)
{
case Windows.UI.ViewManagement.ApplicationLayoutState.Filled:
VisualStateManager.GoToState(this, "Fill", false);
break;
case Windows.UI.ViewManagement.ApplicationLayoutState.FullScreen:
VisualStateManager.GoToState(this, "Full", false);
break;
case Windows.UI.ViewManagement.ApplicationLayoutState.Snapped:
VisualStateManager.GoToState(this, "Snapped", false);
break;
default:
break;
}
}
void Scenario1Init()
{

}