Iris Classon
Iris Classon - In Love with Code

Settings panel: Windows Store Apps JS/HTML and C#/XAML side by side

This post is NOT for Windows Store Apps 8.1 ! Read update here:

 

Implementing a SettingsFlyout (settings pane) in Windows Store Apps 8.1

 

In Windows Store Apps the Settings of an app has to be accessed the same way, through the settings charm in the charms bar. Both app and system settings can be accessed there. You add commands to the pane itself, and that’s all you can do with the pane. Each command can invoke one settings panel- a usercontrol you define.

Here are some important things to keep in mind:

• Use one word labels for the entry points
• Max 4 entry points is recommended
• Narrow = 346 pixels
• Wide = 646 pixels.
• Height same as the screen.
• Header : backbutton + name of entry point + app icon, background color same as app tile
• Settingspanel border color should be 20% darker than header color, background should be white.
• Scrolling OK but max twice the height
• No buttons for navigation, commands or commit changes
• No direct actions if entry point is clicked
• Permission command is system-controlled
• Should be a flyout with entrance animation
• Lightly dismissible
• Should be on same side as settings (use SettingsEdgeLocation property)

In JS and Html you set the panel as a data-win-control=“WinJS.UI.SettingsFlyout” with its options to the id of the command and the width can be either narrow or wide. data-win-options="{settingsCommandId:‘about’, width:‘wide’} . In XAML and C# the settingspanel is defined as a popup that is populated with the content you want to use, and you set the width size to either 356 or 646, and there is a little bit more boilerplate code than with JS and Html.

Please note that this image is a montage of three images!

Showing a narrow and wide settings panel in windows store apps, as well as the commands that invokes the panels.

XAML - the UserControl

[sourcecode language=“XML”]



<Grid.RowDefinitions>


</Grid.RowDefinitions>


<Grid.Transitions>



</Grid.Transitions>
<Grid.ColumnDefinitions>



</Grid.ColumnDefinitions>
<Button Click=“Button_Click_1” Margin=“0,3,0,0” Grid.Column=“0”

HorizontalAlignment=“Left” Style="{StaticResource BackButtonStyle}"/>
<TextBlock Margin=“10,5,0,0” Grid.Column=“1” FontFamily=“Segoe UI”

FontWeight=“SemiLight” FontSize=“24.6667” Text=“Help” HorizontalAlignment=“Left” />
<Image Source="/Assets/icon.png" HorizontalAlignment=“Right” Grid.Column=“2”
[/sourcecode]

The code-behind for the usercontrol

[sourcecode language=“csharp”]
using Windows.UI.ApplicationSettings;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls.Primitives;
namespace CSharp_Settings.Settings
{
public sealed partial class Help_Settings
{
public Help_Settings()
{
InitializeComponent();
}

    private void Button\_Click\_1(object sender, RoutedEventArgs e)  
    {  
        if (Parent is Popup)  
            ((Popup)Parent).IsOpen = false;  
        SettingsPane.Show();  
    }  
}  

}

[/sourcecode]

Hooking up the command and settingspanel in C#

[sourcecode language=“csharp”]
using CSharp_Settings.Settings;
using Windows.Foundation;
using Windows.UI.ApplicationSettings;
using Windows.UI.Core;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;

namespace CSharp_Settings
{
public sealed partial class MainPage
{
public MainPage()
{
InitializeComponent();
_window = Window.Current.Bounds;
Window.Current.SizeChanged += OnWindowSizeChanged;
SettingsPane.GetForCurrentView().CommandsRequested += CommandsRequested;
}

    private Rect \_window;  
    private Popup \_popUp;  
    private const double WIDTH = 646;  

    private void OnWindowSizeChanged(object sender, WindowSizeChangedEventArgs e)  
    {  
        \_window = Window.Current.Bounds;  
    }  

    private void CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)  
    {  
        args.Request.ApplicationCommands.Add(new SettingsCommand(&quot;help&quot;, &quot;Help&quot;, Handler));  
    }  

    private void Handler(IUICommand command)  
    {  
        \_popUp = new Popup  
                     {  
                         Width = WIDTH,  
                         Height = \_window.Height,  
                         IsLightDismissEnabled = true,  
                         IsOpen = true  
                     };  
        \_popUp.Closed += OnPopupClosed;  
        Window.Current.Activated += OnWindowActivated;  
        \_popUp.Child = new Help\_Settings {Width = WIDTH, Height = \_window.Height};  
        \_popUp.SetValue(Canvas.LeftProperty, SettingsPane.Edge == SettingsEdgeLocation.Right ? (\_window.Width - WIDTH) : 0);  
        \_popUp.SetValue(Canvas.TopProperty, 0);  
    }  

    private void OnWindowActivated(object sender, WindowActivatedEventArgs e)  
    {  
        if (e.WindowActivationState == CoreWindowActivationState.Deactivated)  
            \_popUp.IsOpen = false;  
    }  

    private void OnPopupClosed(object sender, object e)  
    {  
        Window.Current.Activated -= OnWindowActivated;  
    }  
}  

}
[/sourcecode]

HTML- the help settings, narrow

[sourcecode language=“HTML”]
<!doctype HTML>

HTML- the About settings, wide

[sourcecode language=“HTML”]
<!doctype HTML>

Hooking up the command and settingspanel in javascript

[sourcecode language=“javascript”]
(function () {
“use strict”;
WinJS.Application.onsettings = function (e) {
e.detail.applicationcommands = {
“about”: {
title: “About”,
href: “/html/settings_about.html”
},
“help”: {
title: “Help”,
href: “/html/settings_help.html”
}
};
WinJS.UI.SettingsFlyout.populateSettings(e);
};
[/sourcecode]

Comments

Leave a comment below, or by email.
Peter in Hobart, Tasmania
4/29/2013 1:26:55 AM
Thanks Iris, your code is easy to understand and I had no trouble adapting it to the Windows shop app I am currently coding. Keep up the good work! Peter. 
Peter
6/17/2013 7:06:08 AM
Hi Iris,

A comment and a question... A comment first. You wrote that the size of the settingpanel should be 356 or 646. I think you meant 346 or 646. I guess you hit the wrong key. A question as well: The width of the default settingpanel is 346. Do you if it is possible to change it to 646? I like the default panel te be 646 since my own panels have that width as well. THNX

Regards,
Peter 
Lahiru
10/18/2013 11:25:32 PM
Thank you very much. This is very simple to understand and it save my time. Keep going. best of luck for you.. :) :) :) 
Yaswanth
12/5/2013 2:11:25 AM
Hi Iris,

I have login page with some input fields in the settings flyout .If it is a touch device the on screen keyboard(virtaul keyboard for touch ) is overirding the input fileds and half of the settings flyout.
Can you please help me on this? 
Iris Classon
12/5/2013 6:29:32 AM
Reply to: Yaswanth
One way is to use the InputPane.GetForCurrentView(); and handle the showing and hiding events for what you need to do.

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.viewmanagement.inputpane%28v=win.10%29.aspx 


Last modified on 2013-02-14

comments powered by Disqus