♪
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 :
: INotifyPropertyChangedToujours 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▲
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.
