Building Your First Win8 Enterprise App

You are a business analyst charged with understanding the retail market. You’ve decided to create an application that will display the relative revenues for the key stores in your district.  Obtaining the data is easy, but you’d like a graphic representation of the revenue volume for each of the key stores. 

Start by storyboarding your application.  It will be a single page for now, just a prompt and a graph,

In examining this storyboard you notice that you have a linear scale on the y axis and a categorical scale on the x axis.  This will be important when  you are ready to put your chart together.

Putting It Together

You start, as always with your data.  You’ll create a class to represent the store. It will have numerous properties, but for the purpose of this exercise, we’ll boil it down to the essentials:

public class StoreRevenue

{

    public string StoreName { get; set; }

    public double Amount { get; set; }

}

The StoreName will be the category (x axis) and the Amount will be the value (y axis).  You’ll need data, and rather than distract ourselves with getting that data from a database, we’ll hard code it for now, as a static method on the StoreRevenue class,

public static ObservableCollection<StoreRevenue> GetStoreRevenue()

{

    var revenues = new ObservableCollection<StoreRevenue>();

    revenues.Add( new StoreRevenue() { Amount = 20, StoreName = "Macy's" } );

    revenues.Add( new StoreRevenue() { Amount = 50, StoreName = "Gimbels" } );

    revenues.Add( new StoreRevenue() { Amount = 10, StoreName = "A&S" } );

    revenues.Add( new StoreRevenue() { Amount = 40, StoreName = "E. J. Korvette" } );

    revenues.Add( new StoreRevenue() { Amount = 60, StoreName = "Crazy Eddie's" } );

    return revenues;

}

The View Model

You now have a storyboard of your view, and you have your model (data) but you need to create your ViewModel to mediate between the model and the view.  Once again, we’ll keep the VM as simple as possible, complicated only by the fact that it implements INotifyPropertyChanged,

class ViewModel : INotifyPropertyChanged

{

    private ObservableCollection<StoreRevenue> storeRevenues;

    public ObservableCollection<StoreRevenue> StoreRevenues

    {

        get { return storeRevenues; }

        set

        {

            storeRevenues = value;

            NotifyPropertyChanged();

        }

    }

    private void NotifyPropertyChanged( [CallerMemberName] string caller = "" )

    {

        if ( PropertyChanged != null )

        {

            PropertyChanged( this, new PropertyChangedEventArgs( caller ) );

        }

    }

    public event PropertyChangedEventHandler PropertyChanged;

}

Key is the single property: StoreRevenues which is of type ObservableCollection of StoreRevenue.  This will notify the UI any time an item is added to or removed from the collection. 

NB: If you want notification to the UI every time one of the members of the collection changes its value, then you’ll need to implement INotifyPropertyChanged on the StoreRevenue class as well.  We’ll skip that for now.

We are ready to build our view which we do in the XAML.  First we set up the rows and columns,

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

 <Grid.RowDefinitions>

 <RowDefinition Height="70" />

 <RowDefinition Height="*" />

 </Grid.RowDefinitions>

 <Grid.ColumnDefinitions>

 <ColumnDefinition Width="20" />

 <ColumnDefinition Width="*" />

 </Grid.ColumnDefinitions>

We’re ready now to add the TextBlock that will serve as the prompt,

<TextBlock Grid.Row="0"

 Grid.Column="1"

 Text="Revenue by Store" 

 FontSize="40"

 VerticalAlignment="Bottom"/>

We’re about to add the RadCartesianChart itself, but we need to do a few things first.

Let’s add the RadControlsForMetro to the References so that the correct assemblies are included. 

Next, at the top of the XAML we’ll create a namespace for the Telerik controls:

xmlns:telerik="using:Telerik.UI.Xaml.Controls"

We’re ready now to add the RadCartesianControl but I know that it is going to need a LabelStyle and I’m inclined to put that into my resources before I begin. So let’s pop up above the Grid and add a Page.Resources section with the Style,

<Page.Resources>

 <Style x:Key="LabelStyle"

 TargetType="TextBlock">

 <Setter Property="FontSize"

 Value="20"></Setter>

 <Setter Property="Foreground"

 Value="Yellow" />

 </Style>

</Page.Resources>

With that in place, we can return to just below the TextBlock and add the RadCartesianChart,

<telerik:RadCartesianChart Grid.Row="1" Grid.Column="1" Margin="50">

As  you’ll remember, our horizontal axis is categorical and we want it to use the LabelStyle we just defined in the Page resource,

<telerik:RadCartesianChart.HorizontalAxis>

 <telerik:CategoricalAxis LabelStyle="{StaticResource LabelStyle}"

 LabelFitMode="MultiLine"></telerik:CategoricalAxis>

</telerik:RadCartesianChart.HorizontalAxis>

Our vertical axis, on the other hand, is  linear, but it uses the same label style,

<telerik:RadCartesianChart.VerticalAxis>

 <telerik:LinearAxis LabelStyle="{StaticResource LabelStyle}"></telerik:LinearAxis>

</telerik:RadCartesianChart.VerticalAxis>

Now we get to have some fun, setting up the AreaSeries itself. We can set the fill and the stroke to whatever colors we think will look best, and we can bind the ItemsSource to the property we designated in the ViewModel,

<telerik:AreaSeries Fill="Orange"

 Stroke="Red"

 ItemsSource="{Binding StoreRevenues}">

We are now ready to bind the appropriate fields from the StoreRevenue class to the value and category of the area grid,

<telerik:AreaSeries.ValueBinding>

 <telerik:PropertyNameDataPointBinding PropertyName="Amount" />

</telerik:AreaSeries.ValueBinding>

<telerik:AreaSeries.CategoryBinding>

 <telerik:PropertyNameDataPointBinding PropertyName="StoreName" />

</telerik:AreaSeries.CategoryBinding>

All that’s left is to close up the open tags (in the correct order!)  and to set the DataContext to the ViewModel.  We do the latter in the code behind. Click on MainPage.xaml.cs and we’ll make that connection in OnNavigatedTo so that the DataContext is set when the page is navigated to,

protected override void OnNavigatedTo(NavigationEventArgs e)

{

    var vm = new ViewModel();

    vm.StoreRevenues = StoreRevenue.GetStoreRevenue();

    DataContext = vm;

}

The application is ready to run.

Creating In Blend

Of course, all that we created in XAML in Visual Studio we can create visually in Blend. 

Once the Chart is on the artboard, we can see it in the Objects and Timeline,

Switching to the properties window we can set the colors and layout in the properties window,

Blend gives you a very powerful view of the chart as you are assembling the data. 

Next Steps

Stay tuned for upcoming blog posts on going beyond your first application.

Download the project