Windows 8 Apps: The 8 Must-Know Tricks! Day 5

Submit Article

(4 votes)

Samidip Basu

Joined Aug 22, 2011

Articles: 16

Comments: 24

0 comments / posted on Oct 07, 2012

Tags: windows-8 , samidip-basu

Categories: Windows 8

After a little gap because of a family relocation, we’re back on schedule :). This is Day # 5 in the Windows 8 development article series on common tips & tricks towards real-world Windows 8 Store apps. Now that our Windows 8 app is well underway, time to make sure we are integrating our app with the rest of the Windows 8 OS through the use of right Contracts.

Don't miss...

All SilverlightShow Ebooks

Over the next several weeks, you’ll see 8 articles talk about some must-do things for Windows 8 app developers. Simple & to the point, with some code examples on XAML/C# stack. Here’s the indexed list for the series:

Day 1: Know the ecosystem; Start
Day 2: Layout, Navigation & Visual States
Day 3: Semantic Zoom
Day 4: Controls & Styling
Day 5: Search, Share & Settings Contracts
Day 6: Data Persistence & Application Life-Cycle Management
Day 7: Use of OData or Web Services
Day 8: Live Services integration

Day 5: Search, Share & Settings Contracts

Win as One – one of the cornerstones of the Modern UI design principles and a very important one to keep in mind as we design our Windows 8 Store apps. Windows 8 as an OS introduces the consumer to a whole new paradigm in UX, where content & users are front & center. This is carried forward by Windows Phone & Xbox ecosystems as well. It is thus important that our Windows 8 apps follow the same principles, lest the application experience feels jarring to the end user. And it is this integration of our app with the rest of the OS that is best achieved through the use of Windows 8 application Contracts & Extensions. In this article, we take a holistic view of Contracts and then break down how to implement three of the most common ones – Search, Share & Settings. So, let’s explore our options on the XAML stack.

A Contract is like an agreement of requirements between one or more apps and Windows, which aids in the participation in some special Windows 8 interaction. Windows 8 Store applications run in their own sandboxed environment, thus affording top-notch protection for the end user against faulty/malware applications having a bigger impact on their systems. The one downside to that can be viewed as lack of communication between different apps. This is where Contracts & Extensions come into play, standardizing the modes of communication between disparate apps and the OS. If one application already has some data or knows how to do something well, why recreate? Let’s dig in …

Search:

Data – it is the main content in almost every app, either user owned or pulled down from some source. Why not let the user search for their data in your app – while in the app and also while not running your app? This is what the Search Contract provides – easy touch-friendly search through the global Charms menu. Muscle memory or keyboard shortcuts – Windows 8 users will be very accustomed to using the Charms bar for common actions, and this is where Search fits. While we can search for Files or Settings, let’s focus on in-app search that is provided by the Search contract implementation. Remember our demo Windows 8 app showing categorized SilverlightShow articles? Here’s the global search on our demo SilverlightShow application:

As you can see, performing a Search through the ubiquitous Charms bar allows for filtering of data within each application. This can be triggered while the app is running; but also when it is not. If our app participates in the Search contract, users may invoke Search while anywhere else; Search parameters are passed down by the OS as our app activates to show the user the same filtered view that one would expect.

Implementing the Search contract comes down to a few steps:

Add the Search Contract through template.
This will add a named file for the Search results in your app.
It also adds a Search Activation event handler on your App.xaml.cs for your app to take action if it is activated by user performing a Search on the app through the Charms.
In addition to the activation point, a Declaration is added to the application manifest file letting the OS know that your app can participate in the Search contract.
The kind of Search filters you support in addition to the text that might come down from the global Search is completely up to your application’s needs & data availability.
So, is the flexibility in deciding how to show Search results.
In addition to the Search results in the app, one may also provide Search Suggestions, which are automatically touch-friendly and displayed upon exact matches in the Charms menu itself.
The quickstart guide to adding Search can be found @ http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh868180.aspx.

Here’s some code: notice the Search activation event handler carrying the search argument into the specialized results page:

