WPF (Windows Presentation Foundation) es un marco de interfaz de usuario basado en Windows lanzado por Microsoft. Se traduce como "Windows Presentation Foundation" en chino y es parte de .NET Framework 3.0. WPF es similar al marco técnico de WinForm, pero en comparación con WinForm, WPF expande la mayoría de las funciones básicas de manera más poderosa e introduce el lenguaje de marcado XAML, que realmente realiza la separación de front-end y back-end de desarrolladores y diseñadores, y deriva Un conjunto de marco de desarrollo de MVVM. Algunas referencias son las siguientes:
- "WPF en profundidad" ---- un tutorial introductorio detallado para principiantes
- WPF-Tutorial ---- Inicio rápido y primeros pasos de WPF
- Documentación oficial de Microsoft - Enciclopedia de consulta de la biblioteca de clases de WPF
- Use .NET para crear una nueva aplicación WPF ----WPF Caso de entrada oficial de Microsoft
- DependencyProperty.cs (microsoft.com) ---- Visor de código fuente de WPF
- Convertidor WPF - Trace g - Blog Garden (cnblogs.com) ---- Notas del blog de Big Brother
1. Introducción a los controles básicos
1. Relación de herencia de elementos de la interfaz de usuario de WPF
2. Controles básicos
2.1 Bloque de texto
En términos simples, TextBlock es un bloque de texto que se usa para presentar contenido de texto. TextBlock puede contener su propiedad de texto o elementos de contenido de flujo en línea en formato en línea (similar al lenguaje HTML. Estas pequeñas estructuras similares a controles se heredan de la clase en línea y se pueden representar en línea como parte del texto, como negrita, negrita, cursiva cursiva , Subrayado Subrayado, etc.).
- Foreground : 获取或设置要应用到 TextBlock 的文本内容的 Brush（文本颜色刷）。
- Background : 获取或设置要用于填充内容区域背景的 Brush（文本块背景颜色刷）。
- TextTrimming : 获取或设置在内容超出内容区域时要采用的文本剪裁行为(CharacterEllipsis字符边界裁剪、None不裁剪、WordEllipsis单词边界裁剪)。
- TextWrapping : 获取或设置 TextBlock 对文本进行换行的方式(Wrap自动换行、NoWrap不换行)。
- Text : 获取或设置 TextBlock 的文本内容，等效于标签中间放置文字。
- Inlines ： 获取包含顶级 Inline 元素的 InlineCollection，前者构成 TextBlock 的内容。
<!--TextBlock Inlines的XML格式-->
<TextBlock Margin="5" TextWrapping="Wrap" TextAlignment="Center">
This is a <Bold>TextBlock</Bold>,we are text the <Italic Foreground="Blue">inline elements</Italic>
<Span TextDecorations="Underline" Background="Silver">Look me,Hahahaha</Span>
</TextBlock>
//TextBlock Inlines的代码格式
TextBlock textBlock1 = new TextBlock();
textBlock1.TextWrapping = TextWrapping.Wrap;
textBlock1.TextAlignment = TextAlignment.Center;
textBlock1.Inlines.Add("This is a");
textBlock1.Inlines.Add(new Blob(new Run("TextBlock")));
textBlock1.Inlines.Add(",we are text the");
textBlock1.Inlines.Add(new Italic(new Run("inline elements")){
Foreground = Brushes.Blue });
...
2.2 Etiqueta
Label representa la etiqueta de texto del control, similar a TextBlock. Pero la etiqueta usa la propiedad Content en lugar de la propiedad Text. Esto se debe a que cualquier tipo de control puede colocarse dentro de la etiqueta, no solo texto. Por supuesto, el contenido también puede ser una cadena.
- 访问键/助记符：用于启用对控件的快速键盘访问，即通过访问键可以快速聚焦到相关的控件上。Label支持助记符绑定。
- Label助记符配置：在应为访问密钥的字符之前添加下划线，然后按住[Alt]键快速定位。 如果内容包含多个下划线字符，则只有第一个字符转换为访问键，其他下划线显示为普通文本。第一个下划线使用两个连续下划线表示普通的下划线文本内容。
- Foreground : 前景色背景
- Content : 设置Label内容，类型为Object
- Target : 获取或设置当用户按下标签的访问键时获得焦点的元素。
<Window x:Class="WpfTutorialSamples.Basic_controls.LabelControlAdvancedSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="LabelControlAdvancedSample" Height="180" Width="250">
<StackPanel Margin="10">
<Label Target="{Binding ElementName=txtName}">
<!--Label内部Content包含堆叠对象-->
<StackPanel Orientation="Horizontal">
<Image Source="http://cdn1.iconfinder.com/data/icons/fatcow/16/bullet_green.png" />
<!--AccessText控件用下划线来指定用作访问键的字符并呈现-->
<AccessText Text="__Na_me:" />
</StackPanel>
</Label>
<TextBox Name="txtName" />
<Label Target="{Binding ElementName=txtMail}">
<StackPanel Orientation="Horizontal">
<Image Source="http://cdn1.iconfinder.com/data/icons/fatcow/16/bullet_blue.png" />
<AccessText Text="_Mai_l:" />
</StackPanel>
</Label>
<TextBox Name="txtMail" />
</StackPanel>
</Window>
2.3 Cuadro de texto
El control TextBox es el control de entrada de texto más básico en WPF. Permite mostrar o editar texto sin formato, como un editor.
- AcceptsReturn : 获取或设置一个值，该值指示在用户按 ENTER 键时文本编辑控件如何响应(如果按ENTER键可在当前光标位置处插入新行，则为true；否则将忽略ENTER键)
- TextWrapping : 获取或设置文本框中文本的换行方式
- Text : 获取或设置文本框的文本内容
- SpellCheck : 获取一个 SpellCheck 对象，来设置拼写检查错误
- Language ： 该属性指示拼写检查器使用的语言
- IsReadOnly : 文本框是否只读
- TextBox的选择参数属性:
- SelectionStart : 获取或设置当前选择的起始位置的字符索引（当前光标位置或是否有选择）
- SelectionLength : 获取或设置一个值，该值指示文本框中当前选择的字符数(当前选择的长度,否则为0)
- SelectedText : 获取或设置文本框中当前选择的内容(当前选择的字符串，否则为空)
- SelectionChanged : 订阅SelectionChanged事件，在文本选择改变时发生
<Window x:Class="WpfTutorialSamples.Basic_controls.TextBoxSelectionSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="TextBoxSelectionSample" Height="150" Width="300">
<DockPanel Margin="10">
<TextBox SelectionChanged="TextBox_SelectionChanged" DockPanel.Dock="Top" />
<TextBox Name="txtStatus" AcceptsReturn="True" TextWrapping="Wrap" IsReadOnly="True" />
</DockPanel>
</Window>
namespace WpfTutorialSamples.Basic_controls
{
public partial class TextBoxSelectionSample : Window
{
public TextBoxSelectionSample()
{
InitializeComponent();
}
private void TextBox_SelectionChanged(object sender, RoutedEventArgs e)
{
TextBox textBox = sender as TextBox;
txtStatus.Text = "Selection starts at character #" + textBox.SelectionStart + Environment.NewLine;
txtStatus.Text += "Selection is " + textBox.SelectionLength + " character(s) long" + Environment.NewLine;
txtStatus.Text += "Selected text: '" + textBox.SelectedText + "'";
}
}
}
2.4 Botón
Button representa un control de botón de Windows que puede responder al evento Click. Para aplicar la misma configuración de propiedades a varios controles de Botón, use la propiedad Estilo. También puede modificar el ControlTemplate predeterminado para darle al control una apariencia única.
- Content : 设置Button内容，类型为Object。可以包括字符串或一些复杂类型
- Foreground, Background, FontWeight : 设置Button控件文字的样式
- Padding : 获取或设置控件内部的填充边距
- 事件
- Click : 在单击 Button 时发生事件
- ClickMode : 获取或设置 Click 事件何时发生。
<Button Padding="5">
<StackPanel Orientation="Horizontal">
<Image Source="/WpfTutorialSamples;component/Images/help.png" />
<TextBlock Margin="5,0">Help</TextBlock>
</StackPanel>
</Button>
2.5 Control de recopilación de listas
Un control de colección de lista representa un control que se puede usar para presentar un conjunto de elementos/datos. Los controles de colección de listas en WPF se derivan de la clase ItemsControl y pertenecen a los elementos de la familia ItemsControl, como ListBox y ComboBox. Aquí tomamos ItemsControl y ListBox como ejemplos para el análisis de control.
(1) Control de elementos
ItemsControl es el control de presentación de lista de datos más simple, que casi simplemente atraviesa y presenta datos de lista sin proporcionar ninguna otra selección de elementos (ListBox puede realizar la selección de elementos). ItemsControl se hereda de la clase Control, por lo que sus datos de colección de listas son esencialmente solo una parte del contenido contenido en el control. Además de ser el elemento de nivel superior de la familia ItemsControl, ItemsControl se usa a menudo como un control de lista personalizado (plantilla de definición).
- Envoltura automática de la familia ItemsControl
- La característica más distintiva de la familia ItemsControl es que utilizará automáticamente el contenedor de elementos (Contenedor de elementos) para envolver cada contenido de datos de su colección de listas. Cada tipo de ItemsControl tiene su correspondiente tipo de contenedor de elementos, por ejemplo, el contenedor de elementos de ListBox es un control ListBoxItem, el contenedor de elementos de ComboBox es un control ComboBoxItem.
- Item Container es esencialmente un elemento de control, la mayoría de los cuales se heredan de la clase ContentControl (como ListBoxItem), lo que también significa que puede contener un único objeto de cualquier tipo (como una cadena, una imagen o un panel).
- Cuando enviamos los datos de la colección como contenido a ItemsControl, ItemsControl no usará esta colección directamente, sino que primero usará el control Item Container correspondiente para empaquetar cada elemento de datos en la colección uno por uno, y luego empaquetará el Item Container. La lista se presenta como el contenido general de ItemsControl. ¡La ventaja de esto es que no solo podemos definir la apariencia de ItemsControl, sino también definir convenientemente la apariencia de cada elemento de datos! Y el tipo de datos de colección de ItemsControl puede ser diferente.
- Se puede crear explícitamente un contenedor de elementos para cada elemento de datos en ItemsControl , pero esto no es obligatorio. Porque si el contenedor de elementos Contenedor de elementos no se crea explícitamente, ItemsControl envolverá automáticamente el Contenedor de elementos para cada contenido de elemento de datos.
<ListBox>
<ListBoxItem>ListBox Item 1</ListBoxItem>
<ListBoxItem>ListBox Item 2</ListBoxItem>
<ListBoxItem>ListBox Item 3</ListBoxItem>
<ListBoxItem>ListBox Item 4</ListBoxItem>
</ListBox>
<!-- 等价于 -->
<ListBox>
<system:String>ListBox Item 1</system:String>
<system:String>ListBox Item 2</system:String>
<system:String>ListBox Item 3</system:String>
<system:String>ListBox Item 4</system:String>
</ListBox>
- Propiedades de la clase ItemsControl
public class ItemsControl : Control,IContainItemStorage,IAddChild
- 属性：
- DataContext: 获取或设置元素参与数据绑定时的数据上下文。
- DisplayMemberPath: 获取或设置源对象上的值的路径，以用作对象的可视表示形式。（只能显示简单的字符串数据）
- HasItems: 获取一个值，该值指示 ItemsControl 是否包含项。
- ItemContainerStyle: 获取或设置应用于为每个项生成的容器元素的 Style(设置其Item Container的Style)。
- Items: 获取用于生成 ItemsControl 的内容的集合。
- ItemsPanel: 获取或设置模板，该模板定义对项的布局进行控制的面板(默认值是一个纵向排列的指定StackPanel)
- ItemsSource: 获取或设置用于生成 ItemsControl 的内容的集合(常用于数据绑定，ItemsSource设置属性后，集合Items是只读且固定大小)
- ItemStringFormat： 获取或设置一个复合/格式化字符串，如果 ItemsControl 中的项显示为字符串，则用于指定如何格式化这些项。（仅用于string数据项）
- ItemTemplate： 获取或设置用来显示[每个项]的 DataTemplate。
- Template: 获取或设置控件模板。（整个ItemsControl的样式模板，非数据项）
(2) cuadro de lista
El control ListBox se hereda del Selector bajo ItemsControl Además de mostrar un conjunto de elementos de datos en una lista, ListBox también puede permitir a los usuarios [seleccionar elementos] de sus elementos secundarios.
public class ListBox : Selector
- 属性：
- 继承 ItemsControl 的大部分属性
- SelectedIndex: 获取或设置当前选择中第一项的索引，如果选择为空，则返回负一(-1)。
- SelectedItem: 获取或设置当前选择中的第一项(Object)，或者，如果选择为空，则返回 null。
- SelectedItems: 获取当前选定的所有项集合(IList)。
- SelectedValue: 获取或设置通过使用 SelectedValuePath 而获取的 SelectedItem 的路径值。当调用SelectedValue时，ListBox先找到选中的Item所对应的数据对象，然后把SelectedValuePath的值当作数据对象的属性名称并把这个属性值取出来。
- SelectedValuePath: 获取或设置用于从 SelectedItem 中获取 SelectedValue 的路径/属性名(string)。
- SelectionMode: 获取或设置 ListBox 的选择行为。默认值为 Single 选择。
- Extended: 用户可以按下 Shift 键来选择多个连续项。
- Multiple: 用户可以选择多个项而无需按下修改键。
- Single: 用户一次只能选择一项。
- 事件：
- SelectionChanged：当 Selector 的选择更改时发生。
namespace WPF_Demo
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
List<Employee> empList = new List<Employee>()
{
new Employee(){
Id=1,Name="Tim",Age=30},
new Employee(){
Id=2,Name="Tom",Age=26},
new Employee(){
Id=3,Name="Kitty",Age=28},
new Employee(){
Id=4,Name="Lisa",Age=30},
new Employee(){
Id=5,Name="Krito",Age=36}
};
this.listBoxEmplyee.DisplayMemberPath = "Name";
this.listBoxEmplyee.SelectedValuePath = "Id";
this.listBoxEmplyee.ItemsSource = empList;
}
private void listBoxEmplyee_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
ListBox lst = sender as ListBox;
if (lst != null)
{
int id = (int)lst.SelectedValue;
int index = lst.SelectedIndex;
MessageBox.Show("Id=" + id + ",Index=" + index);
}
}
}
public class Employee
{
public int Id {
get; set; }
public string Name {
get; set; }
public int Age {
get; set; }
}
}
3. Propiedades comunes de controles comunes en WPF
3.1 Objeto de solicitud de información sobre herramientas
La clase FrameworkElement tiene una propiedad ToolTip de la que heredan casi todos los controles de WPF. Esta propiedad se utiliza para obtener o establecer el objeto de información sobre herramientas (IU, objeto) que se muestra para este elemento en la interfaz de usuario, como una cadena de solicitud simple o un diseño de solicitud complejo. Además, combinado con la clase ToolTipService, se pueden implementar un montón de comportamientos interesantes que afectan la información sobre herramientas, como la propiedad ShowDuration que extiende el tiempo de la información sobre herramientas, etc.
<Window x:Class="WpfTutorialSamples.Control_concepts.ToolTipsAdvancedSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ToolTipsAdvancedSample" Height="200" Width="400" UseLayoutRounding="True">
<DockPanel>
<ToolBar DockPanel.Dock="Top">
<!--简单字符串提示-->
<Button ToolTip="Create a new file">
<Button.Content>
<Image Source="/WpfTutorialSamples;component/Images/page_white.png" Width="16" Height="16" />
</Button.Content>
</Button>
<Button>
<Button.Content>
<Image Source="/WpfTutorialSamples;component/Images/folder.png" Width="16" Height="16" />
</Button.Content>
<!--复杂提示对象，布局Panel-->
<Button.ToolTip>
<StackPanel>
<TextBlock FontWeight="Bold" FontSize="14" Margin="0,0,0,5">Open file</TextBlock>
<TextBlock>
Search your computer or local network
<LineBreak />
for a file and open it for editing.
</TextBlock>
<Border BorderBrush="Silver" BorderThickness="0,1,0,0" Margin="0,8" />
<WrapPanel>
<Image Source="/WpfTutorialSamples;component/Images/help.png" Margin="0,0,5,0" />
<TextBlock FontStyle="Italic">Press F1 for more help</TextBlock>
</WrapPanel>
</StackPanel>
</Button.ToolTip>
</Button>
</ToolBar>
<TextBox>
Editor area...
</TextBox>
</DockPanel>
</Window>
3.2 Representación de texto
Microsoft realizó muchas optimizaciones para el motor de representación de texto WPF en .NET Framework 4.0, presentando la clase TextOptions y las propiedades relacionadas.
- TextOptions.TextFormattingMode : 选择用 Ideal（默认值）或 Display（更清晰）
- TextOptions.TextRenderingMode : 控制显示文本所用的抗锯齿算法
<Label TextOptions.TextFormattingMode="Display" FontSize="9">TextFormattingMode.Ideal, small text</Label>
<Label TextOptions.TextRenderingMode="Auto" FontSize="9">TextRenderingMode.Auto, small text</Label>
2. Recursos y convertidores
1. Recursos de WPF
1.1 Definición de recurso
Un recurso es una colección de datos de objetos que se pueden reutilizar en diferentes lugares de la aplicación. Todos los datos, controles, cadenas, etc. se pueden almacenar como recursos, lo que le permite almacenar datos en un solo lugar y usarlos en cualquier lugar, lo cual es muy práctico. Todos los elementos de la interfaz de WPF tienen un atributo Resources, cuyo tipo es ResourceDictionary, que puede almacenar recursos de datos en forma de pares "clave-valor". Cada recurso en un diccionario de recursos debe tener una clave única. Se puede asignar una clave única a través de la directiva x:Key al definir un recurso en el marcado. Normalmente, esta clave es una cadena.
(1) Alcance del control: el diccionario de recursos definido por el control solo se puede usar dentro del control actual <StackPanel.Resources>…</StackPanel.Resources>
(2) Alcance de ventana/página: <Window.Resources> ...</Window.Resources> solo se puede usar en la ventana/página actual
(3) Aplicación global: disponible globalmente <Application.Resources>…</Application.Resources>
1.2 Uso de recursos
WPF buscará automáticamente el recurso especificado desde el elemento de control de área actual (rango de control) a la ventana y luego a App.xaml a lo largo del árbol de la interfaz de usuario de abajo hacia arriba y se detendrá cuando lo encuentre, pero no buscará hacia abajo. Los recursos y los diccionarios de recursos no solo pueden definir el estilo de los elementos, sino también definir plantillas de recursos, guiones gráficos, disparadores, etc., lo que facilita la redundancia de código y la definición repetida del mismo estilo al definir estilos para muchos controles iguales.
Recursos estáticos: búsqueda en tiempo de compilación , usando la extensión de marcado StaticResource para crear referencias (usando extensiones de marcado para procesar cadenas de atributos y devolver objetos a cargadores XAML, especificando así referencias de objetos/objetos de referencia vinculantes), las referencias de recursos estáticos solo estarán en el programa Cargado una vez en tiempo de ejecución.
Recursos dinámicos: busque en tiempo de ejecución , cree referencias utilizando la extensión de marcado DynamicResource. Crea una expresión temporal durante la compilación inicial, aplazando así la búsqueda del recurso hasta que realmente se necesite el valor del recurso solicitado para construir el objeto. La búsqueda de este recurso se comporta como una búsqueda en tiempo de ejecución, lo que afecta el rendimiento . Use recursos estáticos tanto como sea posible en su aplicación y use recursos dinámicos solo cuando sea necesario.
(1) Declaración XAML:<子元素 (对应)属性名=”{StaticResource 资源标记名}” /> o <子元素 (对应)属性名=”{DynamicResource 资源标记名}” />XAML coincide automáticamente con el tipo de datos, no es necesario forzar la conversión y se lanzará una excepción cuando el tipo no coincida.
(2) Código de referencia:
-
string text = (string)this.FindResource("str");El valor del diccionario de recursos es Objeto, que debe convertirse a la fuerza. El método FindResource es buscar hacia arriba desde la parte inferior del árbol de la interfaz de usuario -
string text1 = (string)this.Resources["str"];El valor del diccionario de recursos es Objeto, que debe convertirse a la fuerza. El método de recursos es solo para buscar el diccionario de recursos de este control
1.3 Fusión de recursos
(1) Definir diccionario de recursos
Además de definir diccionarios de recursos locales dentro de los controles/ventanas anteriores, también podemos definir diccionarios de recursos de forma independiente para usar entre diferentes aplicaciones/diferentes proyectos. La clase ResourceDictionary proporciona una implementación de tabla hash/diccionario (mapa de pares clave-valor) que contiene recursos WPF usados por componentes y otros elementos de una aplicación WPF. VS2019 proporciona un elemento de creación para agregar un archivo de recursos dictionary.xaml . El diccionario de recursos está escrito de la misma manera que los recursos, simplemente defina sus recursos directamente en el archivo.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WPF_Demo">
<Style TargetType="TextBox">
<Setter Property="FontFamily" Value="楷体"></Setter>
<Setter Property="FontSize" Value="50"></Setter>
<Setter Property="Foreground" Value="Red"></Setter>
</Style>
</ResourceDictionary>
(2) Fusión de recursos
El diccionario de recursos independiente recién definido no se puede usar directamente, porque WPF aún no puede reconocer el diccionario, necesitamos fusionarlo y agregarlo al rango de control/ventana/APP correspondiente, y la propiedad de fusión utilizada es MergedDictionaries . MergedDictionaries es una propiedad de la clase ResourceDictionary, que es un tipo de colección ResourceDictionary.
Normalmente, cada ResourceDictionary de la colección MergedDictionaries especifica una propiedad Source . El valor de Origen debe ser un Identificador uniforme de recursos (URI) que se resuelva en la ubicación del archivo de recursos que se fusionará. El destino de este URI debe ser otro archivo XAML con un ResourceDictionary como elemento raíz.
- Combinar en un solo proyecto
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<!--<ResourceDictionary Source="资源字典路径"/>-->
<ResourceDictionary Source="/Dictionarys/ColorDictionary.xaml"/>
<ResourceDictionary Source="..."/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
- Combinar en varios proyectos
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<!--<ResourceDictionary Source="/项目名;component/资源字典路径"/>-->
<ResourceDictionary Source="/CommonModel;component/Dictionarys/PathDictionary.xaml"/>
<ResourceDictionary Source="..."/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
2. Convertidor de tipos
Referencias:
2.1 El concepto de convertidor
Los convertidores de valor a menudo se usan junto con el enlace de datos para convertir datos personalizados entre diferentes tipos y mostrarlos en la interfaz de usuario enlazada. Los convertidores de datos de WPF deben implementar la interfaz IValueConverter o la interfaz IMultiValueConverter (enlace multidireccional). Solo es necesario implementar dos métodos: Convert() y ConvertBack() se utilizan para convertir el valor al formato de destino y viceversa.
namespace System.Windows.Data
{
public interface IValueConverter
{
// 摘要: 数据绑定引擎在将值从绑定源传播到绑定目标时会调用此方法，即源属性传给目标属性时
// 参数:
// value: 绑定源生成的值。
// targetType: 绑定目标属性的类型。
// parameter: 要使用的转换器参数。
// culture: 要用在转换器中的区域化/国际化信息。
// 返回结果:
// 转换后的值。 如果该方法返回 null，则使用有效的 null 值。
object Convert(object value, Type targetType, object parameter, CultureInfo culture);
// 摘要: 数据绑定引擎在将值从绑定目标传播到绑定源时调用此方法，此方法的实现必须是Convert方法的反向实现。
// 参数:
// value: 绑定源生成的值。
// targetType: 绑定目标属性的类型。
// parameter: 要使用的转换器参数。
// culture: 要用在转换器中的区域化/国际化信息。
// 返回结果:
// 转换后的值。 如果该方法返回 null，则使用有效的 null 值。
object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture);
}
}
2.2 Ejemplo de implementación del convertidor
Fondo: vincule la cadena, convierta automáticamente el color correspondiente y muéstrelo en la interfaz de usuario, la implementación específica es la siguiente
(1) Implementación del convertidor
namespace WPF_Demo.Convert
{
[ValueConversion(typeof(string), typeof(SolidColorBrush))]
class DemoConvert : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
string str = value.ToString().ToLower();
if (str.Equals("x-red"))
{
return new SolidColorBrush(Color.FromRgb(222, 32,37));
}else if (str.Equals("x-blue"))
{
return new SolidColorBrush(Color.FromRgb(19, 21, 190));
}
return new SolidColorBrush(Color.FromRgb(0, 0, 0));
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
}
(2) Uso de la interfaz XAML
- Introduzca el espacio de nombres Convert: xmlns:cv="clr-namespace:WPF_Demo.Converts"
- Agregar recurso de ventana: <cv:StringToColorConvert x:Key="bgCV"/>
- Conversión de datos vinculantes: Background="{Binding} ElementName=txt,Path=Text,Converter={StaticResource bgCV}}"
<Window x:Class="WPF_Demo.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:WPF_Demo"
xmlns:cv="clr-namespace:WPF_Demo.Converts"
mc:Ignorable="d"
Title="MainWindow" Height="250" Width="400">
<Window.Resources>
<cv:StringToColorConvert x:Key="bgCV"/>
</Window.Resources>
<StackPanel Margin="10">
<TextBox x:Name="txt" Margin="10" Text="x-blue"/>
<TextBlock Height="50" Margin="10" Background="{Binding ElementName=txt,Path=Text,Converter={StaticResource bgCV}}"/>
</StackPanel>
</Window>
3. Introducción al diseño básico
Atributos adicionales de diseño comunes para elementos secundarios de diseño:
- VerticalAlignment: esta propiedad se utiliza para obtener o establecer las características de alineación vertical que se aplican al combinar este elemento en un elemento principal (como un panel o un control de elemento)
- HorizontalAlignment: esta propiedad se utiliza para obtener o establecer las características de alineación horizontal que se aplican al combinar este elemento en un elemento principal (como un panel o un control de elemento)
1 diseño de pila StackPanel
(1) Concepto: StackPanel es un diseño de pila, que organiza sus elementos secundarios en una fila horizontal o vertical. StackPanel contiene una colección de objetos UIElement (una colección de elementos secundarios), que se encuentran en la propiedad Children.
- Orientation : 获取或设置一个值，该值指示子元素的堆叠维度(方向)，其中 Horizontal水平，Vertical垂直
- Children : 获取此Panel的 UIElementCollection 子元素集合(继承自 Panel)
- CanVerticallyScroll : 获取或设置一个值，该值指示内容能否垂直滚动。
- CanHorizontallyScroll : 获取或设置一个值，该值指示 StackPanel 能否水平滚动。
<Window x:Class="WpfTutorialSamples.Panels.StackPanel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="StackPanel" Height="160" Width="300">
<StackPanel Orientation="Horizontal">
<Button VerticalAlignment="Top">Button 1</Button>
<Button VerticalAlignment="Center">Button 2</Button>
<Button VerticalAlignment="Bottom">Button 3</Button>
<Button VerticalAlignment="Bottom">Button 4</Button>
<Button VerticalAlignment="Center">Button 5</Button>
<Button VerticalAlignment="Top">Button 6</Button>
</StackPanel>
</Window>
(2) Desplazamiento: StackPanel no proporciona desplazamiento físico del contenido de forma predeterminada. Si se requiere desplazamiento físico en lugar de desplazamiento lógico, ajuste el elemento StackPanel en un control ScrollViewer y establezca su propiedad CanContentScroll en
false.
2 Diseño de cuadrícula
(1) Concepto: Cuadrícula es un diseño de cuadrícula que se utiliza para definir un área de cuadrícula flexible compuesta de columnas y filas. Grid contiene una colección de objetos UIElement (una colección de elementos secundarios), que se encuentran en la propiedad Children. Los elementos secundarios de la cuadrícula se dibujan en el orden que se muestra en el marcado o el código. , por lo que se puede lograr un orden de visualización jerárquico (también conocido como orden z) cuando los elementos comparten las mismas coordenadas.
- Children : 获取此Panel的 UIElementCollection 子元素集合(继承自 Panel)
- ColumnDefinitions : 获取在 Grid 的实例上定义的 ColumnDefinitionCollection 列的定义信息集合
- ColumnDefinition : 定义将应用于 Grid 元素的特定于列的属性，每个 ColumnDefinition 都成为表示最终网格布局中的列的占位符。
- Width : 获取或设置 ColumnDefinition 定义的列的宽度值， GridLength 对象
- 单位（Star） * : 占用剩余的空间按比例划分，宽度2*是1*的两倍
- 单位（Auto） Auto : 该大小由内容对象元素的大小属性确定
- 单位（Pixel） 像素绝对值 : 该值表示为一个绝对的像素值
- RowDefinitions : 获取在 Grid 的实例上定义的 RowDefinitionCollection 行的定义信息集合，
- RowDefinition : 定义将应用于 Grid 元素的特定于行的属性， 每个 RowDefinition 都成为表示最终网格布局中的行的占位符。
- Height : 获取或设置 RowDefinition 定义的行的高度值， GridLength 对象
- 单位（Star） * : 占用剩余的空间按比例划分，宽度2*是1*的两倍
- 单位（Auto） Auto : 该大小由内容对象元素的大小属性确定
- 单位（Pixel） 像素绝对值 : 该值表示为一个绝对的像素值
- ShowGridLines : 获取或设置一个值，该值指示网格线在此 Grid 中是否可见
(2) Atributo adjunto (Adjunto): Un atributo adjunto es un atributo de dependencia especial para una clase que no define el atributo. Por ejemplo, definición de fila, definición de columna del panel de cuadrícula, panel izquierdo y derecho del lienzo, etc.
- Column : 获取或设置一个值，该值表示 Grid 中的子内容所在的列，从0开始下同
- ColumnSpan : 获取或设置一个值，该值指示 Grid 中的子内容所跨越的总列数。默认1
- Row : 获取或设置一个值，该值表示 Grid 中的子内容所在的行
- RowSpan : 获取或设置一个值，该值表示在一个 Grid 中子内容所跨越的总行数。默认1
<Window x:Class="WpfTutorialSamples.Panels.GridColRowSpan"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="GridColRowSpan" Height="110" Width="300">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button>Button 1</Button>
<Button Grid.Column="1">Button 2</Button>
<Button Grid.Row="1" Grid.ColumnSpan="2">Button 3</Button>
</Grid>
</Window>
3 Lienzo Lienzo
Canvas hereda de Controls.Panel y se usa para definir un área en la que los elementos secundarios se pueden colocar explícitamente usando coordenadas relativas al área de Canvas . Las características de Canvas son las siguientes:
(1) El valor predeterminado de las propiedades Alto y Ancho de Canvas es 0. Si no establece estos valores, no verá el lienzo a menos que los elementos secundarios cambien de tamaño automáticamente.
(2) Los elementos secundarios en el lienzo nunca cambian de tamaño (a medida que cambia el formulario), solo se colocan en las coordenadas especificadas. Cuando desee ajustar y alinear automáticamente el contenido secundario, es mejor utilizar el elemento Grid .
(3) La alineación vertical y horizontal en elementos secundarios no funciona. Los elementos secundarios solo se colocan en las posiciones establecidas por las propiedades Canvas Left, Top, Right e Bottom.
(4) Prioridad de posición: si se establece la propiedad Izquierda del lienzo, la propiedad Derecha no tendrá efecto. Si se establece la propiedad Superior del lienzo, la propiedad Inferior no tendrá efecto.
- 属性：
- Children : 获取此Panel的 UIElementCollection 子元素集合(继承自 Panel)
- Width： 获取或设置元素的宽度。(继承自 FrameworkElement)
- Height： 获取或设置元素的建议高度。(继承自 FrameworkElement)
- 附加属性：
- Bottom：获取或设置一个值，该值表示元素底部与其父 Canvas 底部之间的相对距离。（单位是像素）
- Left：获取或设置一个值，该值表示元素左侧与其父 Canvas 左侧之间的距离。
- Right：获取或设置一个值，该值表示元素右侧与其父 Canvas 右侧之间的距离。
- Top：获取或设置一个值，该值表示元素顶部与其父 Canvas 顶部之间的距离。
- Panel.ZIndex:获取或设置一个值，该值表示元素在 Z 平面中的显示顺序(上下深度顺序/层叠顺序）
- ZIndex值越大显示优先级越高，允许负值，ZIndex的最大值为32766，默认值为0)。
- 相同ZIndex则按照绘制/添加顺序，依次覆盖显示
<!--Canvas实例：XAML版本-->
<Window x:Class="WPF_Demo.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:WPF_Demo"
xmlns:vm="clr-namespace:WPF_Demo.Status"
xmlns:cm="clr-namespace:WPF_Demo.Commands"
mc:Ignorable="d"
Title="MainWindow" Height="275" Width="260">
<Canvas>
<Ellipse Fill="Gainsboro" Canvas.Left="25" Canvas.Top="25" Width="200" Height="200" />
<Rectangle Fill="LightBlue" Panel.ZIndex="1" Canvas.Left="25" Canvas.Top="25" Width="50" Height="50" />
<Rectangle Fill="LightCoral" Canvas.Left="50" Canvas.Top="50" Width="50" Height="50" />
<Rectangle Fill="LightCyan" Panel.ZIndex="2" Canvas.Left="75" Canvas.Top="75" Width="50" Height="50" />
</Canvas>
</Window>
//Canvas实例：代码版本
namespace WPF_Demo
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
//1.添加Ellipse对象
Ellipse ellipse = new Ellipse();
ellipse.Fill = new SolidColorBrush(Colors.Gainsboro);
ellipse.Width = 200;
ellipse.Height = 200;
//Set Canvas position
Canvas.SetLeft(ellipse, 25);
Canvas.SetTop(ellipse, 25);
//Add Ellips to Canvas
this.canvas.Children.Add(ellipse);
//2.添加Rectangle对象1
Rectangle Red_rectangle = new Rectangle();
Red_rectangle.Fill = new SolidColorBrush(Colors.Red);
Red_rectangle.Width = 50;
Red_rectangle.Height = 50;
//Set Canvas position
Canvas.SetLeft(Red_rectangle, 25);
Canvas.SetTop(Red_rectangle, 25);
Panel.SetZIndex(Red_rectangle, 1);
//Add Ellips to Canvas
this.canvas.Children.Add(Red_rectangle);
//3.添加Rectangle对象2
Rectangle Green_rectangle = new Rectangle();
Green_rectangle.Fill = new SolidColorBrush(Colors.Green);
Green_rectangle.Width = 50;
Green_rectangle.Height = 50;
//Set Canvas position
Canvas.SetLeft(Green_rectangle, 50);
Canvas.SetTop(Green_rectangle, 50);
//Add Ellips to Canvas
this.canvas.Children.Add(Green_rectangle);
//4.添加Rectangle对象3
Rectangle Yello_rectangle = new Rectangle();
Yello_rectangle.Fill = new SolidColorBrush(Colors.Yellow);
Yello_rectangle.Width = 50;
Yello_rectangle.Height = 50;
//Set Canvas position
Canvas.SetLeft(Yello_rectangle, 75);
Canvas.SetTop(Yello_rectangle, 75);
Panel.SetZIndex(Yello_rectangle, 2);
//Add Ellips to Canvas
this.canvas.Children.Add(Yello_rectangle);
}
}
}