Blog Archives

New Controls in Windows 8.1

Windows 8.1 Preview introduces these new controls and features:

  • AppBar controls
  • CommandBar
  • DatePicker
  • Flyout
  • Hub
  • Hyperlink
  • MenuFlyout
  • SettingsFlyout
  • TimePicker

Windows 8.1 Preview includes updates for these existing controls:

  • FlipView updates
  • Headers for ComboBox, DatePicker, TimePicker, Slider, Edit controls
  • Placeholder text
  • Other control updates

AppBar controls

Windows 8.1 Preview introduces new controls for XAML that let you more easily create app bar command buttons that reflect the proper design guidelines and behaviors: the AppBarButtonAppBarToggleButton, andAppBarSeparatorcontrols.

App bar buttons for XAML

App bar buttons differ from standard buttons in several ways:

  • Their default appearance is a circle instead of a rectangle.

  • You use the Label and Icon properties to set the content instead of the Content property. The Contentproperty is ignored.

  • The button’s IsCompact property controls its size.

 

CommandBar

 

Windows 8.1 Preview introduces a new control for XAML that lets you easily create properly designed app bars: theCommandBar control.

The command bar

The CommandBar simplifies the creation of basic app bars by providing:

  • Automatic layout of commands, with primary commands on the left and secondary commands on the right.

  • Automatic resizing of app bar commands when the app size changes.

 

DatePicker

Windows 8.1 Preview introduces a new control for XAML that lets a user set a localized date in your app: theDatePickercontrol.

The date picker

 

TimePicker

Windows 8.1 Preview introduces a new control for XAML that lets a user pick a time value in your app: theTimePickercontrol.

The TimePicker

 

 

Flyout

Windows 8.1 Preview introduces a new control for XAML that lets you temporarily show UI related to what the user is currently doing: the Flyout control.

A button with a flyout

 

 

Hub

Windows 8.1 Preview introduces a new control for XAML that lets you easily create the hub design pattern that reflects the proper design guidelines and behaviors: the Hub control.

A hub page

Hub pages are the user’s entry point to your app. They display content in a rich, panning view that lets users get a glimpse of what’s new and exciting, and then dig deeper into your app’s content. The hub displays different categories of content, each of which maps to your app’s section pages. Each section should bubble up content or functionality. The Hub should offer a lot of visual variety, engage users, and draw them in to different parts of the app.

The XAML Hub control provides elements to help you more easily implement the hub design pattern for your app. Unlike a GridView or ListView control that displays data from a single source, each hub section can display data from a different source. Any XAML content can be used to create a visually rich hub page. To get started quickly creating an app with aHub page, use the Hub App template in Microsoft Visual Studio 2013 Preview.

Add a header to the Hub to let users know the context of your hub. This is often the name of your app. You can use a simple text Header, or define a HeaderTemplate that uses any XAML content. It’s important to remember that, although you can use arbitrary content in the header, the height of the header will affect the amount of vertical space available for your hub section content. The header remains fixed in position and doesn’t scroll with the hub sections.

 

Hyperlink

Windows 8.1 Preview adds the Hyperlink element to the XAML text object model in theWindows.UI.Xaml.Documents namespace.

The Hyperlink element lets you add a hyperlink to a run of text. The hyperlink is treated like the rest of the text and participates in line breaking. When marked as a hyperlink, the text is shown in a specific color and, when tapped, goes to the Uniform Resource Identifier (URI) specified in the NavigateUri property.

Here’s a block of text with a Hyperlink element embedded in it.

Text with a hyperlink

 

MenuFlyout

Windows 8.1 Preview introduces a new control for XAML that lets you temporarily show a list of commands or options related to what the user is currently doing: the MenuFlyout control.

A button with a menu flyout

 

SettingsFlyout

Windows 8.1 Preview introduces a new control for XAML that lets you easily create app settings flyouts that reflect the proper design guidelines and behaviors: the SettingsFlyout control.

The SettingsFlyout

Like a Page control, a SettingsFlyout control can be declared in XAML as a root element of a document, with anx:Class attribute specified to subclass from SettingsFlyout. You can set the width of the Settings flyout, but the height is always the full height of the screen.

 

 

Complete details of the new controls introduced in Windows 8.1 can be found at http://msdn.microsoft.com/en-us/library/windows/apps/bg182878.aspx

Using Custom Fonts in Windows store applications

While doing Windows Store application development, one might come to a point where he/she want to use a custom font to do styling in their applications rather than using a font that comes with Windows & its SDK.

The procedure to use a custom font is very simple and it can be done by following the below steps. 

  • Add your custom font (.ttf or any other format) into your application assets by right clicking on your project in Solution Explorer > Add New Item > Existing Item.
     
  • Modify the property of FontFamily of your control to 


    FontFamily=”/Assets/BuxtonSketch.ttf#Buxton Sketch” 

    Where BuxtonSketch.ttf is your font file name and its actual name (Buxton Sketch) after the “#”.

Complete code snippet is 
<TextBlock x:Name=”pageTitle” Text=”Application Name” Style=”{StaticResource PageHeaderTextStyle}” FontFamily=”/Assets/BuxtonSketch.ttf#Buxton Sketch”/>
Thanks