/// <summary>

/// Invoked when the application is activated to display search results.

/// </summary>

/// <param name="args">Details about the activation request.</param>

protected async override void OnSearchActivated(Windows.ApplicationModel.Activation.SearchActivatedEventArgs args)

{

    // If the Window isn't already using Frame navigation, insert our own Frame.

    var previousContent = Window.Current.Content;

    var frame = previousContent as Frame;

   

    if (frame == null)

    {

        // Create a Frame to act as the navigation context and associate it with a SuspensionManager key.

        frame = new Frame();

        SilverLightShowDemo.Common.SuspensionManager.RegisterFrame(frame, "AppFrame");

  

        if (args.PreviousExecutionState == ApplicationExecutionState.Terminated)

        {

            // Restore the saved session state only when appropriate.

            try

            {

                await SilverLightShowDemo.Common.SuspensionManager.RestoreAsync();

            }

            catch (Exception)

            {

                //Something went wrong restoring state.

                //Assume there is no state and continue

            }

        }

    }

  

    frame.Navigate(typeof(SLShowArticleSearch), args.QueryText);

    Window.Current.Content = frame;

  

    // Ensure the current window is active

    Window.Current.Activate();

}

The Search results page needs to handle back-navigation and know how to save/restore state through the application lifecycle. Supporting filters might often come down to doing LINQ on an existing collection to narrow down results, as shown in the example below – notice how we respond to the Article Name filter change to trim results:

private void articleNameTextBox_TextChanged(object sender, TextChangedEventArgs e)

{

    this.FilterOnArticleName();

}

  

private void FilterOnArticleName()

{

    if (this.articleNameTextBox.Text.Trim() != string.Empty)

    {

        // Apply the filter.

        FilteredArticleList = ((App)Application.Current).ArticleCollection.ToList<SLShowArticle>().FindAll(matchingArticle => matchingArticle.ArticleName.ToUpper().Contains(this.articleNameTextBox.Text.Trim().ToUpper()));

  

        if (FilteredArticleList.Count > 0)

        {

            // Put Filtered Articles into Grouped buckets.

            var query = from individualArticle in FilteredArticleList

                        orderby individualArticle.ArticleTopic

                        group individualArticle by individualArticle.ArticleTopic into g

                        select new SLShowGroupedArticles

                        {

                            SLShowArticleGroupName = g.Key,

                            SLShowArticleGroupCount = g.Count(),

                            ArticleCollection = new ObservableCollection<SLShowArticle>(g.ToList())

                        };

  

            FilteredGroupedArticleList = new ObservableCollection<SLShowGroupedArticles>(query.ToList());

  

            // Set the Data-Binding context to the filtered collection of Articles.

            this.DefaultViewModel["GroupedArticles"] = FilteredGroupedArticleList;

  

            VisualStateManager.GoToState(this, "ResultsFound", true);

        }

        else

        {

            // Empty out binding.

            this.DefaultViewModel["GroupedArticles"] = new ObservableCollection<SLShowGroupedArticles>();

  

            // Display informational text when there are no search results.

            VisualStateManager.GoToState(this, "NoResultsFound", true);

        }

    }

    else

    {

        // Erase filter.

        FilteredArticleList = ((App)Application.Current).ArticleCollection.ToList<SLShowArticle>();

  

        if (FilteredArticleList.Count > 0)

        {

            // Put Filtered Articles into Grouped buckets.

            var query = from individualArticle in FilteredArticleList

                        orderby individualArticle.ArticleTopic

                        group individualArticle by individualArticle.ArticleTopic into g

                        select new SLShowGroupedArticles

                        {

                            SLShowArticleGroupName = g.Key,

                            SLShowArticleGroupCount = g.Count(),

                            ArticleCollection = new ObservableCollection<SLShowArticle>(g.ToList())

                        };

  

            FilteredGroupedArticleList = new ObservableCollection<SLShowGroupedArticles>(query.ToList());

  

            // Set the Data-Binding context to the filtered collection of Articles.

            this.DefaultViewModel["GroupedArticles"] = FilteredGroupedArticleList;

  

            VisualStateManager.GoToState(this, "ResultsFound", true);

        }

        else

        {

            // Empty out binding.

            this.DefaultViewModel["GroupedArticles"] = new ObservableCollection<SLShowGroupedArticles>();

  

            // Display informational text when there are no search results.

            VisualStateManager.GoToState(this, "NoResultsFound", true);

        }

    }

}

