If your app has a requirement where you use a filepicker and then show the files that the user selects as a preview/list, chances are you would like the option to show thumbnails of the files.

A quick search tells you that the Windows.Storage.StorageFile.GetThumbnailAsync is the way to go! However, I didn’t find an article which just put things together, so here you go

First things first - here are the screenshots from the sample app I wrote:

If this is not what you’re looking for, you may want to avoid reading the rest of this post - no hard feelings!

If this is what you were looking for, let’s get down to business!

1. Set up the FileOpenPicker, get selected files, get thumbnails of the selected files

private async void ButtonBase_OnClick(object sender, RoutedEventArgs e)

{

    // 1. Get FileOpenPicker ready

    var picker = new FileOpenPicker();

    picker.ViewMode = PickerViewMode.Thumbnail;

    picker.SuggestedStartLocation = PickerLocationId.ComputerFolder;

    // 2. Add filters - it's required to have at least one filter

    //    it CANNOT be a wildcard (i.e., no .*)

    picker.FileTypeFilter.Add(".docx");

    picker.FileTypeFilter.Add(".pptx");

    picker.FileTypeFilter.Add(".xlsx");

    picker.FileTypeFilter.Add(".xls");

    picker.FileTypeFilter.Add(".jpg");

    picker.FileTypeFilter.Add(".png");

    picker.FileTypeFilter.Add(".pdf");

    // 3. Call the file picker

    var file = await picker.PickMultipleFilesAsync();

    if (file != null)

    {

        foreach (var storageFile in file)

        {

            // fileList = new ObservableCollection<SimpleFileInfo>(); in the constructor

            // SimpleFileInfo is a class with a string FileName and a StorageItemThumbnail Thumbnail field.

            fileList.Add(new SimpleFileInfo

            {

                FileName = storageFile.Name,

                // 4. Get image thumbnails!!

                Thumbnail = await storageFile.GetThumbnailAsync(ThumbnailMode.SingleItem)

            });

        }

    }

}

2. Create a converter which converts StorageItemThumbnail to an Image

The following snippet was used from Mike Taulty’s blog post on Making a Simple Photo Viewer in C# and XAML.

using Windows.Storage.FileProperties;

using Windows.UI.Xaml.Data;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Media.Imaging;

public class ThumbnailToImageConverter : IValueConverter

{

    public object Convert(object value, Type targetType, object parameter, string language)

    {

        BitmapImage image = null;

        if (value != null)

        {

            if (value.GetType() != typeof(StorageItemThumbnail))

            {

                throw new ArgumentException("Expected a thumbnail");

            }

            if (targetType != typeof(ImageSource))

            {

                throw new ArgumentException("What are you trying to convert to here?");

            }

            StorageItemThumbnail thumbnail = (StorageItemThumbnail)value;

            image = new BitmapImage();

            image.SetSource(thumbnail);

        }

        return (image);

    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)

    {

        throw new NotImplementedException();

    }

}  

3. Bind the filelist (from step 1) to a ListView (or an Items Control of your choice), and use the converter

XAML:

Declare the Converter as a resource

<Page.Resources>

    <local:ThumbnailToImageConverter x:Key="ThumbnailToImageConverter" />

</Page.Resources>

Use it in the ListView

<ListView Grid.Row="1" x:Name="FileListItemsControl" VerticalAlignment="Top" Height="200" Margin="20" >

    <ListView.ItemsPanel>

        <ItemsPanelTemplate>

            <VirtualizingStackPanel Orientation="Horizontal" />

        </ItemsPanelTemplate>

    </ListView.ItemsPanel>

    <ListView.ItemTemplate>

        <DataTemplate>

          <StackPanel>

             <Image Source="{Binding Thumbnail, Converter={StaticResource ThumbnailToImageConverter}}" Height="150" Width="300" />

             <TextBlock Text="{Binding FileName}" Style="{StaticResource BodyTextBlockStyle}" />

          </StackPanel>

        </DataTemplate>

    </ListView.ItemTemplate>

</ListView>

C#:

Set the ItemsSource of the ListView to the fileList collection.

protected override void OnNavigatedTo(NavigationEventArgs e)

{

    navigationHelper.OnNavigatedTo(e);

    this.FileListItemsControl.ItemsSource = fileList;

}

That’s it – you should now be able to try it out!

Show me the (full) codez!

Full XAML and C# listing below:

XAML:

