Windows Phone 7 - Tutoriel 21 : Paramètres d'application

Exemple de paramètres d'application pour Windows Phone 7

| Peter Bull | Deepin Prayag (Traduction) |

Traducteur

Deepin

Ce tutoriel fait partie d'une série de niveau débutant-intermédiaire pour apprendre Windows Phone 7 par le biais d'exemples pas à pas.

Langage : C#

Public visé : niveau Débutant

Commentez ce tutoriel : Commentez ♪

- Titre : Windows Phone 7 - Tutoriel 21 : Paramètres d'application

- Auteurs : Peter Bull, Deepin Prayag (Traduction)

- Traducteur : Deepin

- Parution : 19 avril 2012

- Mise à jour : 19 avril 2012

- Licence : Copyright ® 2012 Peter Bull. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- Traduction

- Introduction

- Exemple de paramètres d'application pour Windows Phone 7

- Étape 1

- Étape 2

- Étape 3

- Étape 4

- Étape 5

- Étape 6

- Étape 7

- Étape 8

- Étape 9

- Étape 10

- Étape 11

- Étape 12

- Étape 13

- Étape 14

- Étape 15

- Étape 16

- Étape 17

- Étape 18

- Étape 19

- Étape 20

- Étape 21

- Conclusion

- Liens

- Remerciements

Traduction

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Peter Bull, Windows Phone 7 - Windows Phone 7 Application Settings Example.

Introduction

Les applications Windows Phone 7 prennent en charge la possibilité d'enregistrer les paramètres d'application afin de sauvegarder les options de personnalisation sur un dispositif.

Exemple de paramètres d'application pour Windows Phone 7

Étape 1

Démarrez Microsoft Visual Web Developer 2010 Express pour Windows Phone, ensuite sélectionnez Fichier puis Nouveau Projet… Sélectionnez Visual C# ensuite Silverlight for Windows Phone puis Application Windows Phone dans les modèles installés, sélectionnez un emplacement si vous le souhaitez, puis entrez un nom pour le projet et appuyez sur OK :

Étape 2

Une page Application Windows Phone nommée MainPage.xaml devrait alors apparaître :

Étape 3

Sélectionnez Projet ensuite Ajouter une classe…, et sélectionnez le modèle Classe s'il ne l'est pas déjà, ensuite modifiez le Nom en Settings.cs :

Étape 4

Ajoutez la nouvelle classe au Projet en cliquant sur Ajouter, ensuite dans la vue de code pour la nouvelle Classe, au-dessus de namespace ApplicationSettings tapez ceci :

using System.ComponentModel;
using System.IO.IsolatedStorage;

Également dans la vue de code, à la fin de la ligne public class Settings tapez ceci :

: INotifyPropertyChanged

Toujours dans la vue de code, en dessous du « { » de la ligne public class Settings tapez ceci :

public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(String info)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(info));
}
}
private IsolatedStorageSettings appSettings = IsolatedStorageSettings.ApplicationSettings;

Étape 5

Pendant que nous en sommes à la vue de code pour Settings.cs, en dessous de private IsolatedStorageSettings appSettings = IsolatedStorageSettings.ApplicationSettings; tapez les méthodes et propriétés suivantes :

public object Get(string key)
{
return appSettings.Contains(key) ? appSettings[key] : null;
}

public void Set(string key, object value)
{
if (appSettings.Contains(key)) { appSettings[key] = value; }
else { appSettings.Add(key, value); }
appSettings.Save();
}

public object Default(object value, object fallback)
{
return value == null ? fallback : value;
}

public string PageTitle
{
get { return (string)Default(Get("pagetitle"), "page title"); }
set
{
Set("pagetitle", value);
NotifyPropertyChanged("PageTitle");
}
}

public Visibility ShowTitle
{
get { return (Visibility)Default(Get("showtitle"), Visibility.Visible); }
}

public bool ShowTitleToggle
{
get { return ShowTitle == Visibility.Visible; }
set
{
Set("showtitle", value ? Visibility.Visible : Visibility.Collapsed);
NotifyPropertyChanged("ShowTitle");
NotifyPropertyChanged("ShowTitleToggle");
NotifyPropertyChanged("ShowTitleText");
}
}

public string ShowTitleText
{
get { return ShowTitleToggle ? "on" : "off"; }
}

Étape 6

Faites un clic droit sur App.xaml dans l'Explorateur de solutions et choisissez Afficher le code. Ensuite dans la vue de code pour App.xaml.cs, au-dessus de la ligne public App() tapez ceci :

public Settings Settings = new Settings();

Étape 7

