Collapse All Expand All

In this step, you'll create a new Windows Store application in Visual Studio, add assembly references, and add the .xaml and code files needed for the application.

1. Select File | New | Project to open the New Project dialog box.
   1. Select Windows Store under C# in the right-hand pane.
   2. In the left-hand pane, select Blank App (XAML).
   3. Enter a name for your application, in this case RegionSales, and click OK. A new, blank Windows Store application will open.

2. In the Solution Explorer, right-click the References file and select Add Reference from the list. Browse to locate the following assembly references:

3. Double-click the MainPage.xaml file to open it.
4. Add the following namespace declarations to the <Page> tag at the top of the page:

The <Page> tag at the top of the page should resemble the following sample:

Markup	Copy Code
<Page x:Class="RegionSales.RegionSale" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:RegionSales" xmlns:sp="using:C1.Xaml.Sparkline" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">

5. Place your cursor between the <Grid> </Grid> tags and insert the following markup. This will create the grid's resources, row, and column definitions:

Markup

Copy Code

<Grid.Resources> <Style TargetType="TextBlock"> <Setter Property="FontSize" Value="16" /> </Style> </Grid.Resources> <Grid Width="800" Margin="10"> <Grid.RowDefinitions> <RowDefinition Height="30"/> <RowDefinition /> </Grid.RowDefinitions> <Grid Background="Gray"> <Grid.ColumnDefinitions> <ColumnDefinition Width="100"/> <ColumnDefinition Width="100"/> <ColumnDefinition Width="100"/> <ColumnDefinition Width="200"/> <ColumnDefinition Width="150"/> <ColumnDefinition Width="150"/> </Grid.ColumnDefinitions>

6. Directly after the </Grid.ColumnDefinitions> tag, add the following markup to create the label TextBox controls, and a separate ScrollViewer control which contains the RegionSalesListBox:

Markup

Copy Code

<TextBlock Text="Region" HorizontalAlignment="Center" VerticalAlignment="Center"/> <TextBlock Text="Total Sales" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center"/> <TextBlock Text="Net Sales" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center"/> <TextBlock Text="Sales Trend" Grid.Column="3" HorizontalAlignment="Center" VerticalAlignment="Center"/> <TextBlock Text="Win/Loss" Grid.Column="4" HorizontalAlignment="Center" VerticalAlignment="Center"/> <TextBlock Text="Profit Trend" Grid.Column="5" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Grid> <ScrollViewer Grid.Row="1" HorizontalScrollMode="Disabled" x:Name="scrollViewer"> <ItemsControl x:Name="RegionSalesListBox" ItemsSource="{Binding Sales}"> </ItemsControl> </ScrollViewer> </Grid>

7. Right-click your MainPage.xaml page and select View Code from the list. Import the following namespace:

C#	Copy Code
using C1.Xaml.Sparkline;

8. Add the following code to the InitializeComponent() method to create new random data:

C#

Copy Code

Random rnd = new Random(); string[] states = new string[] { "Alabama", "Alaska", "Arizona", "Idaho", "Illinois", "Indiana", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Vermont", "Virginia", "Washington" }; for (int i = 0; i < states.Length; i++) { RegionSalesData rsd = new RegionSalesData(); rsd.State = states[i]; rsd.Data = new ObservableCollection<double>(); for (int j = 0; j < 12; j++) { double d = rnd.Next(-50, 50); rsd.Data.Add(d); rsd.NetSales += d; rsd.TotalSales += Math.Abs(d); } RegionSale sale = new RegionSale(rsd); RegionSalesListBox.Items.Add(sale); }

9. Since you have your MainPage.xaml page set up, right-click your application name and select Add | New Item.
   1. In the Add New Item dialog, select Blank Page in the right-hand pane.
   2. Name the file RegionSale and click OK.
10. Right-click your application name again and select Add | New Item again.
     
    1. In the Add New Item dialog, select Code in the left-hand pane.
    2. Select Code File in the right-hand pane.
    3. Name the file RegionSalesData and click OK.

In this step, you created a new Windows Store application, added the appropriate reference assemblies, and added both another .xaml page and a code file to your application. In the next step, you'll create the RegionSale.xaml page that you added in this step.

 

 

---

Copyright (c) GrapeCity, inc. All rights reserved.

Product Support Forum  |  Documentation Feedback