Samples to my Microsoft Design Language talk at NDC London

.NET, Design, NDC, Technical stuff, UX, Windows 8, Windows Phone, Work
2 Comments

At NDCLondon, I had the pleasure to present my talk “Putting the Microsoft Design Language to work”. Because of time constraints (60 minutes is fairly short ;) I couldn’t show the actual code that I show in the long version of this talk. I did however promise to publish them and here they are now for your pleasure, hoping they will be helpful.


AllAppBarButtons app

This small applications shows all the possible icons used in AppBar buttons in Windows 8.1. Of course it is also possible to use your own icons, but there is a nice feature in Windows 8.1 allowing to use glyphs and the Segoe UI Symbol font. When used in an AppBarButton control, the glyph is rendered as a Microsoft Design-style icon. For example here is the XAML code for an AppBarButton:

<AppBarButton HorizontalAlignment="Center"
              Label="Home">
    <AppBarButton.Icon>
        <FontIcon FontFamily="Segoe UI Symbol"
                  Glyph="&#xE10F;" />
    </AppBarButton.Icon>
</AppBarButton>

This code will be rendered in the AppBar as follows:

12-8-2013 6-24-40 PM

Of course it is quite hard to get an overview of all the available glyphs. The AllAppBarButtons app helps. Run the code and you will see a list of all the buttons, with glyph and label. Selecting any of these buttons will copy the corresponding XAML code to the Clipboard, so you can just paste it into your own application’s AppBar.

Adapting the layout to orientation and split (snap) mode

The GridDemo sample shows how to adapt the screen to the split (or snapped) mode of Windows 8.1. A few things to observe in this demo:

  • In MainPage.xaml.cs, the SizeChanged event is handled. We “go to state” depending on the size. Because in Windows 8.1 the snapped mode can be resized by the user, we need to specify the minimum size of the application’s window before we move to snapped. When the threshold is reached, we use the VisualStateManager to go to a state named Snapped, resp Lanscape.
  • In MainPage.xaml, the corresponding states are handled. There is is possible to handle any layout operation: hiding/showing an element, repositioning others, changing margins or padding, etc. In the application, we are using a ListView in snapped mode, and a GridView in landscape mode.
  • In the Package.appxmanifest, the minimum width for the app is set to 320px. Note that the default for this value is 500px.

12-8-2013 6-36-51 PM

When the sample is run, you can put the app in snapped mode by grabbing the top of the app and moving it to the side (according to the standard Windows 8.1 gesture). Then the slider can be moved to resize the app. When the limit of 500px is reached, the UI changes to show the ListView.

Of course the Lanscape and Snapped states can be reworked with Blend, and improved. For example the page’s title should be smalled in snapped mode than in lanscape mode, etc.

12-8-2013 6-41-35 PM
Landscape view (GridView)

12-8-2013 6-42-25 PM
Snapped view (ListView)

It’s nice to share

In my presentation, I had a section about the collaboration between apps, which can be realized using the Share contract. The ShareContractDemo sample shows how to implement such a contract (Share Target). A few points:

  • In the Package.appxmanifest, under Declarations, note that presence of the Share Target declaration. This is what tells the OS that this application is able to receive content when the Share charm is actuated.
  • The Share Target declaration declares two data formats: Text and Uri.
  • The implementation of the Share Target contract is in App.xaml.cs. Scroll down to the method OnShareTargetActivated (this is an override).
  • This method calls the InitializeApp method. This is a modification of the original method that gets called every time that any Windows 8 app starts. If the app starts normally (from the Start menu for instance), the navigation goes to MainPage. If however the app starts from the Share charm, it will be displayed in a flyout, and navigates to the SharePage.
  • The SharePage’s OnNavigated method retrieves the ShareOperation that contains the information needed to handle the sharing. The StandardDataFormats enumeration allows to see if the content is a URI or a Text.
  • The operation of retrieving the shared information is executed in a Task (asynchronously) to avoid blocking the UI.

You can debug the app by setting a breakpoint in the OnNavigatedTo method in SharePage.xaml.cs. Then, open the project properties and go to the Debug section. Here, set the “Do not launch, but debug my code when it starts” option.

12-8-2013 8-46-57 PM

Then press F5. Your app does not start, but waits for the Share charm to trigger it.

To do this, open Internet Explorer (the Windows Store version!) and navigate to any page. Then open the Charms bar, press Share and notice that the ShareContractDemo app is available in the list.

12-8-2013 8-49-31 PM

Selecting the ShareContractDemo opens the app in a flyout on the right side of the screen. However before this happens, the breakpoint will get hit and you can debug the code.

In conclusion

I hope that these samples will be useful. It was a real pleasure to speak at NDC London!

Cheers
Laurent

GalaSoft Laurent Bugnion
Laurent Bugnion (GalaSoft)

Share on Facebook

2 Responses to “Samples to my Microsoft Design Language talk at NDC London”

  1. Thomas Levesque Says:

    Actually, if you want to use Segoe UI Symbol glyphs for your buttons, it’s easier to use the SymbolIcon class, because you get Intellisense with the names of the symbols. Also, the designer can show the symbols, so it’s easier to pick the one you need. I only use FontIcon if I want to use a glyph from another font.

  2. lbugnion Says:

    Nice touch! thanks for the comment

Leave a Reply