Sélectionnez Projet ensuite Ajouter un nouvel élément…, et sélectionnez le modèle Page en mode portrait Windows Phone, puis modifiez le Nom en SettingsPage.xaml :

Étape 8

Ajoutez la nouvelle classe au Projet en cliquant sur Ajouter, ensuite dans le volet XAML pour SettingsPage.xaml, au-dessus de la ligne <Grid x:Name="LayoutRoot" Background="Transparent"> tapez le code XAML suivant :

<phone:PhoneApplicationPage.Resources>
<Style x:Key="PhoneToggleSwitch" TargetType="ToggleButton">
<Setter Property="Background" Value="{StaticResource PhoneBackgroundBrush}"/>
<Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="BorderThickness" Value="3"/>
<Setter Property="MinWidth" Value="90"/>
<Setter Property="MaxWidth" Value="90"/>
<Setter Property="MinHeight" Value="90"/>
<Setter Property="MaxHeight" Value="90"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="border" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="borderDisabled" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Duration="00:00:00.3" Storyboard.TargetName="switchButton"
Storyboard.TargetProperty="(Canvas.Left)" To="58"/>
<DoubleAnimation Duration="00:00:00.3" Storyboard.TargetName="rectangleSwitchOn"
Storyboard.TargetProperty="Width" To="58"/>
<DoubleAnimation Duration="00:00:00.3" Storyboard.TargetName="switchButtonDisabled"
Storyboard.TargetProperty="(Canvas.Left)" To="58"/>
<DoubleAnimation Duration="00:00:00.3" Storyboard.TargetName="rectangleSwitchOnDisabled"
Storyboard.TargetProperty="Width" To="58"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked">
<Storyboard>
<DoubleAnimation Duration="00:00:00.3" Storyboard.TargetName="switchButton"
Storyboard.TargetProperty="(Canvas.Left)" To="-10"/>
<DoubleAnimation Duration="00:00:00.3" Storyboard.TargetName="rectangleSwitchOn"
Storyboard.TargetProperty="Width" To="0"/>
<DoubleAnimation Duration="00:00:00.3" Storyboard.TargetName="switchButtonDisabled"
Storyboard.TargetProperty="(Canvas.Left)" To="-10"/>
<DoubleAnimation Duration="00:00:00.3" Storyboard.TargetName="rectangleSwitchOnDisabled"
Storyboard.TargetProperty="Width" To="0"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="border" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}" Width="89" Height="34" HorizontalAlignment="Right" Margin="0,20,0,20">
<Canvas x:Name="switchContainer" Margin="4">
<Rectangle x:Name="rectangleSwitchOn" Width="0" Height="20" Fill="{TemplateBinding Foreground}"/>
<Border x:Name="switchButton" Canvas.Top="-12" BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding Background}">
<Rectangle Width="20" Height="38" Fill="{StaticResource PhoneForegroundBrush}"/>
</Border>
</Canvas>
</Border>
<Border x:Name="borderDisabled" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"
BorderBrush="{StaticResource PhoneInactiveBrush}" Width="89" Height="34" HorizontalAlignment="Right"
Margin="0,20,0,20" Visibility="Collapsed">
<Canvas x:Name="switchContainerDisabled" Margin="4">
<Rectangle x:Name="rectangleSwitchOnDisabled" Width="0" Height="20" Fill="{StaticResource PhoneInactiveBrush}"/>
<Border x:Name="switchButtonDisabled" Canvas.Top="-12" BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding Background}">
<Rectangle Width="20" Height="38" Fill="{StaticResource PhoneInactiveBrush}"/>
</Border>
</Canvas>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>

Étape 9

Pendant que nous en sommes au volet XAML pour SettingsPage.xaml, entre les lignes <Grid Grid.Row="1" x:Name="ContentGrid"> et </Grid>, tapez le code XAML suivant :

<StackPanel>
<TextBlock Text="Page Title Text" Style="{StaticResource PhoneTextTitle3Style}"/>
<TextBox Text="{Binding Mode=TwoWay, Path=PageTitle}" />
<TextBlock Text="Page Title Visibility" Style="{StaticResource PhoneTextTitle3Style}"/>
<Grid Margin="10">
<TextBlock VerticalAlignment="Center" Style="{StaticResource PhoneTextExtraLargeStyle}"
Text="{Binding Path=ShowTitleText}"/>
<ToggleButton HorizontalAlignment="Right" Style="{StaticResource PhoneToggleSwitch}"
IsChecked="{Binding Mode=TwoWay,Path=ShowTitleToggle}"/>
</Grid>
</StackPanel>