<Page

    x:Name="pageRoot"

    x:Class="DevTest.BasicPage1"

    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:DevTest"

    xmlns:common="using:DevTest.Common"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Page.Resources>

        <local:ThumbnailToImageConverter x:Key="ThumbnailToImageConverter" />

        <x:String x:Key="AppName">File thumbnail sample</x:String>

    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Grid.ChildrenTransitions>

            <TransitionCollection>

                <EntranceThemeTransition/>

            </TransitionCollection>

        </Grid.ChildrenTransitions>

        <Grid.RowDefinitions>

            <RowDefinition Height="140"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <!-- Back button and page title -->

        <Grid>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="120"/>

                <ColumnDefinition Width="*"/>

            </Grid.ColumnDefinitions>

            <Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"

                        Style="{StaticResource NavigationBackButtonNormalStyle}"

                        VerticalAlignment="Top"

                        AutomationProperties.Name="Back"

                        AutomationProperties.AutomationId="BackButton"

                        AutomationProperties.ItemType="Navigation Button"/>

            <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 

                        IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>

        </Grid>

        <Button Content="Pick files" Margin="114,376,0,452" Grid.Row="1" Click="ButtonBase_OnClick"

                 Width="100" Height="100"/>

        <ListView Grid.Row="1" x:Name="FileListItemsControl" VerticalAlignment="Top" Height="200" Margin="20" >

            <ListView.ItemsPanel>

                <ItemsPanelTemplate>

                    <VirtualizingStackPanel Orientation="Horizontal" />

                </ItemsPanelTemplate>

            </ListView.ItemsPanel>

            <ListView.ItemTemplate>

                <DataTemplate>

                    <StackPanel>

                        <Image Source="{Binding Thumbnail, Converter={StaticResource ThumbnailToImageConverter}}" Height="150" Width="300" />

                        <TextBlock Text="{Binding FileName}" Style="{StaticResource BodyTextBlockStyle}" />

                    </StackPanel>

                </DataTemplate>

            </ListView.ItemTemplate>

        </ListView>

    </Grid>

</Page>

C#:

using DevTest.Common;

using System;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Navigation;

namespace DevTest

{

    using System.Collections.ObjectModel;

    using Windows.Storage.FileProperties;

    using Windows.Storage.Pickers;

    // Boilerplate stuff - deleting comments to reduce the code snippet size

    public sealed partial class BasicPage1 : Page

    {

        private NavigationHelper navigationHelper;

        private ObservableDictionary defaultViewModel = new ObservableDictionary();

        // Boilerplate stuff - deleting comments to reduce the code snippet size

        public ObservableDictionary DefaultViewModel

        {

            get { return this.defaultViewModel; }

        }

        // Boilerplate stuff - deleting comments to reduce the code snippet size

        public NavigationHelper NavigationHelper

        {

            get { return this.navigationHelper; }

        }

        private ObservableCollection<SimpleFileInfo> fileList;

        public BasicPage1()

        {

            this.InitializeComponent();

            this.navigationHelper = new NavigationHelper(this);

            this.navigationHelper.LoadState += navigationHelper_LoadState;

            this.navigationHelper.SaveState += navigationHelper_SaveState;

            fileList = new ObservableCollection<SimpleFileInfo>();

        }

        // Boilerplate stuff - deleting comments to reduce the code snippet size

        private void navigationHelper_LoadState(object sender, LoadStateEventArgs e)

        {

        }

        // Boilerplate stuff - deleting comments to reduce the code snippet size

        private void navigationHelper_SaveState(object sender, SaveStateEventArgs e)

        {

        }

        // Boilerplate stuff - deleting comments to reduce the code snippet size

        protected override void OnNavigatedTo(NavigationEventArgs e)

        {

            navigationHelper.OnNavigatedTo(e);

            this.FileListItemsControl.ItemsSource = fileList;

        }

        protected override void OnNavigatedFrom(NavigationEventArgs e)

        {

            navigationHelper.OnNavigatedFrom(e);

        }

        // OUR CODE!!!

        private async void ButtonBase_OnClick(object sender, RoutedEventArgs e)

        {

            // 1. Get FileOpenPicker ready

            var picker = new FileOpenPicker();

            picker.ViewMode = PickerViewMode.Thumbnail;

            picker.SuggestedStartLocation = PickerLocationId.ComputerFolder;

            // 2. Add filters - it's required to have at least one filter

            //    it CANNOT be a wildcard (i.e., no .*)

            picker.FileTypeFilter.Add(".docx");

            picker.FileTypeFilter.Add(".pptx");

            picker.FileTypeFilter.Add(".xlsx");

            picker.FileTypeFilter.Add(".xls");

            picker.FileTypeFilter.Add(".jpg");

            picker.FileTypeFilter.Add(".png");

            picker.FileTypeFilter.Add(".pdf");

            // 3. Call the file picker

            var file = await picker.PickMultipleFilesAsync();

            if (file != null)

            {

                foreach (var storageFile in file)

                {

                    // fileList = new ObservableCollection<SimpleFileInfo>(); in the constructor

                    // SimpleFileInfo is a class with a string FileName and a StorageItemThumbnail Thumbnail field.

                    fileList.Add(new SimpleFileInfo

                    {

                        FileName = storageFile.Name,

                        // 4. Get image thumbnails!!

                        Thumbnail = await storageFile.GetThumbnailAsync(ThumbnailMode.SingleItem)

                    });

                }

            }

        }

    }

    public class SimpleFileInfo

    {

        public string FileName { get; set; }

        public StorageItemThumbnail Thumbnail { get; set; }

    }

}

Thanks for reading!

Amar

PS: You can follow me on twitter at “_amarnit”, where I share some quick tips/learning at times!

This is going to be a small post!

I found a small gem in Windows\System32 folder called SlideToShutDown.exe

When I ran it, I saw this:

Thought it was really cool to have a shortcut to this on the desktop, so that I can shut down my machine with a tap and a slide!

Here’s how I did it:

Right click on the exe in the System32 folder, and click on “Send to desktop”

You should see the shortcut on your desktop now. Right click on the shortcut and “Pin to Start”

And that’s it:

Thanks for reading!

Amar

PS: You can follow me on twitter at “_amarnit”, where I share some quick tips/learning at times!

