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 :

Image non disponible

Étape 2

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

Image non disponible

É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 :

Image non disponible

É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 :

 
Sélectionnez
using System.ComponentModel;
using System.IO.IsolatedStorage;

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

 
Sélectionnez
: INotifyPropertyChanged

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

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

É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 :

 
Sélectionnez
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"; }
}
Image non disponible

É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 :

 
Sélectionnez
public Settings Settings = new Settings();
Image non disponible

É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 :

Image non disponible

É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 :

 
Sélectionnez
<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>
Image non disponible
Image non disponible
Image non disponible

É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 :

 
Sélectionnez
<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 :

Image non disponible

Design :

Image non disponible

É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 :

 
Sélectionnez
public App app = (App)Application.Current;

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

 
Sélectionnez
this.DataContext = app.Settings;
PageTitle.Text = "settings";
Image non disponible

É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) :

Image non disponible

É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 :

Image non disponible

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 :

Image non disponible

É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 :

Image non disponible

É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 :

 
Sélectionnez
<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>
Image non disponible

É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 :

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

É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 :

 
Sélectionnez
public App app = (App)Application.Current;

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

 
Sélectionnez
this.DataContext = app.Settings;
Image non disponible
Image non disponible

É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 :

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

É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 :

Image non disponible

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

Image non disponible

Étape 20

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

Image non disponible

É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 :

Image non disponible

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

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.