The XAML for the Search page is shown below – notice how Visual States can be used to display results or when nothing matches the filters, in addition to supporting Snapped state:

<common:LayoutAwarePage

x:Name="pageRoot"

x:Class="SilverLightShowDemo.SLShowArticleSearch"

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

IsTabStop="false"

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

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

xmlns:local="using:SilverLightShowDemo"

xmlns:common="using:SilverLightShowDemo.Common"

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

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

mc:Ignorable="d"

d:ExtensionType="Search">

  

<Page.Resources>

  

    <!-- Collection of grouped Articles displayed by this page -->

    <CollectionViewSource

        x:Name="groupedItemsViewSource"

        Source="{Binding GroupedArticles}"

        IsSourceGrouped="true"

        ItemsPath="ArticleCollection"/>

  

</Page.Resources>

  

<Grid Style="{StaticResource SLShowDemoGridLayoutRootStyle}">

    <Grid.RowDefinitions>

        <RowDefinition Height="140"/>

        <RowDefinition Height="*"/>

        <RowDefinition Height="100"/>

    </Grid.RowDefinitions>

  

    <!-- Logo Area -->

    <Grid Grid.Row="0">

        <StackPanel Orientation="Horizontal">

            <Button x:Name="backButton" Margin="40, 0, 25, 0" Click="backButton_Click">

                <Button.Template>

                    <ControlTemplate>

                        <StackPanel Orientation="Vertical">

                            <Image x:Name="backIcon" Source="/Assets/BackArrow.png" Height="50" Width="50" />

                        </StackPanel>

                    </ControlTemplate>

                </Button.Template>

            </Button>

            <Image x:Name="Logo" Source="/SilverlightShowLogo.png" Width="195" Height="90" Margin="30, 30, -80, 0" VerticalAlignment="Center"/>

            <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource SLShowPageHeaderTextStyle}" VerticalAlignment="Center" Margin="0"/>

        </StackPanel>

    </Grid>

  

    <Grid x:Name="mainSearchResultArea" Grid.Row="1">

  

        <Grid x:Name="searchResultsPanel">

            <Grid.RowDefinitions>

                <RowDefinition Height="Auto"/>

                <RowDefinition Height="*"/>

            </Grid.RowDefinitions>

  

            <StackPanel Orientation="Horizontal" Margin="180,20,25,50" x:Name="searchFilters">

                <TextBlock Text="Article Name:" Style="{StaticResource AppWideMediumTextStyle}"/>

                <TextBox x:Name="articleNameTextBox" Width="200" Margin="20,0,0,0" TextChanged="articleNameTextBox_TextChanged"/>

                <TextBlock Text="Publish Date:" Style="{StaticResource AppWideMediumTextStyle}" Margin="40,0,0,0"/>

                <ComboBox x:Name="publishDateDropdown" Margin="20,0,0,0" Width="150" SelectionChanged="publishDateDropdown_SelectionChanged" >

                    <ComboBoxItem Content="All" IsSelected="True"/>

                    <ComboBoxItem Content="Today"/>

                    <ComboBoxItem Content="Yesterday"/>

                    <ComboBoxItem Content="Day before Yesterday"/>

                </ComboBox>

            </StackPanel>

  

            <!-- Horizontal scrolling grid used in most view states -->

            <ScrollViewer

            x:Name="itemGridScrollViewer"

            AutomationProperties.AutomationId="ItemGridScrollViewer"

            AutomationProperties.Name="Search Results"

            Grid.Row="1"

            Margin="0,-3,0,0"

            Style="{StaticResource HorizontalScrollViewerStyle}">

  

                <GridView

                x:Name="itemGridView"

                AutomationProperties.AutomationId="ItemGridView"

                AutomationProperties.Name="Grouped Items"

                Margin="170,0,100,46"

                ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"

                ItemTemplate="{StaticResource SLShow250x100ArticleTemplate}">

  

                    <GridView.ItemsPanel>

                        <ItemsPanelTemplate>

                            <VirtualizingStackPanel Orientation="Horizontal"/>

                        </ItemsPanelTemplate>

                    </GridView.ItemsPanel>

                    <GridView.GroupStyle>

                        <GroupStyle>

                            <GroupStyle.HeaderTemplate>

                                <DataTemplate>

                                    <Grid Margin="1,0,0,6">

                                        <StackPanel Orientation="Horizontal">

                                            <Button AutomationProperties.Name="Group Title" Content="{Binding SLShowArticleGroupName}" Style="{StaticResource SLShowTextButtonStyle}"/>

                                            <TextBlock Text="-" Style="{StaticResource SubheaderTextStyle}" VerticalAlignment="Top" Margin="5,0,5,0"/>

                                            <TextBlock Text="{Binding SLShowArticleGroupCount}" Style="{StaticResource SubheaderTextStyle}" VerticalAlignment="Top"/>

                                        </StackPanel>

                                    </Grid>

                                </DataTemplate>

                            </GroupStyle.HeaderTemplate>

                            <GroupStyle.Panel>

                                <ItemsPanelTemplate>

                                    <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,100,0"/>

                                </ItemsPanelTemplate>

                            </GroupStyle.Panel>

                        </GroupStyle>

                    </GridView.GroupStyle>

                </GridView>

  

            </ScrollViewer>

  

            <!-- Vertical scrolling list only used when snapped -->

            <ScrollViewer

            x:Name="itemListScrollViewer"

            AutomationProperties.AutomationId="ItemListScrollViewer"

            Grid.Row="1"

            Visibility="Collapsed"

            Style="{StaticResource VerticalScrollViewerStyle}">

  

                <ListView

                x:Name="itemListView"

                AutomationProperties.AutomationId="ItemListView"

                AutomationProperties.Name="Grouped Items"

                Margin="10,-10,0,60"

                ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"

                ItemTemplate="{StaticResource SLShowSnappedArticleTemplate}">

  

                    <ListView.GroupStyle>

                        <GroupStyle>

                            <GroupStyle.HeaderTemplate>

                                <DataTemplate>

                                    <Grid Margin="7,7,0,0">

                                        <Button AutomationProperties.Name="Group Title" Content="{Binding SLShowArticleGroupName}" Style="{StaticResource SLShowTextButtonStyle}"/>

                                    </Grid>

                                </DataTemplate>

                            </GroupStyle.HeaderTemplate>

                        </GroupStyle>

                    </ListView.GroupStyle>

                </ListView>

            </ScrollViewer>

  

        </Grid>

  

    </Grid>

  

  

    <TextBlock

        x:Name="noResultsTextBlock"

        Grid.Row="1"

        Margin="220,100,0,0"

        Visibility="Collapsed"

        Style="{StaticResource SubheaderTextStyle}"

        Text="No results match your search." />

  

    <VisualStateManager.VisualStateGroups>

        <!-- Visual states reflect the page's view state -->

        <VisualStateGroup x:Name = "PageStates">

            <VisualState x:Name="FullScreenLandscape"/>

            <VisualState x:Name="Filled"/>

  

            <VisualState x:Name="Snapped">

                <Storyboard>

                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListScrollViewer" Storyboard.TargetProperty="Visibility">

                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

                    </ObjectAnimationUsingKeyFrames>

                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridScrollViewer" Storyboard.TargetProperty="Visibility">

                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                    </ObjectAnimationUsingKeyFrames>

                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="searchFilters" Storyboard.TargetProperty="Visibility">

                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                    </ObjectAnimationUsingKeyFrames>

                </Storyboard>

            </VisualState>

        </VisualStateGroup>

  

        <VisualStateGroup x:Name = "ResultStates">

            <VisualState x:Name="ResultsFound" />

            <!-- When there are no results, the results panel is replaced with an informational TextBlock -->

            <VisualState x:Name="NoResultsFound">

                <Storyboard>

                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridScrollViewer" Storyboard.TargetProperty="Visibility">

                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                    </ObjectAnimationUsingKeyFrames>

                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListScrollViewer" Storyboard.TargetProperty="Visibility">

                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                    </ObjectAnimationUsingKeyFrames>

                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="noResultsTextBlock" Storyboard.TargetProperty="Visibility">

                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

                    </ObjectAnimationUsingKeyFrames>

                </Storyboard>

            </VisualState>

        </VisualStateGroup>

  

    </VisualStateManager.VisualStateGroups>