If you are using Silverlight for Windows Phone 8.1, we will have to use the Microsoft.Phone.Shell.SystemTray class instead.

You could easily set the SystemTray properties in your XAML page like this:

   1: <phone:PhoneApplicationPage

   2:     x:Class="SLApp.MainPage"

   3:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   4:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   5:     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

   6:     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

   7:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

   8:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

   9:     mc:Ignorable="d"

  10:     FontFamily="{StaticResource PhoneFontFamilyNormal}"

  11:     FontSize="{StaticResource PhoneFontSizeNormal}"

  12:     Foreground="{StaticResource PhoneForegroundBrush}"

  13:     SupportedOrientations="Portrait" Orientation="Portrait"

  14:     shell:SystemTray.IsVisible="True"

  15:     shell:SystemTray.BackgroundColor="Blue" 

  16:     shell:SystemTray.ForegroundColor="White" 

  17:     shell:SystemTray.Opacity="1" >

And then, in the xaml.cs, you can set the ProgressIndicator like this:

   1: public MainPage()

   2: {

   3:     InitializeComponent();

   4:  

   5:     var prog = new ProgressIndicator { Text = "My app", IsVisible=true, IsIndeterminate=false,Value=0 };

   6:     SystemTray.SetProgressIndicator(this, prog);

   7: }

And we’re done!

To summarize:

Windows Phone 8.1 (RT/Universal App) --> use Windows.UI.ViewManagement.StatusBar

Silverlight app for Windows Phone 8.1 --> use Microsoft.Phone.Shell.SystemTray

Thank you, @xuggs for bringing this up! Hope this helps :)

Thanks for reading!

Amar

PS: You can follow me on twitter at “_amarnit”, where I share some quick tips/learning at times!

Have you used the Bing apps for Windows Phone? You know, Bing News, Weather, Travel etc.? How about the email client?

Noticed how these apps use the Status Bar on the top?

I think that is very efficient use of the screen space, while not really hiding the status bar. But until I saw how the mail client app does that, I didn’t really figure out how I could do that in my apps. The solution turns out to be extremely simple!

Using the status bar for the title of your app. (AKA., more screen space for the content)

Summary: Set the text property of the progress bar, which is a part of the status bar.

Details:

If you look at the MSDN documentation for the StatusBar class, you’ll see just a handful of properties and methods that you can work with. When I saw how the email client on WP makes use of the status bar, it was obvious how the Bing apps use it!

You can try this piece of code in the OnLaunched event handler in your App.xaml.cs:

// Set the background color of the status bar, and DON'T FORGET to set the opacity!

var statusBar = Windows.UI.ViewManagement.StatusBar.GetForCurrentView();

statusBar.BackgroundColor = (App.Current.Resources["PhoneAccentBrush"] as SolidColorBrush).Color;

statusBar.BackgroundOpacity = 1;

// Set the text on the ProgressIndicator, and show it.

statusBar.ProgressIndicator.Text = "My cool app";

statusBar.ProgressIndicator.ShowAsync();

// If the progress value is null (which is the default value), the progress indicator is in an 

indeterminate state (dots moving from left to right).

// Set it to 0 if you don't wish to show the progress bar.

statusBar.ProgressIndicator.ProgressValue = 0;

So, the key thing is to set the Text property of the ProgressIndicator on the StatusBar, and call the ShowAsync method. Setting the background color and opacity of the status bar is stuff that you could choose to do if you have a particular theme for the app (or choose the phone accent brush).

And that’s it, really! Here are the screenshots of what it looks like with different themes on the phone.

Making use of the screen space of a transparent status bar

Say you have an app which has a photo viewer section. You would obviously want to use up as much screen space as possible, but may be also have some branding – at least the name of the app. Even if you followed all the steps above, and set the opacity of the status bar to 0, you would see something like this:

See how the Status Bar stays on top, even if you set the opacity to 0? That doesn’t look too good. What would be great is if we could have something like this:

To do this, we need to use the entire Window space available, including what is usually allocated for the status bar and the app bar.

So, use this piece code in the OnLaunched event handler in your App.xaml.cs:

// Set the desired bounds on the application view to use the core window, i.e., the entire screen (including app bar and status bar

var applicationView = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView();

applicationView.SetDesiredBoundsMode(Windows.UI.ViewManagement.ApplicationViewBoundsMode.UseCoreWindow);

That’s it for today! Hope this helped.

Thanks for reading!

Amar

PS: You can follow me on twitter at “_amarnit”, where I share some quick tips/learning at times!

Normal State	On mouse over (hover)

This looks good (at least to me) and I wanted to find a simple way to create such a button. I’m mainly a XAML guy, and can create something like this VERY easily in XAML; and I can reuse this as a single unit, like a button. But with HTML, it’s a little different. To make this a reusable component, I’ll use ASP.NET MVC and make this a HtmlHelper. For this reason, I wanted to build this without JavaScript – it’s easier to create a HtmlHelper with just HTML and CSS.

To start things off, I created a plain HTML/CSS version of the Tile button:

<div class="tile" style="background:url(‘Pic.jpg'); background-size:200px 200px" >

      <div class="caption" onclick="alert('Hi!');" >

            <p>Some caption</p>

            <p id="description">Some lengthy description that may potentially overflow into two lines</p>

       </div>

</div>

And the CSS:

.tile{

    height: 200px;

    width: 200px;

    overflow: hidden;

    background-repeat: no-repeat;

    max-width: 100%;

    text-align: center;

    vertical-align: middle;

    background-size:200px 200px;

}

.caption{

    background-color: rgba(50,50,50,0.4);

    overflow: hidden;

    color: #fff;

    font-weight: bold;

    margin: 150px 0px 0px 0px;

    height: 200px;

    width: 200px;

}

.caption:hover {

    transition: margin .5s;

    margin: 0px 0px 20px 0px;

    background-color: rgba(50,50,50,0.4);

    cursor: pointer;

}

#description{

    overflow: hidden;

    margin: 25px 0px 0px 0px;

}

I’ve used CSS3 transitions for the smooth animation, and it works beautifully on most modern browsers.

Next, I wanted to make this a reusable control and not leave it as just a bunch of HTML tags that has to be repeated all over.

Creating an ASP.NET MVC HtmlHelper

Less talk, more code :D

public static class MyHelpers

    {

        public static MvcHtmlString TileButton(string backgroundUrl, string jsAction, 

            string caption, string description = "")

        {

            var outerDiv = new TagBuilder("div");

            var captionDiv = new TagBuilder("div");

            var captionP = new TagBuilder("p");

            var descP = new TagBuilder("p");

            outerDiv.AddCssClass("tile");

            //style="background:url('AmarProfilePicSmall.jpg'); 

            //       background-size:200px 200px"

            outerDiv.MergeAttribute("style", 

                "background:url(" + backgroundUrl + "); background-size:200px 200px");

            captionDiv.AddCssClass("caption");

            descP.AddCssClass("description");

            captionDiv.MergeAttribute("onclick", jsAction);

            captionP.SetInnerText(caption);

            descP.SetInnerText(description);

            captionDiv.InnerHtml = captionP.ToString() + descP.ToString();

            outerDiv.InnerHtml = captionDiv.ToString();

            return new MvcHtmlString(outerDiv.ToString());

        }

    }

The code is pretty simple, so at an overview level, ’m using TagBuilder to create the components that I used in HTML for the tile. I’m going to reuse the same CSS I used earlier, and have copied it to the site.css file in the Content folder in a new ASP.NET MVC project.

And although I could’ve created this as an extension method to the HtmlHelper class, I created this as a static method to start with, so I can use it like this in my views:

@TileButtonSample.Helpers.MyHelpers.TileButton("../Images/AmarProfilePicSmall.jpg",

"alert('Hi');", "Caption", "Some lengthy description")

And, that’s about it! A short post this time – and hopefully simple enough.

If you think this can be improved, please mention what approach you would take to implement this.

Thanks for reading!

Amar

PS: You can follow me on twitter at “_amarnit”, where I share some quick tips/learning at times!

• Shortcuts can be created on the Windows 8 Start screen by creating a folder in “C:\ProgramData\Microsoft\Windows\Start Menu\Programs”
• Multiple shortcuts to the same exe or app with the same AppId results in only one shortcut on the Start screen, based on its name in alphanumeric ascending order.
• Windows remembers the pinned/unpinned status (including the tile group it was pinned in) of the shortcut on the Start screen based on the exe/app it points to.
• When we uninstall and reinstall the app, if there is a shortcut created to an app in the same location as the earlier install, the pinned/unpinned status is maintained too.

Here is a more detailed version:

Shortcuts can be created on the Windows 8 Start Screen by creating a folder in “C:\ProgramData\Microsoft\Windows\Start Menu\Programs”

To understand how Windows keeps track of the shortcuts, I copied an exe to two folders, created shortcuts for each of them and copied them to the folder in Start Menu\Programs.

As expected, both the shortcuts show up in the start screen. I also went ahead and pinned them in a tile group.

Then I unpinned a shortcut from the Start screen. Since this was only unpinned, and not deleted/uninstalled, it continues to show up in “Apps”

Then I went ahead and deleted the shortcut from the folder in Start Menu\Programs.

As expected the shortcut doesn’t appear in the “App” anymore

Next I created a shortcut to the app (which I had copied to a folder my Program Files), named it “ThemesDemo - Shortcut1” this time.

It didn’t show up on the Start screen, but was available under “Apps”

Next, I created a copy of the shortcut and named it “ThemesDemo – Shortcut2” to see if it shows up pinned in the Start but it didn’t.

Furthermore, “ThemesDemo – Shortcut2” didn’t show up under “Apps” either. As it turns out, if you have two shortcuts pointing to an app with the same AppId or the same exe, only one shortcut will show up in the Start screen, and this is chosen based on the alphanumeric ascending order of the name of the shortcuts. To check this, I renamed “ThemesDemo – Shortcut2” to “AAA”

And this shows up in “Apps”.

Then I went ahead and deleted the exe in the Program Files and the shortcut in the “Start Menu\Programs” folder too, and copied the exe and created a shortcut again (to simulate reinstalling an app).

Again, the shortcut didn’t show up on the start screen, but shows up in “Apps”

I went ahead and pinned this to the Start screen again.

And I tried uninstalling (deleting shortcut and exe)

As expected it doesn’t show up pinned in the Start screen or in “Apps”

Then I copied the exe and shortcut back (reinstall) and it shows up in the same tile group I had pinned it in before uninstalling the app.

Hope this gives a better understanding of how shortcuts are created and tracked in the Windows 8 Start screen.