XAML :

Design :

Étape 10

Faites un clic droit sur la page ou sur l'entrée pour SettingsPage.xaml dans l'Explorateur de solutions et choisissez l'option Afficher le code. Dans la vue de code, au-dessus de public SettingsPage tapez la déclaration Application suivante :

public App app = (App)Application.Current;

Également dans la vue de code, dans le constructeur public SettingsPage() en dessous de InitializeComponent(); tapez ceci :

this.DataContext = app.Settings;
PageTitle.Text = "settings";

Étape 11

Faites un clic droit sur le Projet dans l'Explorateur de solutions et choisissez Ajouter, ensuite Nouveau Dossier, et nommez-le « images » (sans les guillemets) :

Étape 12

Téléchargez l'image suivante (settings.png) en faisant un clic droit sur l'image ci-dessous et choisissez « Enregistrer l'image sous… » et enregistrez-la dans un dossier sur votre ordinateur :

settings.png

Étape 13

Faites un clic droit sur le dossier « images » du Projet dans l'Explorateur de solutions, et choisissez Ajouter, ensuite Élément existant… Puis dans la fenêtre Ajouter un élément existant, sélectionnez le dossier dans lequel vous avez enregistré l'image, ensuite choisissez Ajouter pour ajouter settings.png au dossier « images » dans le projet :

Étape 14

Puisque nous sommes dans l'Explorateur de solutions, cliquez sur l'image « settings.png », ensuite allez dans la Boîte de propriétés et modifiez Action de génération à Contenu :

Étape 15

Retournez au concepteur de vues en sélectionnant l'onglet MainPage.xaml, ensuite dans le volet XAML au-dessus de la balise <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}"> tapez le code ApplicationBar XAML suivant :

<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="False">
<shell:ApplicationBar.Buttons>
<shell:ApplicationBarIconButton Text="settings" IconUri="/images/settings.png" Click="Settings_Click"/>
</shell:ApplicationBar.Buttons>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Étape 16

Puisque nous en sommes au volet XAML, remplacez le XAML du titre de la page dans le TitlePanel, <TextBlock x:Name="PageTitle" Text="page name" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>, par le code XAML suivant :

<TextBlock x:Name="PageTitle" Text="{Binding Path=PageTitle}" Margin="-3,-8,0,0"
Style="{StaticResource PhoneTextTitle1Style}" Visibility="{Binding Path=ShowTitle}"/>

Étape 17

Faites un clic droit sur la page ou sur l'entrée pour MainPage.xaml dans l'Explorateur de solutions et choisissez l'option Afficher le code. Dans la vue de code, au-dessus de public MainPage() tapez la déclaration Application suivante :

public App app = (App)Application.Current;

Également dans la vue de code, dans le constructeur public MainPage() en dessous de InitializeComponent(); tapez ceci :

this.DataContext = app.Settings;

Étape 18

Puisque nous en sommes à la vue de code pour MainPage.xaml.cs, au-dessus de public MainPage() tapez le gestionnaire d'événements suivant :

private void Settings_Click(object sender, EventArgs e)
{
NavigationService.Navigate(new Uri("/SettingsPage.xaml",UriKind.Relative));
}

Étape 19

Enregistrez le Projet maintenant que vous avez terminé l'application Windows Phone Silverlight. Sélectionnez l'option Windows Phone Emulator ensuite sélectionnez Debug puis Démarrer le débogage ou cliquez sur Démarrer le débogage :

Dès que vous l'aurez fait, ce qui suit apparaîtra dans l'émulateur Windows Phone une fois chargé :

Étape 20

Cliquez sur le bouton settings, vous pouvez ensuite basculer la visibilité du titre à « on » ou « off », ou modifier le titre :

Étape 21

Vous pouvez ensuite Arrêter l'application en sélectionnant la fenêtre d'application Visual Studio 2010 et en cliquant sur le bouton Arrêter le débogage :

Conclusion

Il s'agit d'un exemple simple d'utilisation des paramètres d'application. Si vous modifiez le texte du titre de la page et que vous appuyez sur back par la suite, le texte du titre de la page changera, ou faites tout simplement basculer la visibilité du titre de la page. Vous pouvez utiliser cet exemple comme base pour la page de paramètres de votre propre application - personnalisez-la !

Liens

Télécharger le code source du tutoriel.

Remerciements

Je tiens ici à remercier Peter Bull de m'avoir autorisé à traduire son tutoriel.
Je remercie tomlev pour sa relecture technique et ses propositions.
Je remercie également FirePrawn pour sa relecture orthographique et ses propositions.