xaml是声明性语言
每见到一个标签,就意味着xaml为我们声明一个标签对应的对象。
在XAML中为对象属性赋值
1. Attribute=Value形式
<Grid>
<Rectangle Width="100" Height="80" Stroke="Black" Fill="Blue" RadiusX="10" RadiusY="10"></Rectangle>
</Grid>
缺点:没办法赋非常复杂的值
可以赋最复杂的值如下:
<Path Data="M 0, 0 L 200, 100 L 100, 200 Z" Stroke="Black" Fill="Red"/>
画出来的是一个三角形
转换类型方式
MainWindow.xaml
<Window x:Class="HelloWPF.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:HelloWPF"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<local:Human x:Key="human" Child="LittleTim"/>
<!--<local:Human x:Key="human" Name="Tim"/>-->
</Window.Resources>
<Grid>
<Button Content="Show!" Width="120" Height="30" Click="Button_Click"/>
</Grid>
</Window>
MainWindow.xaml.cs
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Globalization;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace HelloWPF
{
/// <summary>
/// MainWindow.xaml 的交互逻辑
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
Human h = this.FindResource("human") as Human;
if (h != null)
{
MessageBox.Show(h.Child.Name);
}
}
}
[TypeConverterAttribute(typeof(NameToHumanTypeConverter))]
public class Human
{
public string Name { get; set; }
public Human Child { get; set; }
}
public class NameToHumanTypeConverter : TypeConverter
{
public override object ConvertFrom(ITypeDescriptorContext context, CultureInfo culture, object value)
{
string name = value.ToString();
Human child = new Human();
child.Name = name;
return child;
}
}
}
2. 属性标签
属性标签是由类名+点+属性名构成的
<Grid>
<Button Width="120" Height="30">
<!--Content-->
<Button.Content>
<Rectangle Width="20" Height="20" Stroke="DarkBlue" Fill="LawnGreen"/>
</Button.Content>
</Button>
</Grid>
a. 渐变背景实现例子
复杂方法
<Grid>
<Rectangle Width="200" Height="160" Stroke="Blue">
<Rectangle.Fill>
<LinearGradientBrush>
<LinearGradientBrush.StartPoint>
<Point X="0" Y="0"/>
</LinearGradientBrush.StartPoint>
<LinearGradientBrush.EndPoint>
<Point X="1" Y="1"/>
</LinearGradientBrush.EndPoint>
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Offset="0.2" Color="LightBlue"/>
<GradientStop Offset="0.7" Color="DarkBlue"/>
<GradientStop Offset="1.0" Color="Blue"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
简化方法
<Grid>
<Rectangle Width="200" Height="160" Stroke="Blue">
<Rectangle.Fill>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.2" Color="LightBlue"/>
<GradientStop Offset="0.7" Color="DarkBlue"/>
<GradientStop Offset="1.0" Color="Blue"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
3. 标签扩展
例1
<Window x:Class="HelloWPF.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:HelloWPF"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<sys:String x:Key="stringHello">Hello WPF!</sys:String>
</Window.Resources>
<Grid>
<TextBlock Height="24" Width="120" Background="LightBlue"
Text="{StaticResource ResourceKey=stringHello}" />
</Grid>
</Window>
例2
<Grid Margin="4">
<Grid.RowDefinitions>
<RowDefinition Height="24"/>
<RowDefinition Height="4"/>
<RowDefinition Height="24"/>
</Grid.RowDefinitions>
<TextBlock x:Name="tb" Text="{Binding ElementName=sld, Path=Value}"/>
<Slider x:Name="sld" Grid.Row="2" Value="50" Minimum="0" Maximum="100"/>
</Grid>
事件处理器与代码后置
导入程序集和引用其中的名称空间
MainWindow.xaml
<Window x:Class="HelloWPF.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:HelloWPF"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:controls="clr-namespace:ControlLibrary;assembly=ControlLibrary"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid Margin="4">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<controls:SalaryCalculator Grid.Column="0" Grid.Row="0"/>
<controls:SalaryCalculator Grid.Column="1" Grid.Row="0"/>
<controls:SalaryCalculator Grid.Column="0" Grid.Row="1"/>
<controls:SalaryCalculator Grid.Column="1" Grid.Row="1"/>
</Grid>
</Window>
SalaryCalculator.xaml
<UserControl x:Class="ControlLibrary.SalaryCalculator"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="240" Height="160" Background="LightBlue">
<Canvas>
<Label Content="基本工资:" Canvas.Left="12" Canvas.Top="12" Height="28" Name="label1"/>
<Label Content="实际工资:" Canvas.Left="12" Canvas.Top="50" Height="28" Name="label2"/>
<Label Content="岗位工资:" Canvas.Left="12" Canvas.Top="83" Height="28" Name="label3"/>
<TextBox Height="23" Canvas.Left="87" TextWrapping="Wrap" Canvas.Top="12" Width="120" Name="textBox1"/>
<TextBox Height="23" Canvas.Left="87" TextWrapping="Wrap" Canvas.Top="50" Width="120" Name="textBox2"/>
<TextBox Height="23" Canvas.Left="87" TextWrapping="Wrap" Canvas.Top="83" Width="120" Name="textBox3"/>
<Button Content="计算" Canvas.Left="87" Canvas.Top="121" Width="120" Click="Button_Click"/>
</Canvas>
</UserControl>
XAML的注释
ctrl+k+c ctrl+k+u