Ajouter du Charm à votre appli Metro (Partie I) (Release Preview)

MISE A JOUR POUR LA RELEASE PREVIEW

2012 sera une année Metro pour moi. Commençons par une série de 3 articles sur les Charms (Je n’ai pas entendu de blague à ce propos au Build, les geek n’ont plus le sens de l’humour ?)

Sommaire des articles :

Avant tout : Ces articles ont été écrit avec la version Consumer Preview. Il n’y a pas de garanties que cela fonctionnera avec les autres versions.

Ajouter du Charm à votre appli Metro (Partie I) : Settings pane.
Ajouter du Charm à votre appli Metro (Partie II) : Search Contract.
Ajouter du Charm à votre appli Metro (Partie III) : Share Contract.
Ajouter du Charm à votre appli Metro(Partie IV) : File Open Picker Contract.

On commence avec le settings pane. Les applications Metro on par défaut un settings pane qui ressemble à ceci :

Vous pouvez rajouter vos propres panes.

Je vais montrer un Preferences pane, mais l’idée est la même pour tous.

On y va.

J’y vais de manière simple :

D’abord, créer un nouveau usercontrol. Appelons le PreferenceControl. Je lui donne une largueur de 346 (Qui correspond à la taille du Setting pane sur ma tablette).

Après, je j’y ajoute les contrôles settings. (Note : dans une appli Metro, les settings prennent effet tout de suite)

Mon XAML resemble à:

[csharp]

<UserControl x:Class="CharmUp1.SettingsControl"
    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"
    Loaded="Page_Loaded" Unloaded="Page_Unloaded"
    mc:Ignorable="d"
    d:DesignWidth="1366" d:DesignHeight="346" Width="346">

    <!--Common resources for default dark theme applications-->
    <UserControl.Resources>
        <SolidColorBrush x:Key="PageBackgroundBrush" Color="#FF0D8845"/>
        <SolidColorBrush x:Key="PageForegroundBrush" Color="White"/>
        <SolidColorBrush x:Key="HighlightBrush" Color="#FF26A0DA"/>
    </UserControl.Resources>

    <Border BorderBrush="White" Background="#FF0D8845">
        <Grid x:Name="LayoutRoot"  Margin="16">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="OrientationStates">
                    <VisualState x:Name="Full"/>
                    <VisualState x:Name="Fill"/>
                    <VisualState x:Name="Portrait"/>
                    <VisualState x:Name="Snapped"/>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <TextBlock Text="Application settings" Foreground="White" FontSize="20" HorizontalAlignment="Center" Margin="20"/>
            <TextBlock Grid.Row="1" Text="Red" Margin="10"/>
            <Slider Grid.Row="2" x:Name="RedSlide" Minimum="0" Maximum="255"/>
            <TextBlock Grid.Row="3" Text="Green" Margin="10"/>
            <Slider Grid.Row="4" x:Name="GreenSlide" Minimum="0" Maximum="255"/>
            <TextBlock Grid.Row="5" Text="Blue" Margin="10"/>
            <Slider Grid.Row="6" x:Name="BlueSlide" Minimum="0" Maximum="255"/>
        </Grid>
    </Border>

</UserControl>

[/csharp]

Après, j’ajoute ce contrôle sur la page principale. Je lui donne une marge de –346, comme ça il est caché. Je lui ajoute aussi une RepositionThemeTransition. Comme ça, le contrôle va utiliser le même type de transition que le Setting pane. Ce qui est consistant avec le style Metro de l’OS.

Ma page principale ressemble à :

<UserControl x:Class="CharmUp1.MainPage"
             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"
             xmlns:local="using:CharmUp1"
             mc:Ignorable="d"
             d:DesignHeight="768"
             d:DesignWidth="1366"
             DataContext="{Binding Main, Source={StaticResource Locator}}" PointerPressed="LayoutRoot_PointerPressed">

    <Grid x:Name="LayoutRoot"
          Background="{Binding BackgroundBrush}">

        <local:SettingsControl x:Name="TheSettingsControl" HorizontalAlignment="Right" Margin="0,0,-346,0">
            <UserControl.Transitions>
                <TransitionCollection>
                    <RepositionThemeTransition/>
                </TransitionCollection>
            </UserControl.Transitions>
        </local:SettingsControl>
        <Button Width="150" Height="40" HorizontalAlignment="Center" Content="Show Settings" Click="Button_Click"/>
    </Grid>
</UserControl>

Finalement, je fais le lien avec l’OS.

Dans le constructeur de mainpage je me registre à l’évènement CommandsRequested.

Le handler de l’évènement est appelé, je crée des SettingsCommand que j’ajoute à la collection ApplicationCommands.

Quand la commande sera appelée, elle va mettre la marge de son contrôle à 0, ce qui va le faire apparaitre, en utilisant la RepositionThemeTransition

public MainPage()
{
    InitializeComponent();

    var settingspane = Windows.UI.ApplicationSettings.SettingsPane.GetForCurrentView();

    settingspane.CommandsRequested += settingspane_CommandsRequested;

}

void settingspane_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
{
    var preferencesCommand = new Windows.UI.ApplicationSettings.SettingsCommand("Command.Settings", "Settings",
        (handler) =>
        {
            TheSettingsControl.Margin = ThicknessHelper.FromUniformLength(0);
        }
    );

    args.Request.ApplicationCommands.Add(preferencesCommand);

}

Une dernière chose; soyons polis. Le Setting pane doit se fermer quand on touche en dehors de sa surface :

private void LayoutRoot_PointerPressed(object sender, PointerEventArgs args)
{
    if (TheSettingsControl.Margin.Right == 0)
    {
        TheSettingsControl.Margin = ThicknessHelper.FromLengths(0, 0, -346, 0);
    }
}

Quand on touche la page principale et que le Setting pane est visible (à une marge = 0), on le cache en remettant la marge à -346 pixel. RepositionThemeTransitionsera aussi utilisée.

C’est tout ! Le résultat :

Dans la source, j’ai implémenté 2 panes : Preferences et About.

Prochaine étape : Search contract