</Grid>

  

mmon:LayoutAwarePage>

Users like sharing content and successful apps make it easy for users to share what they are doing with their friends, family or coworkers. This is achieved through the Share Contract in Windows 8. This has the obvious benefit of preventing re-invention of the wheels – if your app needs to allow the user to share content on social networks, you don’t need to write logic to do that; simply leverage what another app already knows how to do.

Share Contract has two types of apps participating – Source & Target. As the names suggests, the Source apps have some content which the user might like to share, and the Target apps allow that sharing. As the Source application gets ready to share, the OS throws up a list of Target applications that can handle the data being shared followed by the Target application being activated to deal with the data being passed to it for sharing, as illustrated below in sharing details about the selected SilverlightShow article:

At the core of this hand-shaking between between Source & Target applications for sharing is the DataPackage with its supported data formats. Essentially, the Source declares what type of content is being shared and only registered Targets who have declared that they can handle the given data type, get listed for invocation. The supported data formats are

Plain text
Uniform Resource Identifiers (URIs)
HTML
Formatted text
Bitmaps
Files
Custom-defined data

Here’s some code to add to make your app/ page in it a Share Source doling out Text content:

using Windows.ApplicationModel.DataTransfer;

  

protected override void OnNavigatedTo(NavigationEventArgs e)

