Feb 142013
 
 February 14, 2013  Posted by at 12:36 pm HTML & CSS, JS & TS, WinRT  Add comments

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.

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”]
<UserControl
x:Class="CSharp_Settings.Settings.Help_Settings"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
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="646">
<Border BorderBrush="#FF590151" BorderThickness="1">
<Grid Background="White" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="80"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Background="#FFFF00F2" Grid.Row="0">
<Grid Margin="40,20,17,13">
<Grid.Transitions>
<TransitionCollection>
<EntranceThemeTransition FromHorizontalOffset="50" />
</TransitionCollection>
</Grid.Transitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
<ColumnDefinition />
</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>
<body>
<div style="border: 1px solid #AB00A5" data-win-control="WinJS.UI.SettingsFlyout" data-win-options="{settingsCommandId:’help’, width:’narrow’}">
<div class="win-ui-dark win-header" style="background-color:#FF00F7">
<button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
<div class="win-label"> Help</div>
<img src="../images/icon.png" style="position: absolute; right: 40px; width:35px; height:35px"/>
</div>
<div class="win-content win-settings-section">
<h3>Help!</h3>
<p> No help for you muahahaha</p>
</div>
</div>
</body>
</html>
[/sourcecode]

HTML- the About settings, wide

[sourcecode language=”HTML”]
&lt;!doctype HTML&gt;
&lt;html&gt;
&lt;body&gt;
&lt;div style=&quot;border: 1px solid #733600&quot; data-win-control=&quot;WinJS.UI.SettingsFlyout&quot; data-win-options=&quot;{settingsCommandId:’about’, width:’wide’}&quot;&gt;
&lt;div class=&quot;win-ui-dark win-header&quot; style=&quot;background-color:#994700&quot;&gt;
&lt;button type=&quot;button&quot; onclick=&quot;WinJS.UI.SettingsFlyout.show()&quot; class=&quot;win-backbutton&quot;&gt;&lt;/button&gt;
&lt;div class=&quot;win-label&quot;&gt; About&lt;/div&gt;
&lt;img src=&quot;../images/icon.png&quot; style=&quot;position: absolute; right: 40px; width:35px; height:35px&quot;/&gt;
&lt;/div&gt;
&lt;div class=&quot;win-content win-settings-section&quot;&gt;
&lt;h3&gt;Something about something&lt;/h3&gt;
&lt;p&gt;
Bacon ipsum dolor sit amet tail bacon swine jerky ground round turducken doner beef ham pork loin. Andouille ground round capicola frankfurter, tenderloin leberkas doner beef corned beef bresaola tongue. Beef strip steak turducken spare ribs, pork filet mignon bresaola ball tip. Kielbasa turkey beef ribs chuck, pork loin sausage short loin. Meatloaf bacon boudin, chuck tongue pork loin shank. Strip steak frankfurter shoulder pancetta beef ball tip venison drumstick andouille.
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
[/sourcecode]

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]

  5 Responses to “Settings panel: Windows Store Apps JS/HTML and C#/XAML side by side”

  1. 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.

  2. 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

  3. Thank you very much. This is very simple to understand and it save my time. Keep going. best of luck for you.. 🙂 🙂 🙂

  4. 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?

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

What is 8 + 4 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)