Contract Settings in WinRT (Windows 8)

One of the main contracts available in the Windows 8 wonder panel is the Contract Settings.
Activation of the settings panel is carried out by the corresponding button “Settings” in the wonder panel:


The user can always go to this panel in order to manage the settings of the application. (For example, disable the ability to determine the location).
It would be quite logical not to force the user to think about where to look for the settings of the application itself and place its settings for the application in the same panel.

In this article we will look at two topics:
Adding contract support Settings
Add your own settings panel.


Adding contract support Settings
An example of the integration of settings is in the official examples:
App settings sample
')
Let's consider how to implement the support of the contract as simply as possible.
On the page in the OnNavigateTo and OnNavigateFrom methods, we subscribe to the event of the settings request and unsubscribe from the event when leaving the page:

protected override void OnNavigatedTo(NavigationEventArgs e) { SettingsPane.GetForCurrentView().CommandsRequested += Settings_CommandsRequested; } protected override void OnNavigatedFrom(NavigationEventArgs e) { SettingsPane.GetForCurrentView().CommandsRequested -= Settings_CommandsRequested; } 

SettingsPane is in the Windows.UI.ApplicationSettings namespace, so the corresponding namespace declaration should be in the page header:

 using Windows.UI.ApplicationSettings; 

The CommandsRequested event is triggered at the moment when the user in the panel wonder activates the settings panel. We must return the list of commands that we want to provide to the user. For example, add two commands About and Say Hello! .. The first will redirect to the About page and the second command will show a dialog box.

 void Settings_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args) { var viewAboutPage = new SettingsCommand("", "About", cmd => { (Window.Current.Content as Frame).Navigate(typeof (AboutPage)); }); args.Request.ApplicationCommands.Add(viewAboutPage); var sayHelloCommand = new SettingsCommand("", "Say Hello!", cmd => { new MessageDialog("Hello! World!").ShowAsync(); }); args.Request.ApplicationCommands.Add(sayHelloCommand); } 

If we did everything right, then we should see the following panel with our teams:



In this case, the Permissions item is always available and the user can always go in there and manage the security settings.

Adding your own settings panel

Often we need much more than one button.

Perhaps in our panel we will use ToggleSwitch, Slider, Combobox or other controls.

In the simplest version, you can organize the transition to any separate page containing application settings. But perhaps it will be more convenient for the user to stay on this page and simply set the appropriate settings in the custom sidebar.

An example of such a panel can be seen in almost every application with the “Permissions” command:



WinRT API does not provide a ready-made panel, but the implementation of its own panel is quite simple and you can find several solutions.

In particular, I used the solution described here . Although the implementation is different, the main idea of ​​the solution is taken from there.

First of all, we need to add a UserControl (UC) which will contain all the necessary settings, let's call it AppSettingsPanel

In UC, we implement the following code:

 <UserControl .... Width="350"> <Grid Background="DarkGreen" Margin="0"> <Grid Margin="0" Height="78" VerticalAlignment="Top" Background="Green"> <Button HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Style="{StaticResource PreviousAppBarButtonStyle}" Click="ButtonGoBack_Click"/> </Grid> <ToggleSwitch Header="Enable details view" Margin="10,83,0,0" VerticalAlignment="Top" /> </Grid> </UserControl> 

The value of 350 was chosen approximately equal to the width of the settings panel, if desired, you can specify the desired value.

In the handler, we will write the following code for the “back” button:

 private void ButtonGoBack_Click(object sender, RoutedEventArgs e) { if (this.Parent is Popup) { (this.Parent as Popup).IsOpen = false; } SettingsPane.Show(); } 

Now when the user clicks "back", the current panel will be hidden and the Settings panel will open again.

Next, we will add a small auxiliary class to our project:

  public class CustomPanelCommand { private readonly SettingsCommand command; public CustomPanelCommand(UserControl parentPage, string label, Type typeOfPanel) { command = new SettingsCommand("", label, (cmd) => { customSettingsPopup = new Popup() { IsLightDismissEnabled = true, Height = parentPage.ActualHeight }; customSettingsPopup.Closed += customSettingsPopup_Closed; Window.Current.Activated += Current_Activated; var panel = Activator.CreateInstance(typeOfPanel) as UserControl; panel.UpdateLayout(); customSettingsPopup.Width = panel.Width; customSettingsPopup.Height = panel.Height = parentPage.ActualHeight; customSettingsPopup.Child = panel; customSettingsPopup.SetValue(Canvas.LeftProperty, parentPage.ActualWidth - customSettingsPopup.Width); customSettingsPopup.IsOpen = true; }); } public SettingsCommand GetCommand() { return command; } private Popup customSettingsPopup; void customSettingsPopup_Closed(object sender, object e) { Window.Current.Activated -= Current_Activated; } void Current_Activated(object sender, Windows.UI.Core.WindowActivatedEventArgs e) { if (e.WindowActivationState == Windows.UI.Core.CoreWindowActivationState.Deactivated) { customSettingsPopup.IsOpen = false; } } } 

Now, with the help of this auxiliary class, we can add several buttons with a custom panel or separate settings panels for each page.

Using this auxiliary class we will add a code on our page to display our panel by the button “my custom settings”

 void Settings_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args) { var customCommand =new CustomPanelCommand(this, "My custom settings", typeof (AppSettingsPanel)).GetCommand(); args.Request.ApplicationCommands.Add(customCommand); } 

Now, if we activate the settings and select the “My custom settings” item, then the following panel should appear:



The source code for the article can be downloaded here.