Connect your Windows 8 applications to the Cloud

The Windows Azure Mobile Services (WAMS) is a new offering of Microsoft Azure cloud platform that simplifies the implementation of software architectures that addresses the type of environment and challenges that includes;

  1. Multiple devices and Operating system’s to support.
  2. Applications that rely on asynchronous Web services, typically hosted in the cloud.
  3. Variable traffic that complicates resource planning and provisioning.

Windows Azure Mobile services supports all major mobile application development platforms i.e. Windows 8, Windows Phone, IOS and Android, that is why it is termed as “Mobile Services” because it is based on open standards.

Windows Azure Mobile services empowers a developer to add a cloud based backend to their application easily & instantly, allowing users to store relational data into SQL database, binary objects into Storage/Containers, encoding of media files and so on, so that you focus on application logic instead of infrastructure.

The major features of Azure Mobile Services are

  1. Authentication 
    Provides authentication/User Login feature into your application, it supports multiple providers i.e. Microsoft Live ID, Facebook, Google and Twitter.
  2. Data 
    Provides an interface to interact with your SQL Azure database and perform CRUD operations asynchronously.
  3. Push Notifications 
    Provides a simplified way to send Push Notifications by attaching a notification channel to the inserted record.

 

Mobile Services with Windows 8

Now lets go ahead and create a simple application that will be connected to our SQL Azure database to demonstrate the simplicity and power of Mobile Services.

[Note: You can signup for Free 90 days trial of windows azure by visiting www.windowsazure.com ] 

Configuration on Azure Portal

First, we are going to create a Mobile service in our Windows Azure portal and make necessary configurations. 
Go Ahead and login to your azure developer portal,

  1. Click “NEW” at bottom left corner and go to “Compute > Mobile Services >  Create” 

    image 

  2. Provide a name(subdomain) to your Mobile Service, select “Create a new database instance” (incase you have not setup any database earlier), select your nearest region and click next. 

    image

  3. Enter the database name, and database server details, I have created a new database server to keep things simple, once everything is filled, click OK to create your Mobile Service. 

    image 

    It will take few moments to create your mobile service.

  4. After everything is completed, you will see your mobile service status as “Ready” and a URL. 
    Copy this URL, we will be needing this URL to connect our client with the mobile service. 

    image

  5. Click “Manage Keys’” at the bottom and copy “Application Key”. 
    We will be needing this Application Key to connect our client with the mobile service. 

    image

  6. Go ahead and click your Mobile Service name, and click on “DATA” tab, located at the top. 

    image

  7. Click “Add a Table” to create a new data table in our SQL database. 
    You can set permission on the table, so that only authenticated users can perform few or all operations. for now I am leaving it to default. 

    image

Connecting Windows 8 Application to our Mobile Service

Now, we have our Mobile service with a employee table UP & running, Lets move to connect our windows 8 application with the mobile service we just created to store & retrieve data.

Before we jump into the coding part, you have to install “Mobile Services SDK”.

  1. Create a new Windows Store application.
  2. Add a reference of “Windows Azure Mobile Services Managed Client” into your project.
  3. Open App.xaml.cs and add the following code. 

    public static MobileServiceClient MicMobileService  = new MobileServiceClient( “URL”, “Application Key” );

  4. Create a new class, name it “Employee” and add your desired properties. My class looks like this

    class Employee {
    public int ID { get; set; }
    public string Name { get; set; }
    public string Email { get; set; }
    public string Department { get; set; }
    public int Phone { get; set; } }
      Note: This class will represent our entities in the database, the approach similar to Entity Framework (ORM).
  5. Open your MainPage.xaml, insert few textboxes and a button to insert a new employee data into the database.

    image

  6. On the Click Event Handler of “Add Employee” button add the following code.
    private async void Button_Click_1(object sender, RoutedEventArgs e) 
    {
    MessageDialog msg; Employee item = new Employee {
    Name=name.Text, Department=dept.Text, Email=email.Text,
    Phone=Convert.ToInt32(phone.Text) };
    try
    {
    await App.MicMobileService.GetTable<Employee>().InsertAsync(item);
    msg = new MessageDialog("Employee added successfully");
    msg.ShowAsync();
    }
    catch (Exception es)
    {
    msg = new MessageDialog("Error has been occured \n" + es.Message);
    msg.ShowAsync();
    }
    }
  7. Now if you run the project and add a record, you would probably see a success message like this.

    image



  8. Just to cross check, Go back to your Azure portal, click on your Mobile Service, go to DATA tab, select your “Employee” table and under 
    Browse” tab, you will see your recently inserted data.

    image

Summary

By using Windows Azure Mobile Service (WAMS), we have hooked up our client application with windows azure by typing only few lines of code., and our application can be scaled up instantly with the help of instantly scalability features of Windows Azure.

There is another feature called “Scripts”, that allows you to perform some specific operations (server side validation, push notifications, files manipulation etc. ) on each CRUD operation into the table. (depending upon your business logic),