Deploying Locally

When you build an app in Visual Studio, it is automatically deployed on your computer. If you use the system's Search tool, you can find the app. You can then click the app to run it. You can also right-click it and select Pin to Start, Pin to Taskbar, or Uninstall.

You can also manually deploy an app locally or on a remote computer. To do that, open the target dropdown on the Standard toolbar shown in Figure 31.3 and select Simulator, Local Machine, or Remote Machine. If you select Remote Machine, a dialog appears that lets you select the machine where you want to deploy the app.

After you select the deployment target, open the Build menu and select Deploy.

If you deployed to the Simulator target, you can use the Debug menu's Start Debugging command to run the application in the simulator. If you deployed to a local or remote machine, you should be able to find and run the app there.

Deploying to the Windows Store

After you have tested your app and want to make it available to others, you can submit it to the Windows Store.

Before you can submit apps to the Windows Store (or the Windows Phone Store), you need to ­register for a couple of accounts.

First register for a Microsoft account at signup.live.com/signup.aspx?lic=1.

Next, register for a Windows Dev Center developer account at dev.windows.com/join. Unfortunately this registration isn't free. It currently costs roughly $19 for individuals and $99 for companies (depending on your location and taxes).

Microsoft charges the fee to cover the cost of inspecting the apps that are submitted to the store. When you submit an app, Microsoft verifies that it meets some standard criteria to make apps more uniform. For example, you must include a description, an app tile icon, and a screen shot. Microsoft also inspects the app to ensure that it doesn't contain a virus or other malware.

After you have the Microsoft and Dev Center accounts, you can build and test your app. When you're finished, you use the unified Windows Dev Center dashboard to submit the app.

If your app fails certification, you can fix it and try again until everything is perfect. Then you can publish the app for the world to use.

Rather than including a lot of extra details (which would probably change before you read this anyway), this section ends with a list of links you can use to get more information:

• Sign up for a Microsoft account at signup.live.com/signup.aspx?lic=1.
• Register for a Windows Dev Center developer account at dev.windows.com/join.
• Learn about the unified Windows Dev Center dashboard at msdn.microsoft.com/library/windows/apps/mt169843.aspx.
• Learn more about the submission process at msdn.microsoft.com/library/windows/apps/hh694062.aspx.
• Learn more about the app certification process at msdn.microsoft.com/library/windows/apps/mt148554.aspx.
• Read introductory articles at dev.windows.com/windows-apps.
• Find a list of How-To articles for C# and XAML programming at msdn.microsoft.com/library/windows/apps/xaml/br229566.aspx.
• Visite the Windows Store at www.microsoft.com/windows.
• Visit the Apps and Games section of the Windows Store at www.microsoft.com/en-us/windows/apps-and-games.
• Read Microsoft's article “App features, start to finish (XAML)” at msdn.microsoft.com/library/windows/apps/xaml/dn632431.aspx.
• Read Microsoft's article “Create your first Windows Store app using C# or Visual Basic” at msdn.microsoft.com/library/windows/apps/dn631757.aspx.

Using Styles

Imagine you have an app that uses several dozen TextBlocks. Now suppose you decide that you want to change the font size, color, or some other property for all of those TextBlocks. Editing the XAML code to make the change would be straightforward but time-consuming.

XAML makes this easier by allowing you to define styles. A style defines some of the properties for a particular type of control in some part of the window's hierarchy. You define styles inside a resource dictionary attached to some XAML object.

For example, you could give a resource dictionary to the main Grid control that contains the other controls on the window. Next you could create a style for the TextBlock class inside that resource dictionary. After you create the style, any TextBlock inside that Grid will use the style.

The following code shows how you might create a style to set the font size for TextBlock controls:

<Grid>
    <Grid.Resources>
        <Style TargetType="TextBlock">
            <Setter Property="FontSize" Value="20"/>
        </Style>
    </Grid.Resources>
    ...
    <TextBlock Text="First Name:"/>
    <TextBlock Text="Last Name:"/>
    ...
</Grid>

The Grid contains a Resources section that defines the resource dictionary. That section contains a Style object. The TargetType property (in this case set to TextBlock) indicates the type of object to which the style can apply.

Inside the style, a Setter object defines a property that it can set for the target type. In this example, the Setter sets the object's FontSize property to the value 20.