{

    base.OnNavigatedTo(e);            

  

    // Sign up to Share.

    var dataTransferManager = DataTransferManager.GetForCurrentView();

    dataTransferManager.DataRequested += new TypedEventHandler<DataTransferManager, DataRequestedEventArgs>(dataTransferManager_DataRequested);

}

  

private void dataTransferManager_DataRequested(DataTransferManager sender, DataRequestedEventArgs args)

{

    if (this.itemGridView.SelectedItem != null)

    {

        SLShowArticle selectedArticle = (SLShowArticle)this.itemGridView.SelectedItem;

  

        // Set what to share.

        string textToShare = "Article Information: Name# " + selectedArticle.ArticleName + " | Author: " + selectedArticle.AuthorName + " @ " + selectedArticle.DisplayablePublishDate + ".";

        args.Request.Data.Properties.Title = "SilverlightShow Article Share:";

        args.Request.Data.SetText(textToShare);

    }

}

As you can see, we attached a event handler to listen in when the user wants to share a SilverlightShow article information through the Charms menu. When invoked, our code simply packaged up the DataPackage including the content to share; this gets passed up to the OS and made available to the Share Target applications. More details about Sharing & exchanging content between Windows 8 apps can be found @ http://msdn.microsoft.com/en-us/library/windows/apps/xaml/Hh871373(v=win.10).aspx.

Settings:

Most Windows 8 apps will have settings, and if they are all done in different ways, it leads to a learning curve for the user. In comes the Settings Contract, the implementation of which provides a consolidated place for fast, in-context access to settings that affect the current Windows Store app running. Muscle memory & ease of flyout animations should make editing Settings second nature to users. A light-dismiss surface (tapping anywhere outside) hides away the Settings, thus allowing the user to get back to the application experience quickly. The ApplicationSettings class provides a one-stop place to hold all our application settings, which may be data bound for easy edits & persistence.

