WPF - Modèles
Un modèle décrit l'aspect général et l'aspect visuel d'un contrôle. Pour chaque contrôle, un modèle par défaut lui est associé qui lui donne son apparence. Dans les applications WPF, vous pouvez facilement créer vos propres modèles lorsque vous souhaitez personnaliser le comportement visuel et l'apparence visuelle d'un contrôle.
La connectivité entre la logique et le modèle peut être obtenue par liaison de données. La principale différence entrestyles et templates sont listés ci-dessous -
Les styles ne peuvent modifier l'apparence de votre contrôle qu'avec les propriétés par défaut de ce contrôle.
Avec les modèles, vous pouvez accéder à plus de parties d'un contrôle que dans les styles. Vous pouvez également spécifier le comportement existant et nouveau d'un contrôle.
Il existe deux types de modèles les plus couramment utilisés -
- Modèle de contrôle
- Modèle de données
Modèle de contrôle
Le modèle de contrôle définit l'apparence visuelle d'un contrôle. Tous les éléments de l'interface utilisateur ont une sorte d'apparence ainsi qu'un comportement, par exemple, Button a une apparence et un comportement. L'événement de clic ou l'événement de survol de la souris sont les comportements qui sont déclenchés en réponse à un clic et à un survol et il existe également une apparence par défaut du bouton qui peut être modifiée par le modèle de contrôle.
Exemple
Prenons un exemple simple. Nous allons créer deux boutons (l'un avec le modèle et l'autre est le bouton par défaut) et les initialiser avec certaines propriétés.
<Window x:Class = "TemplateDemo.MainWindow"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
Title = "MainWindow" Height = "350" Width = "604">
<Window.Resources>
<ControlTemplate x:Key = "ButtonTemplate" TargetType = "Button">
<Grid>
<Ellipse x:Name = "ButtonEllipse" Height = "100" Width = "150" >
<Ellipse.Fill>
<LinearGradientBrush StartPoint = "0,0.2" EndPoint = "0.2,1.4">
<GradientStop Offset = "0" Color = "Red" />
<GradientStop Offset = "1" Color = "Orange" />
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<ContentPresenter Content = "{TemplateBinding Content}"
HorizontalAlignment = "Center" VerticalAlignment = "Center" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property = "IsMouseOver" Value = "True">
<Setter TargetName = "ButtonEllipse" Property = "Fill" >
<Setter.Value>
<LinearGradientBrush StartPoint = "0,0.2" EndPoint = "0.2,1.4">
<GradientStop Offset = "0" Color = "YellowGreen" />
<GradientStop Offset = "1" Color = "Gold" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property = "IsPressed" Value = "True">
<Setter Property = "RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX = "0.8" ScaleY = "0.8"
CenterX = "0" CenterY = "0" />
</Setter.Value>
</Setter>
<Setter Property = "RenderTransformOrigin" Value = "0.5,0.5" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
<StackPanel>
<Button Content = "Round Button!"
Template = "{StaticResource ButtonTemplate}"
Width = "150" Margin = "50" />
<Button Content = "Default Button!" Height = "40"
Width = "150" Margin = "5" />
</StackPanel>
</Window>Lorsque vous compilez et exécutez le code ci-dessus, il affichera la MainWindow suivante.
Lorsque vous déplacez la souris sur le bouton avec un modèle personnalisé, sa couleur change comme indiqué ci-dessous.
Modèle de données
Un modèle de données définit et spécifie l'apparence et la structure d'une collection de données. Il offre la flexibilité de formater et de définir la présentation des données sur n'importe quel élément de l'interface utilisateur. Il est principalement utilisé sur les contrôles d'élément liés aux données tels que ComboBox, ListBox, etc.
Exemple
Prenons un exemple simple pour comprendre le concept de modèle de données. Créer un nouveau projet WPF avec le nomWPFDataTemplates.
Dans le code XAML suivant, nous allons créer un modèle de données en tant que ressource pour contenir les étiquettes et les zones de texte. Il existe également un bouton et une zone de liste pour afficher les données.
<Window x:Class = "WPFDataTemplates.MainWindow"
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 = "clr-namespace:WPFDataTemplates"
xmlns:loc = "clr-namespace:WPFDataTemplates"
mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "525">
<Window.Resources>
<DataTemplate DataType = "{x:Type loc:Person}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height = "Auto" />
<RowDefinition Height = "Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width = "Auto" />
<ColumnDefinition Width = "200" />
</Grid.ColumnDefinitions>
<Label Name = "nameLabel" Margin = "10"/>
<TextBox Name = "nameText" Grid.Column = "1" Margin = "10"
Text = "{Binding Name}"/>
<Label Name = "ageLabel" Margin = "10" Grid.Row = "1"/>
<TextBox Name = "ageText" Grid.Column = "1" Grid.Row = "1" Margin = "10"
Text = "{Binding Age}"/>
</Grid>
</DataTemplate>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height = "Auto" />
<RowDefinition Height = "*" />
</Grid.RowDefinitions>
<ListBox ItemsSource = "{Binding}" />
<StackPanel Grid.Row = "1" >
<Button Content = "_Show..." Click = "Button_Click" Width = "80" HorizontalAlignment = "Left" Margin = "10"/>
</StackPanel>
</Grid>
</Window>Voici implementation in C# dans laquelle une liste d'objets Person sont affectés à DataContext, l'implémentation de la classe Person et l'événement de clic de bouton.
using System.Collections.Generic;
using System.Windows;
namespace WPFDataTemplates {
public partial class MainWindow : Window {
Person src = new Person { Name = "Ali", Age = 27 };
List<Person> people = new List<Person>();
public MainWindow() {
InitializeComponent();
people.Add(src);
people.Add(new Person { Name = "Mike", Age = 62 });
people.Add(new Person { Name = "Brian", Age = 12 });
this.DataContext = people;
}
private void Button_Click(object sender, RoutedEventArgs e) {
string message = src.Name + " is " + src.Age;
MessageBox.Show(message);
}
}
public class Person {
private string nameValue;
public string Name {
get { return nameValue; }
set { nameValue = value; }
}
private double ageValue;
public double Age {
get { return ageValue; }
set {
if (value != ageValue) {
ageValue = value;
}
}
}
}
}Lorsque vous compilez et exécutez le code ci-dessus, il produira la fenêtre suivante. Il contient une liste et à l'intérieur de la zone de liste, chaque élément de zone de liste contient les données d'objet de classe Person qui sont affichées sur les étiquettes et les zones de texte.
