XAML: plantillas
Una plantilla describe el aspecto general y el aspecto visual de un control. Para cada control, hay una plantilla predeterminada asociada que le da la apariencia de ese control.
En XAML, puede crear fácilmente sus propias plantillas cuando desee personalizar el comportamiento visual y la apariencia visual de un control. La conectividad entre la lógica y la plantilla se puede lograr mediante el enlace de datos.
La principal diferencia entre estilos y plantillas son:
Los estilos solo pueden cambiar la apariencia de su control con las propiedades predeterminadas de ese control.
Con las plantillas, puede acceder a más partes de un control que en estilos. También puede especificar el comportamiento nuevo y existente de un control.
Hay dos tipos de plantillas que se utilizan con mayor frecuencia.
- Plantilla de control
- Plantilla de datos
Plantilla de control
La plantilla de control define o especifica la apariencia visual y la estructura de un control. Todos los elementos de la interfaz de usuario tienen algún tipo de apariencia y comportamiento, por ejemplo, Button tiene apariencia y comportamiento. El evento de clic o los eventos de desplazamiento del mouse son los comportamientos que se activan en respuesta a un clic y al pasar el mouse, y también hay una apariencia predeterminada del botón que se puede cambiar mediante la plantilla de Control.
Echemos un vistazo a un ejemplo sencillo de nuevo en el que se crean dos botones con algunas propiedades. Uno está contemplate y el otro es con el default botón.
<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>Cuando el código anterior se compila y ejecuta, producirá la siguiente ventana principal:
Cuando pasa el mouse sobre el botón con la plantilla personalizada, también cambia el color como se muestra a continuación:
Plantilla de datos
Una plantilla de datos define y especifica la apariencia y estructura de la recopilación de datos. Proporciona la flexibilidad de formatear y definir la presentación de los datos en cualquier elemento de la interfaz de usuario. Se utiliza principalmente en controles de elementos relacionados con datos, como ComboBox, ListBox, etc.
Echemos un vistazo a un ejemplo simple de plantilla de datos. El siguiente código XAML crea un cuadro combinado con plantilla de datos y bloques de texto.
<Window x:Class = "XAMLDataTemplate.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">
<Grid VerticalAlignment = "Top">
<ComboBox Name = "Presidents" ItemsSource = "{Binding}" Height = "30" Width = "400">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation = "Horizontal" Margin = "2">
<TextBlock Text = "Name: " Width = "95" Background = "Aqua" Margin = "2" />
<TextBlock Text = "{Binding Name}" Width = "95" Background = "AliceBlue" Margin = "2" />
<TextBlock Text = "Title: " Width = "95" Background = "Aqua" Margin = "10,2,0,2" />
<TextBlock Text = "{Binding Title}" Width = "95" Background = "AliceBlue" Margin = "2" />
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</Grid>
</Window>Aquí está la implementación en C # en la que el objeto de empleado se asigna a DataContext:
using System;
using System.Windows;
using System.Windows.Controls;
namespace XAMLDataTemplate {
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window {
public MainWindow() {
InitializeComponent();
DataContext = Employee.GetEmployees();
}
}
}Aquí está la implementación en C # para la clase Employee:
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
namespace XAMLDataTemplate {
public class Employee : INotifyPropertyChanged {
private string name; public string Name {
get { return name; }
set { name = value; RaiseProperChanged(); }
}
private string title; public string Title {
get { return title; }
set { title = value; RaiseProperChanged(); }
}
public static Employee GetEmployee() {
var emp = new Employee() {
Name = "Waqas", Title = "Software Engineer" };
return emp;
}
public event PropertyChangedEventHandler PropertyChanged;
private void RaiseProperChanged( [CallerMemberName] string caller = ""){
if (PropertyChanged != null) {
PropertyChanged(this, new PropertyChangedEventArgs(caller));
}
}
public static ObservableCollection<Employee> GetEmployees() {
var employees = new ObservableCollection<Employee>();
employees.Add(new Employee() { Name = "Ali", Title = "Developer" });
employees.Add(new Employee() { Name = "Ahmed", Title = "Programmer" });
employees.Add(new Employee() { Name = "Amjad", Title = "Desiner" });
employees.Add(new Employee() { Name = "Waqas", Title = "Programmer" });
employees.Add(new Employee() { Name = "Bilal", Title = "Engineer" });
employees.Add(new Employee() { Name = "Waqar", Title = "Manager" });
return employees;
}
}
}Cuando el código anterior se compila y ejecuta, producirá el siguiente resultado. Contiene un cuadro combinado y cuando hace clic en el cuadro combinado, ve que la colección de datos que se crean en la clase Empleado se enumera como elementos del cuadro combinado.
Le recomendamos que ejecute el código anterior y experimente con él.