Now any TextBlock objects that come later in the Grid automatically use this style. If you later decide to change the size for the TextBlocks, you only need to change it in the style.

There's one other way you can use styles. If you give a style a name, then other controls can explicitly use that style. For example, the following code defines a named style:

<Grid>
    <Grid.Resources>
        <Style x:Key="BigStyle" TargetType="TextBlock">
            <Setter Property="FontSize" Value="50"/>
        </Style>
    </Grid.Resources>
    ...
    <TextBlock Text="First Name:" Style="{StaticResource BigStyle}"/>
    <TextBlock Text="Last Name:"/>
    ...
</Grid>

This Grid's resource dictionary defines a style named BigStyle. Later a TextBlock uses that style by explicitly setting its Style property to {StaticResource BigStyle}. (The keyword StaticResource tells the program to look in the resource dictionary for a resource that doesn't change after it is defined.)

Any other TextBlocks that don't explicitly set their Style properties use default styles or an unnamed style if one is defined.

Setting Dependency Properties

A dependency property is a property that is defined for one object by a different object. For example, if you place a TextBox inside a Grid control, then you can set the TextBox's Grid.Row and Grid.Column properties. Those properties are defined by the Grid class for any controls that are contained inside a Grid.

In XAML code at design time, you can simply set dependency properties to a value. For example, the following statement sets the TextBox's Grid.Row and Grid.Column properties:

<TextBox Grid.Row="2" Grid.Column="5" Name="annualRateTextBox"/>

However, Row and Column are not truly properties of the TextBox class, so you can't set them directly in C# code. Instead you can use static methods provided by the Grid class, passing those methods the object for which you want to set the property (in this example the TextBox) and the value you want to set. For example, the following code sets the Grid.Row and Grid.Column properties for the TextBox named annualRateTextBox:

    Grid.SetRow(annualRateTextBox, 2);
    Grid.SetColumn(annualRateTextBox, 5);

If you need to retrieve the value of a dependency property, use the corresponding Get method as in int row = Grid.GetRow(annualRateTextBox).

Lesson Requirements

In this lesson, you:

• Start a new Windows project by selecting the Blank App. Replace the main window's Grid control with a Canvas control named mainCanvas.
• Add a MediaElement to the main window's XAML code to play the click sound.
• Create a Ball sprite class to manage balls. Give it properties and methods to create a random ball, track the ball's position and velocity, and move the ball.
• When the window loads, create a DispatcherTimer and give it an event handler that moves the balls.
• Test the program with both dark and light themes.

Hints

• Make the Ball class use an Ellipse object to display itself.
• Give the Ball class the following using directives:

  using Windows.UI.Xaml.Shapes;
  using Windows.UI.Xaml.Controls;
  using Windows.UI.Xaml.Media;

• Give the Ball class a randomizing constructor, a RandomBrush method, and a Move method.

Step-by-Step

• Start a new Windows project by selecting the Blank App. Replace the main window's Grid control with a Canvas control named mainCanvas.

  1. In Visual Studio 2015's New Project dialog, you can find this template under Templates > Visual C# > Windows > Windows 8 > Windows.
  2. Give the Canvas the same Background property that the initial Grid had. It should look like this:

     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

  This makes the Canvas determine its background color at run time by looking at the theme. (In case the user sets the theme to light or dark.)

• Add a MediaElement to the main window's XAML code to play the click sound.
  1. Use the Project menu's Add Existing Item command to add a click sound file to the project.
  2. Add a MediaElement to the main window's XAML code. Set its x:Name property to clickSound and set its Source property to the sound effect file you added.