There is one little problem in the C#/XAML stack – the Settings Flyout commonly seen in Windows 8 isn’t a native control, unlike the web stack. There are extensions/nugets like Callisto which help, explained as “A control suite for some common things a Windows 8 XAML application might want to include such as a Flyout, Menu, Rating, Settings Pane, and Pivot control”. However, if you really wanted to roll your own, it is not that difficult a task either. The trick is to define a UserControl to hold the app Settings and then house it in the XAML PopUp control, complete with animation & the light-dismiss. Here’s a sample Settings flyout for our demo SilverlightShow Articles application:

The name of the Settings & the complete look and feel of it is customizable to fit the brand of your app. Here’s the XAML for our UserControl to house Settings:

<UserControl

    x:Class="SilverLightShowDemo.SettingsFlyOut"

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

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

    xmlns:local="using:SilverLightShowDemo"

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

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

    mc:Ignorable="d"

    d:DesignHeight="300"

    d:DesignWidth="400">

  

    <Grid Style="{StaticResource SLShowDemoGridLayoutRootStyle}" Background="Orange">

        <Grid.RowDefinitions>

            <RowDefinition Height="140"/>

            <RowDefinition Height="*"/>           

        </Grid.RowDefinitions>

  

        <!-- Logo Area -->

        <Grid Grid.Row="0">

            <StackPanel Orientation="Horizontal">

                <Button x:Name="backButton" Margin="40, 0, 25, 0" Click="MySettingsBackClicked">

                    <Button.Template>

                        <ControlTemplate>

                            <StackPanel Orientation="Vertical">

                                <Image x:Name="backIcon" Source="/Assets/BackArrow.png" Height="50" Width="50" />

                            </StackPanel>

                        </ControlTemplate>

                    </Button.Template>

                </Button>

                <Image x:Name="Logo" Source="/SilverlightShowLogo.png" Width="195" Height="90" Margin="15, 15, -80, 0" VerticalAlignment="Center"/>                

            </StackPanel>

        </Grid>

  

        <!-- App Settings -->

        <Grid x:Name="settingsContent" Grid.Row="1" Margin="50">

            <StackPanel Margin="0, 40, 0, 0" Orientation="Vertical">

                <TextBlock FontWeight="Bold" Text="Put your App Settings here:" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left"/>

                <ToggleSwitch Margin="0,25, 0, 0" Header = "Download updates automatically" HorizontalAlignment="Left" HorizontalContentAlignment="Left"/>

                <ToggleSwitch Margin="0, 25, 0, 0" Header = "Push Notifications" HorizontalAlignment="Stretch"/>

            </StackPanel>

        </Grid>

        

    </Grid>

    

</UserControl>

The next trick is to wire it up as the user launches Settings from the Charms. Here’s some code:

using Windows.UI.ApplicationSettings;

using Windows.UI.Popups;

using Windows.UI.Xaml.Media.Animation;

  

region "Members"

  

private Popup settingsPopup;

  

// Used to determine the correct height to ensure our custom UI fills the screen.

private Rect windowBounds;

  

// Desired width for the settings UI. UI guidelines specify this should be 346 or 646 depending on your needs.

private double settingsWidth = 346;

  

#endregion

  

protected override void OnNavigatedTo(NavigationEventArgs e)

{

    base.OnNavigatedTo(e);            

  

    // Settings

    SettingsPane.GetForCurrentView().CommandsRequested += Settings_CommandsRequested;

}

  

private void Settings_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)

{

    UICommandInvokedHandler handler = new UICommandInvokedHandler(onSettingsCommand);

  

    SettingsCommand settingsCommand = new SettingsCommand("SLShowSettings", "SLShow Settings", handler);

    args.Request.ApplicationCommands.Add(settingsCommand);

}

  

void onSettingsCommand(IUICommand command)