Note: I learned these by hit and miss, and so may not be an accurate description of how things work internally.

Thanks for reading!

Amar

PS: You can follow me on twitter at “_amarnit”, where I share some quick tips/learning at times!

To understand why this is important, let me ask you – have you ever faced this scenario?

You want to create an app with a custom theme – have a nice light gray background (inspired by VS2012, perhaps?) and green buttons (assume, for some reason, your users like this!), and so you set the background of the button to green and you get something like this:

So far, so good. This is what your users asked for.

But…

This happens when they do a pointer-over on the button!

They asked for GREEN buttons, and this is certainly not one! They want a lighter shade of green when there is a pointer-over. (Or cornflower blue, perhaps? Fight Club?)

This is probably an overly simplified scenario, but is a good place to start. So let’s see how Visual States can help, and why it’s a good idea to create a style for this instead of just setting the background to some color and call it a day.

Blend is good at handling Visual States!

Open the project in Blend for Visual Studio 2012, and right-click on the button, go to edit templates, and select “Edit a copy”.

Go ahead and give it a name that makes sense, and you can choose where you want this Style to be created – i.e., at an application level, at a page level, or as a resource dictionary. I’ll select Application for now – so that we can use it in different pages in the app.

Once this is done, you should see something like this:

1. You see that you are now working in App.xaml, and

2. You see that you are editing the template of the button.

Now, head over to the “States” panel in Blend, and you should see something like this:

Notice that we have all the states that a button can be in – normal, pressed, disabled, pointer over.

Notice that the button also has 2 state groups. A state group is a group of mutually exclusive states that a control can be in at a given time. In other words, a button can be in a “Normal” state OR a “Pressed” (or other) state at a given time, but NOT both. However, the control can be in “Focused” state AND “PointerOver” at the same time, because they are in different state groups.

Great – it should be fairly obvious what we should do next, but a quick note on the color in the normal state. Notice that you had set the background of the button to green? That shows in the “border background” when you click on the “Normal” state.

Notice the yellow button next to the Background? Whenever you see that little button next to a property turned yellow, it means it’s bound to something. It could either be a data binding or a template binding. In this case, as we’re editing a template, the border’s background has template binding to the “Background” property of the button. So when you set the background of the button, it also sets the background of the border, which is part of what the button is made up of. (You can also see that the border’s “Border Thickness” is also template bound to the border thickness of the button.)

Since we’re creating a “GreenButtonStyle”, let’s not have this template binding on the border’s background!

Click on the tiny yellow button and click on reset to remove the template binding. That should throw a nice, scary message like this!

Oh no oh no oh no!!

Nah, don’t worry about it – we’ll deal with these animations soon enough.

Let’s go ahead and select that nice green color we chose earlier.

Notice that this time around, the tiny button is not yellow! (It used to be called Advanced Options, but calling it tiny button is more fun!) When it’s not yellow, it’s a local value and does not depend on a binding.

Now, select the “PointerOver” state and change the border background to a lighter shade.

And that’s pretty much it. Let’s run this app:

That’s a lot closer to what the customer wants!

Hey, what about all those “animations” Blend warned me about?

If you switch over to the “Code” view in Blend, you’ll see that all the states which has some property change is actually part of a Storyboard and is of type ObjectAnimationUsingKeyFrames. This is what Blend was warning us about when we reset the value of the border’s background.

I guess now it makes a lot more sense when you look back at what we did to handle the different views and orientation. All we did was manipulate Visual States that correspond to the actual state of the page!

Go ahead and try handling the different Visual States of the different controls that you use and would like to have a custom theme applied to them!

As you can see, Visual States give a much better control over the controls we want to customize! :)

Thanks for reading and happy coding!

Amar

PS: You can follow me on twitter at “_amarnit”, where I share some quick tips/learning at times!

I played around a bit with the Knockout tutorials which gave a fair idea of how to go about using it.

However, it was difficult to find a “hello world” sample for using Knockout with ASP.NET MVC 4 which was simple enough to follow.

Here is my shot at it!

I’m using ASP.NET Web API along with MVC 4 and Knockout to write a simple program that reads some data from the server and posts new data back to the server which will be persisted on a database.

If you haven’t installed ASP.NET MVC 4, you can do so from here. You can install ASP.NET MVC 4 with VS 2010 too, so really – give it a try!

Once you have ASP.NET MVC 4 installed, create a new project and select “Internet application”. One of the things you’ll notice is it adds a number of NuGet packages by default. One of them is KnockoutJS.

If you’d rather start with an “Empty application”, you can add this package using the “Manage NuGet Packages” option when you right-click on the references.

Now that we have Knockout, let’s start!

Here’s what we’ll do:

• Create a simple database with just 1 table.
• Create an EF model for this database.
• Create a Web API controller to expose HTTP services which serves/accepts data.
• Consume these HTTP services from the MVC views (Razor pages, although it could just be HTML pages too)
• Create a partial control for displaying data we get from the service
• Create a partial control for creating a new item and posting it to the service.

We’ll create the 2 partial views, but host it in a single razor page that will be served as a result of an action. This is to demonstrate how we can set the “data context” of individual HTML nodes with Knockout, so that’ll be fun!

Create a simple database

I don’t need to say much about this I guess.

Create an EF model

Once we have the EF model created, let’s add a couple of static methods to make it easier to talk to the model:

