WPF 01 - 技术栈

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