{

    // Create a Popup window which will contain our flyout.

    settingsPopup = new Popup();

    settingsPopup.Closed += OnPopupClosed;

    Window.Current.Activated += OnWindowActivated;

    settingsPopup.IsLightDismissEnabled = true;

    settingsPopup.Width = settingsWidth;

    settingsPopup.Height = windowBounds.Height;

  

    // Add the proper animation for the panel.

    settingsPopup.ChildTransitions = new TransitionCollection();

    settingsPopup.ChildTransitions.Add(new PaneThemeTransition()

    {

        Edge = (SettingsPane.Edge == SettingsEdgeLocation.Right) ?

               EdgeTransitionLocation.Right :

               EdgeTransitionLocation.Left

    });

  

    // Create a SettingsFlyout the same dimenssions as the Popup.

    SettingsFlyOut mypane = new SettingsFlyOut();

    mypane.Width = settingsWidth;

    mypane.Height = windowBounds.Height;

  

    // Place the SettingsFlyout inside our Popup window.

    settingsPopup.Child = mypane;

  

    // Let's define the location of our Popup.

    settingsPopup.SetValue(Canvas.LeftProperty, SettingsPane.Edge == SettingsEdgeLocation.Right ? (windowBounds.Width - settingsWidth) : 0);

    settingsPopup.SetValue(Canvas.TopProperty, 0);

    settingsPopup.IsOpen = true;

}

  

void OnPopupClosed(object sender, object e)

{

    Window.Current.Activated -= OnWindowActivated;

}

  

private void OnWindowActivated(object sender, Windows.UI.Core.WindowActivatedEventArgs e)

{

    if (e.WindowActivationState == Windows.UI.Core.CoreWindowActivationState.Deactivated)

    {

        settingsPopup.IsOpen = false;

    }

}

  

  



Notice how we listen in with a event handler when the user launches the SettingsPane. Our SettingsFlyout is lodged inside the PopUp controls, which we animate to open & close, along with light-dismiss behavior, when the app window is activated. The Settings page could have any data-bound XAML controls you need to manage app level settings; the only interesting piece of code may be the back button navigation:

private void MySettingsBackClicked(object sender, RoutedEventArgs e)

{

    // First close our Flyout.

    Popup parent = this.Parent as Popup;

    if (parent != null)

    {

        parent.IsOpen = false;

    }

  

    // If the app is not snapped, then the back button shows the Settings pane again.

    if (Windows.UI.ViewManagement.ApplicationView.Value != Windows.UI.ViewManagement.ApplicationViewState.Snapped)

    {

        SettingsPane.Show();

    }

}

More details about adding Settings contract in C#/XAML can be found @ http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh872190.aspx.

Conclusion

That’s it for today. The crux of this article was to talk about the various ways our Windows 8 apps could integrate with the OS through the implementation of Contracts. In particular, we saw how in just a few steps, one could support common traits like Search, Share & Settings in Windows 8 apps.
See you next time as we dive into Application Lifecycle Management and how to deal with data persistence. Thanks for reading!

About Author

ActualPic

Samidip Basu (@samidip) is a technologist, gadget-lover and MSFT Mobility Solutions Lead for Sogeti USA working out of Columbus OH. With a strong developer background in Microsoft technology stack, he now spends much of his time evangelizing Windows Phone/Windows 8 platforms & cloud-supported mobile solutions in general. He passionately helps run The Windows Developer User Group (http://thewindowsdeveloperusergroup.com/), labors in M3 Conf (http://m3conf.com/) organization and can be found with at-least a couple of hobbyist projects at any time. His spare times call for travel and culinary adventures with the wife. Find out more at http://samidipbasu.com.

Windows 8 Apps: The 8 Must-Know Tricks! Day 5

Don't miss...

Day 5: Search, Share & Settings Contracts

Conclusion

About Author

Comments

Add Comment

From this series

Similar

MVVM Articles

MEF Articles

Business applications

Articles

Books

Windows 8 Apps: The 8 Must-Know Tricks! Day 5

Don't miss...

Day 5: Search, Share & Settings Contracts

Conclusion

About Author

Comments

Add Comment

Newsletter

From this series

Similar

MVVM Articles

MEF Articles

Business applications

Articles

Books