namespace KnockOutDemo.Models

{

    public class CustomerRepository

    {

        public static IEnumerable<Customer> GetCustomers()

        {

            var myDB = new CustomerDBEntities();

            var query = from cust in myDB.Customers

                        select cust;

            return query.ToList();

        }

        public static void InsertCustomer(Customer cust)

        {

            var myDB = new CustomerDBEntities();

            myDB.Customers.Add(cust);

            myDB.SaveChanges();

        }

    }

}

Create a Web API controller to expose HTTP services which serves/accepts data

Let’s add the following code to get started with Get and Post methods:

public class CustomerController : ApiController

{

        // GET api/customer

        public IEnumerable<Customer> Get()

        {

            var cust = CustomerRepository.GetCustomers();

            return cust.ToList();

        }

        // GET api/customer/5

        public Customer Get(int id)

        {

            return CustomerRepository.GetCustomers().Where((c) => c.Id == id).FirstOrDefault();

        }

        // POST api/customer

        public HttpResponseMessage Post(Customer value)

        {

            CustomerRepository.InsertCustomer(value);

            var response = Request.CreateResponse<Customer>(HttpStatusCode.Created, value);

            string uri = Url.Link("DefaultApi", new { id = value.Id });

            response.Headers.Location = new Uri(uri);

            return response;

        }

}

Consume these HTTP services from the MVC views

Let’s add a View page to the Home folder called Customers, which basically acts as a shell. We’ll have a couple of place holders in this view which will host a partial view for displaying a list of customers and another partial view for letting the user create a new customer.

Also create an appropriate action method in the HomeController.cs file:

public ActionResult Customers()

{

      return View();

}

Now, let’s add the 2 partial views – CustomerList and CreateCustomer. I have created these in the Shared folder, but could’ve done so in the Home folder as well.

These would basically be blank cshtml pages.

Add this markup to the CustomerList.cshtml page:

 1: <table >

 2:     <thead>

 3:         <tr>

 4:             <th>Id</th>

 5:             <th>Name</th>

 6:             <th>Age</th>

 7:             <th>Comments</th>

 8:         </tr>

 9:     </thead>

 10:     <tbody data-bind="foreach: customers" >

 11:         <tr>

 12:             <td data-bind="text: Id"></td>

 13:             <td data-bind="text: Name"></td>

 14:             <td data-bind="text: Age"></td>

 15:             <td data-bind="text: Comments"></td>

 16:         </tr>

 17:     </tbody>

 18: </table>

 19: <br />

 20: <input type="button" id="btnGetCustomers" value="Get Customers" data-bind="click: getCustomers" />

Notice the markup on line 10, line 20 and lines 12 through 15. We are using a new attribute: data-bind.

In the line 10, we’re mentioning a foreach on the “customers” collection (that we just assume will be present at runtime), and for each of those customers, we generate a row in the table.

Lines 12-15 bind the properties of each customer to the text attribute of the td.

Similarly, we’re binding the “click” event of input to call the getCustomers method (again we assume this will be present at runtime). You can set multiple bindings too within a data-bind expression, but we’ll not get into that right now.

I’d like to emphasize on the fact that the markup over here is just markup – no code.

Add this markup to the CreateCustomer.cshtml page:

 1: <table>

 2:     <tr>

 3:         <td>Name</td>

 4:         <td> <input type="text" data-bind="value: Name" /> </td>

 5:     </tr>

 6:     <tr>

 7:         <td>Age</td>

 8:         <td><input type="text" data-bind="value: Age" /> </td>

 9:     </tr>

 10:     <tr>

 11:         <td>Comments</td>

 12:         <td><input type="text" data-bind="value: Comments" /></td>

 13:     </tr>

 14: </table>

 15:  

 16: <input type="button"  value="Add" data-bind="click: addCustomer" />

We follow the same approach as earlier here.

At this point, we have the View ready and the HTTP service is up and running.

Let’s create the ViewModel and see how we can bring all of this together!

From the two partial views, it’s clear that we can use two ViewModels – one for creating a customer (and therefore, a customer object) and another one for listing all the customers (something that holds a collection of customers).

To get started, create a folder in the project, say MyJS, and add a new .js file:

Drag and drop the jquery script and knockoutjs scripts to this the CustomerViewModel.js file in the editor.

This only helps us with the intellisense, we’ll have to reference the jQuery and KnockoutJS files later in the view.

Next, add this code to the CustomerViewModel.js file:

 1: function customer(id, name, age, comments) {

 2:     var self = this;

 3:  

 4:     self.Id = id;

 5:     self.Name = name;

 6:     self.Age = age,

 7:     self.Comments = comments;

 8:  

 9:     self.addCustomer = function () {

 10:         $.ajax({

 11:             url: "/api/customer/",

 12:             type: 'post',

 13:             data: ko.toJSON(this),

 14:             contentType: 'application/json',

 15:             success: function (result) {

 16:             }

 17:         });

 18:     }

 19: }

Although we’re creating a function here, you can think of this as something similar to creating a ViewModel class with XAML.

With the customer object, we have the 4 properties that we have bound to from our UI. Since we’re going to use this as the ViewModel for the CreateCustomer partial view, we are also going to create a function called addCustomer which does a POST to the HTTP service we created earlier. The data that we’re posting is conveniently obtained by using the ko.toJSON() method.