• Create a Ball sprite class to manage balls. Give it properties and methods to create a random ball, track the ball's position and velocity, and move the ball.
  1. Use code similar to the following.

     class Ball
     {
         // Used to generate random values.
         static private Random Rand = new Random();
         // All balls have black outlines.
         static private Brush BlackBrush =
             new SolidColorBrush(Windows.UI.Colors.Black);
         public Ellipse MyEllipse;
         public Canvas Parent;
         public double X, Y, Diameter, Vx, Vy;
         // Initialize a random Ball.
         public Ball(Canvas parent)
         {
             // Save the parent.
             Parent = parent;
             // Create the Ball's geometry.
             const int maxSpeed = 15;
             Vx = Rand.Next(-maxSpeed, maxSpeed + 1);
             Vy = Rand.Next(-maxSpeed, maxSpeed + 1);
             Diameter = Rand.Next(50, 200);
             X = Rand.Next(0, (int)(Parent.ActualWidth - Diameter));
             Y = Rand.Next(0, (int)(Parent.ActualHeight - Diameter));
             // Create the Ellipse.
             MyEllipse = new Ellipse();
             MyEllipse.Width = Diameter;
             MyEllipse.Height = Diameter;
             MyEllipse.Fill = RandomBrush();
             MyEllipse.Stroke = BlackBrush;
             Canvas.SetLeft(MyEllipse, X);
             Canvas.SetTop(MyEllipse, Y);
             // Add the new ball to the parent.
             Parent.Children.Add(MyEllipse);
         }
         // Return a random brush.
         static private Brush RandomBrush()
         {
             Brush[] brushes =
             {
                 new SolidColorBrush(Windows.UI.Colors.Red),
                 new SolidColorBrush(Windows.UI.Colors.Orange),
                 new SolidColorBrush(Windows.UI.Colors.Yellow),
                 new SolidColorBrush(Windows.UI.Colors.Lime),
                 new SolidColorBrush(Windows.UI.Colors.Blue),
                 new SolidColorBrush(Windows.UI.Colors.Indigo),
                 new SolidColorBrush(Windows.UI.Colors.Violet),
             };
             return brushes[Rand.Next(0, brushes.Length)];
         }
         // Move the Ball. Return true if the Ball bounces.
         public bool Move()
         {
             // Remember if the ball bounces.
             bool bounced = false;
             // Update the ball's position.
             X += Vx;
             if (X < 0)
             {
                 // Hit the left edge.
                 X = -X;
                 Vx = -Vx;
                 bounced = true;
             }
             else if (X + Diameter > Parent.ActualWidth)
             {
                 // Hit the right edge.
                 double overshoot = (X + Diameter) - Parent.ActualWidth;
                 X = Parent.ActualWidth - overshoot - Diameter;
                 Vx = -Vx;
                 bounced = true;
             }
             Y += Vy;
             if (Y < 0)
             {
                 // Hit the left edge.
                 Y = -Y;
                 Vy = -Vy;
                 bounced = true;
             }
             else if (Y + Diameter > Parent.ActualHeight)
             {
                 // Hit the right edge.
                 double overshoot = (Y + Diameter) - Parent.ActualHeight;
                 Y = Parent.ActualHeight - overshoot - Diameter;
                 Vy = -Vy;
                 bounced = true;
             }
             // Update the Ellipse's position.
             Canvas.SetLeft(MyEllipse, X);
             Canvas.SetTop(MyEllipse, Y);
             return bounced;
         }
     }

• When the window loads, create a DispatcherTimer and give it an event handler that moves the balls.
  1. Add the XAML code Loaded="Page_Loaded" to the main window's definition.
  2. Use the following code to prepare the program when the window is loaded:

     // The movement timer.
     private DispatcherTimer MoveTimer;
     // Balls.
     private const int NumBalls = 10;
     private Ball[] Balls = new Ball[NumBalls];
     // Used to generate random numbers.
     private Random Rand = new Random();
     // Create balls and start them moving.
     private void Page_Loaded(object sender, RoutedEventArgs e)
     {
         // Create the balls.
         for (int i = 0; i < NumBalls; i++)
             Balls[i] = new Ball(mainCanvas);
         // Create the timer.
         MoveTimer = new DispatcherTimer();
         MoveTimer.Interval = new TimeSpan(0, 0, 0, 0, 20);
         MoveTimer.Tick += MoveTimer_Tick;
         MoveTimer.Start();
     }

  3. Use the following code to move the balls when the timer's Tick event fires:

     // Move the balls.
     private void MoveTimer_Tick(object sender, object e)
     {
         // Remember if a ball bounces.
         bool bounced = false;
         foreach (Ball ball in Balls) if (ball.Move()) bounced = true;
         if (bounced) clickSound.Play();
     }

• Test the program with both dark and light themes.
  1. Open the App.xaml file and add the code RequestedTheme="Light" to the Application object's definition. Test the program.
  2. Change the RequestedTheme to "Dark" and test the program again.
  3. After testing, remove the RequestedTheme property so the app uses the theme selected on the user's device.