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">
        <!--App Orientation States-->
        <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()
        {

        }

Step 5 : After running this code we get the following output which is as given below. The first option is shapes as shown below.

The second option is strokes. Here we have to adjust the slider which will change the stroke thickness of the rectangle displayed below.

Then we have to change the stroke thickness; see the following output.

The third option is the gradients. Here in this option, adjust the controls to change the appearance of the gradients in the rectangle.