Similarly, create the ViewModel that we can use to contain the list of all customers. For a lack of better name, I just called it customerVM!

Add the following code to the CustomerViewModel.js file:

 1: function customerVM() {

 2:     var self = this;

 3:     self.customers = ko.observableArray([]);

 4:     self.getCustomers = function () {

 5:         self.customers.removeAll();

 6:         $.getJSON("/api/customer/", function (data) {

 7:             $.each(data, function (key, val) {

 8:                 self.customers.push(new customer(val.Id, val.Name, val.Age, val.Comments));

 9:             });

 10:         });

 11:     };

 12: }

On line 3, we are creating a list (array) of customers, but notice that this is not a simple array. It’s an observableArray from the Knockout library! Which means, any changes to this array will result in automatic notifications to any UI elements that are bound to it! (You can compare this with an ObservableCollection from the C# world)

The rest is fairly self explanatory – we’re doing a getJSON call to the HTTP service and getting the list of all customers and populating the customers observableArray. This is collection that we bound to in the CustomerList.cshtml’s tbody tag: <tbody data-bind="foreach: customers">

The only thing pending now is to somehow connect these ViewModels with the Views. Kinda like setting the DataContext of the UI elements if you are from the XAML world.

We can do this using the ko.applyBindings() method. We can either just specify the ViewModel for the entire view or set the ViewModel to a specific node in the DOM.

In our case, we’ll specify the ViewModels for each of the partial views, by specifying the Id’s of the div tags that we used in the Customers.cshtml file.

Add the following code to the CustomerViewModel.js file:

$(document).ready(function () {

    ko.applyBindings(new customerVM(), document.getElementById('displayNode'));

    ko.applyBindings(new customer(), document.getElementById('createNode'));

});

Now, we can just reference the js files (CustomerViewModel.js, jQuery and Knockout) in the Customers.cshtml file.

Alternatively, you can use the bundling feature that comes with ASP.NET MVC 4!

Go to the App_Start folder and open the BundleConfig.cs file.

Add the following code:

bundles.Add(new ScriptBundle("~/bundles/myBundle").Include(

                       "~/Scripts/jquery-{version}.js",

                       "~/Scripts/knockout-2.1.0.js",

                       "~/MyJS/CustomerViewModel.js"));

We can now refer to all the three js files with the handle: “~/bundles/myBundle”

Let’s head back to the Customers.cshtml file and delete the references to the three scripts we added earlier, and replace it with this line:

@Scripts.Render("~/bundles/myBundle")

And that’s about it! We should be good to go. Run the app and key in “home/customers” in the address bar.

Let’s add a few customers:

And get the list of customers:

Show me the codez!

You can download the complete sample from here.

Further reading

KnockoutJS home page

KnockoutJS documentation

KnockoutJS tutorials

ASP.NET Web API

Bundling and Minification

Thanks for reading!

Amar

PS: You can follow me on twitter at “_amarnit”, where I share some quick tips/learning at times!

He was pretty frustrated and I could imagine many others potentially facing this issue.

The solution is surprisingly simple, though!

Open your App.xaml file and set the application’s “RequestedTheme” property to Light.

And we’re done!

Undo all the hardcoded backgrounds and foregrounds on all the UI elements – leave them to the defaults and you’ll have a light background with dark UI elements!

The light theme is generally recommended for apps with a lot of text.

Thanks for reading!

Amar

PS: You can follow me on twitter at “_amarnit”, where I share some quick tips/learning at times!

Windows 8 is a re-imagined new OS, and so I thought let’s re-imagine the “Hello World” too. Consultant Jargon is my non-traditional version of “Hello World”.

Windows 8 store apps have a few things we need to keep in mind other than the new WinRT API set and the new language choices. These apps can run on a wide range of devices with different form factors and so, a considerable amount of thought must go into designing such apps.

Consultant Jargon focuses on getting these basics right – it scales well with any display resolution, handles different views (like snapped and portrait), follows (most of) the Modern UI principles including the tiles, splash screen etc., and implements the share charm.

Feature-wise, it generates random, geeky jargon like “Balanced Reciprocal Time-frame”, “Responsive Incremental Programming” which means nothing in reality, but sounds complex and deep! What’s more, you can share this jargon with apps like Mail, MetroTwit, FlipToast etc., to post it on Twitter/Facebook/LinkedIn to impress (or spook out) your friends :)

Let’s Start (pun intended)

Open VS 2012, and create a new Windows Store Blank App.

Next, delete the MainPage.xaml and add a new “Basic Page”, and name it MainPage.xaml. (Why?)

It’s not a big deal if you name it something else, or leave it as the default “BasicPage1.xaml”. We just need to ensure that we update some code that runs when your app is launched which points to the first screen that the app should show.

So, if you choose not to name the new page as “MainPage.xaml”, just go to the App.xaml.cs file and navigate to the OnLaunched method. The Solution Explorer in the new VS 2012 helps you get there easily!

Scroll down a bit and you should see this block of code, just before the OnLaunched method ends:

Notice the underlined part. This statement effectively means – try navigating to “MainPage” – and if the navigate method returns a “false”, throw an exception.

You can replace the “MainPage” with the name of the Basic Page that you just created.

Cool! Now we have a base to start with that handles different orientations and views well.

To-Dos

Here’s what we’ll do in our app now:

• Have a logo and title, and make sure that both are visible in the Full screen and Filled view, and only the logo is visible in the Snapped view.
• Create a Splash Screen, which looks similar to the ones that comes with apps like the Messaging or Email app.
• Create a tile which looks decent, both small and wide tile, and see how we can disable the text being shown on the tile.
• Implement the “share” charm so that we can spread more non-sense around :D

Logo and title

We have a few options to pick from to create our logo. You can find a good icon/logo on the web (just make sure it’s under an open license like Creative Commons).

Or, you can use one of the free tools to create a unique logo for yourself.

I used Paint.NET and PowerPoint (for shapes) to create the Consultant Jargon Logo:

Another great alternative is GIMP.

The main reason to go for these tools instead of, say MS Paint, is that we can create layers which helps in editing the images and save images with transparent backgrounds. And transparent backgrounds can be helpful, as we’ll see shortly.

Once I have the logo ready, I can use it to brand my app in the different views, and I can also scale it to different resolutions and use if for the tiles.

To use this logo in the main screen (and the only screen) in our app, we replace the “back button” with the logo.

Let’s see if this shows up when we run the app. Sure enough, it does.

Now, let’s see how it handles the snapped view! (If you’re a keyboard person, Windows key + . )

Right! Back Button. References. Tool generated code.

The reason why this exception shows up is that we sure replaced the “back button”, but didn’t handle other parts of the “Basic Page” that we added that references this back button. The “other parts” are the different visual states. So, scroll down in your main page to a section that starts with “<VisualStateManager.VisualStateGroups>”

Comment out (or delete) the sections that manipulated any properties on the back button.

There, that’s much better.

Next, let’s play around a bit with layouts so that when in full screen/fill view, it shows the logo and title, and only the logo when in snapped view.

To do this, the approach I take is to have a two grids – one for the snapped view and one for the other views.

To manage transitions between the two grids, we’ll use the Visual States that the Basic Page provides.

To do this easily, we can use the “Device” window. Press Ctrl+Q which will take you to the Quick Launch text box (on the top right of the VS window). Type in “Device” and you should be able to open the device window.

Select the snapped view (the third button) from the “View” option and make sure that the Visual state is set to “Snapped”. Click on the Enable state recording option, select (click on) the grid named “SnapTitle” and set the visibility property to Visible.

Similarly, select the grid named “FullTitle” and set the visibility to Collapse (while making sure the Snapped state recording is on).

And that’s it – the logo and the title are taken care of in all the different views :)

Splash screen

Splash screen is the first impression that you get to make on the user. And we all know first impression matters :)

That’s a good enough reason to invest in a good splash screen.

The image that we are allowed to use for a splash screen should be of 620 X 300 resolutions. But hey, what if my screen resolution is larger than that? Of course it’s going to be larger than that! :)

So how do I get this:

It’s actually a combination of the splash screen image itself, along with a background color.

So, avoid having gradients or high-res images that may abruptly cut off at 620 X 300 so that it can blend really well with the background color – and we should be good!

Invest in a good tile

You would have heard about Live Tiles enough by now :)

It’s one of the most visible things that differentiates the UI on Windows 8 and Windows Phone from the rest.

But does every app need a Live Tile? Not necessarily. If you don’t have dynamic content to update your tile with, it’s OK not to have a Live Tile. But even if it’s a static tile, it’s always a good idea to have one that catches the eye. It’s good to have the brand associated with the tile.

With Windows 8, we have two options for tiles to be displayed on the start screen – a small tile and a large tile. The small tile is 150 X 150 pixels and the large tile is 310 X 150 pixels. The large tile is optional. There is another tile that is required which is the small logo – a 30 X 30 pixel image. This is what is displayed when you search for your app from the search charm.

Apart from these, there is another resolution image that we need to keep in mind for the Windows Store itself – and that’s a 50 X 50 pixel image.

I’ve seen a lot of people miss out the 30 pixel and 50 pixel logos and it would show up as the default logo (I like to call it the “Don’t do it” logo coz of the X in the image :) )

Don’t do it!

The Share Charm

One of the really great things I liked about Windows 8 is how it lets our apps integrate to the core Windows experience. The Share Charm is one such way to provide the user a familiar experience for sharing content from your app with other apps (which most often boils down to sharing with people).

And, one of the most frequently asked question about this feature is “how’s it different from copy-paste?”

Well, you can present the data to be shared in a particular format.

In Consultant Jargon, I’m keeping it simple and adding a couple of words to the actual jargon as shown below.

The Wikipedia app on the other hand, makes use of it in a beautiful way!

In the above cases, Consultant Jargon and Wikipedia apps act as the Share Source, and the MetroTwit and Mail apps act as the Share Target.

Implementing the Share Target is a bit more involved, so I left it out of my little Hello World app :) Moreover it didn’t make much sense for this app to act as the target anyway!

Being a share source is extremely easy though, at least with simple formats like text and URLs. Use the DataTransferManager!

That’s it and we’re good to spread non-sense around :)

So, there we have it. A non-traditional Hello World to start off with developing apps for a re-imagined, new Windows 8.

Thanks for reading and happy coding!

Amar

PS: You can follow me on twitter at “_amarnit”, where I share some quick tips/learning at times!

PPS: If you liked the <Windows key + .> shortcut for snapped view, you should check out my friend, Yash’s blog, for an exhaustive list of Windows 8 Keyboard shortcuts.]]>