网络知识 娱乐 WPF从零到1教程详解,适合新手上路

WPF从零到1教程详解,适合新手上路

发布: 2023年2月14日 10:17:50

视频相关链接:https://www.bilibili.com/video/BV1iY411w7zD

Windows Presentation Foundation (简称 WPF)

WPF的概述：

WPF 的核心是一个与分辨率无关且基于矢量的呈现引擎，旨在充分利用现代图形硬件。 WPF 通过一套完善的应用程序开发功能对该核心进行了扩展，这些功能包括可扩展应用程序标记语言 (XAML)、控件、数据绑定、布局、二维和三维图形、动画、样式、模板、文档、媒体、文本和版式。 WPF 属于 .NET，因此可以生成整合 .NET API 其他元素的应用程序。

简介：

Windows用户界面框架,统一的编程模型、语言和框架，做到了界面设计与后端开发分离。

特点：

1.呈现效果不受分辨率的影响
2.基于DirectX 3d技术，可以做出炫酷的界面
3.提供UI框架，集成了矢量图形、流动文字支持、3d视觉效果和控件模型框架、
4. UI与业务逻辑彻底分离，UI-XAML描述(底层wpf引擎是把元素解释成对应的对象)
5. xp server2003 到 window7及以后的操作系统版本 都可以支持
6.基于数据驱动，数据是核心

学习前提:

基础：首先我们需要先入门C# / VB

开发工具： Visual Studio 2019

（下载链接： https://pan.baidu.com/s/1uMH8C2rg5T8pNXrObXddXw 提取码: hatd ）

框架环境: .net core 3.1 或者.net framework4.0+

所有控件：

System.Windows.Controls (程序集：PresentationFramework.dll)
文档地址：https://docs.microsoft.com/zh-cn/dotnet/api/system.windows.controls?view=windowsdesktop-6.0
Label （表示控件的文本标签，并提供访问密钥支持。）TextBox(显示或编辑无格式文本)TextBlock(一个轻型控件，用于显示少量流内容)
Border （边框控件 ，作用
在另一个元素四周绘制边框和/或背景）		Button（按钮控件）Calendar （日历控件）
CheckBox（选择框）ComboBox （下拉框）Image (图片控件)
Menu（菜单）ContextMenu（内容菜单)RadioButton(表示可由用户选择但不能清除的按钮,代码能清除)
DataGrid（数据网格–Table）ListBox（包含可选项列表）ListView（表示用于显示数据项列表的控件）
DockPanel(定义一个区域，从中可以按相对位置水平或垂直排列各个子元素。)—码头;港区Grid(定义由列和行组成的灵活的网格区域。)GroupBox(组控件—
表示一个控件，该控件用于创建具有用户界面 (UI) 内容边框和标题的容器。)
PrintDialog（调用标准的 Microsoft Windows 打印对话框）ProgressBar(指示操作进度)Canvas （画布控件）
RichTextBox(表示对 FlowDocument 对象进行操作的丰富编辑控件)ToolBar(一组命令或控件提供容器)Expander（折叠控件）
表示一种控件，该控件显示具有可折叠内容显示窗口的标题。
TabControl(表示包含多个项的控件，这些项共享屏幕上的同一空间)Frame（一种支持导航的内容控件）Rectangle(矩形区域)
StackPanel(将子元素排列成水平或垂直的一行。)WrapPanel (按从左到右的顺序位置定位子元素，在包含框的边缘处将内容切换到下一行。)

file

什么是 XAML

XAML 是一种声明性标记语言。 应用于 .NET Core 编程模型时，XAML 简化了为 .NET Core 应用创建 UI 的过程。 XAML 文件是通常具有 .xaml 扩展名的 XML 文件。 可通过任何 XML 编码对文件进行编码，但通常以 UTF-8 编码。

<StackPanel>
    <Button Content="Click Me"/>
</StackPanel>

对象元素语法

对象元素语法 是 XAML 标记语法，它通过声明 XML 元素来实例化 CLR 类或结构。 此语法类似于其他标记语言（如 HTML）的元素语法。

  • 单标签格式。 。
  • 双标签格式。 【可嵌入其他的标签】

XAML 根元素

一个 XAML 文件只能有一个根元素，这样才能同时作为格式正确的 XML 文件和有效的 XAML 文件。 对于典型 WPF 方案，可使用在 WPF 应用模型中具有突出意义的根元素（例如，页面的 Window 或 Page）。

在根标签下面有且只能有一个二级标签。在二级标签里面我们可以写多个三级 四级标签。

<Window>

<【布局标签】>
  【其他标签....】
</【布局标签】>

</Window>

<Page>
    <Window.Resources>
      ....
    </Window.Resources>
  
<【布局标签】>
  【其他标签....】
</【布局标签】>

</Page>

WPF 和 XAML 命名空间声明

在许多 XAML 文件的根标记中的命名空间声明内，通常可看到两个 XML 命名空间声明。 第一个声明默认映射整个 WPF 客户端/框架 XAML 命名空间：
xmlns=“http://schemas.microsoft.com/winfx/2006/xaml/presentation”

第二个声明映射单独的 XAML 命名空间，（通常）将其映射到 x: 前缀。
xmlns:x=“http://schemas.microsoft.com/winfx/2006/xaml”
这些声明之间的关系是 x: 前缀映射支持作为 xaml 语言定义一部分的内部函数，而 WPF 是一种将 xaml 用作语言的实现，并为 xaml 定义了其对象的词汇。

<Window x:Class="MyWpfApp.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:MyWpfApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800"
        >
//d  表达式
//mc 标记兼容性   

    <【布局标签】 >
  
    </【布局标签】>
 

</Window>

(CLR指的是公共语言运行库）

课程目标

前六章的课程目标：

实现一个可移动的方块盒子:

移动方块.gif

<Window x:Class="Ken.Wpf.移动方块.WindowMoveBox"
        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:Ken.Wpf.移动方块"
        mc:Ignorable="d"
        Title="WindowMoveBox" Height="450" Width="800" KeyDown="Grid_KeyDown">
    <Grid ShowGridLines="True" Background="Teal" Name="gridContent">

        
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>

        
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

        <Border Name="b1"  Background="Transparent" Grid.Row="0" Grid.Column="0"></Border>
        <Border Name="b2" Background="White" Grid.Row="0" Grid.Column="1"></Border>
        <Border Name="b3"  Background="Transparent" Grid.Row="0" Grid.Column="2"></Border>


        <Border Name="b4"  Background="Transparent" Grid.Row="1" Grid.Column="0"></Border>
        <Border Name="b5" Background="Transparent" Grid.Row="1" Grid.Column="1"></Border>
        <Border Name="b6"  Background="Transparent" Grid.Row="1" Grid.Column="2"></Border>


        <Border Name="b7"  Background="Transparent" Grid.Row="2" Grid.Column="0"></Border>
        <Border Name="b8" Background="Transparent" Grid.Row="2" Grid.Column="1"></Border>
        <Border Name="b9" Background="Transparent" Grid.Row="2" Grid.Column="2"></Border>
    </Grid>
</Window>



        private void Grid_KeyDown(object sender, KeyEventArgs e)
        {
            //首先判断按键的方位 比如上下左右

            //向上移动 移到格子每次减3  向下移动  移到格子每次加3
            //向左移动  每次减1  向右移动 每次加1

            //获取白色的border元素

            UIElementCollection children = gridContent.Children;

            Border curBorder =null;
            for (int i = 0; i = 1 ? index - 3 : index;
            }
            else if (e.Key.Equals(Key.Down))//下
            {
                index = index + 3 = 1 ? index - 1 : index;
            }
            else if (e.Key.Equals(Key.Right))//右
            {
                index = index +1 <=9 ? index +1 : index;
            }

            object control = gridContent.FindName("b" + index);

            if (control != null)
            {
                (control as Border).Background = new SolidColorBrush(Colors.White);
            }
        }

【后期】展示列表、新增/编辑页面（涉及到数据库）

file

file

【后期】模仿界面

file

控件篇：

继承关系

file

对象：System.Windows.FrameworkElement
属性
属性名对象类型作用
Widthdouble获取或设置元素的宽度。【(元素的高度（以 与设备无关的单位（每个单位 1/96 英寸） 为单位）。 )】
Heightdouble获取或设置元素的高度。【元素的高度（以 与设备无关的单位（每个单位 1/96 英寸） 为单位）。 】
ActualWidthdouble获取此元素的呈现的宽度。
ActualHeightdouble获取此元素的呈现的高度。
Namestring获取或设置元素的标识名称。 该名称提供引用，以便代码隐藏（如事件处理程序代码）可以引用标记元素（在 XAML 处理器的处理过程中构造该元素之后）。
StyleStyle获取或设置此元素呈现时所使用的样式。
MarginThickness获取或设置元素的外边距。
HorizontalAlignmentHorizontalAlignment获取或设置在父元素(如 Panel 或项控件)中组合此元素时所应用的水平对齐特征。【水平对齐设置，它是一个枚举值。】
VerticalAlignmentVerticalAlignment获取或设置在父元素（如面板或项控件）中组合此元素时所应用的垂直对齐特征。
FocusVisualStyleStyle获取或设置一个属性，该属性允许自定义此元素在捕获到键盘焦点时要应用于此元素的外观、效果或其他样式特征。
FlowDirectionFlowDirection获取或设置方向，文本和其他 用户界面 (UI) 元素在任何控制其布局的父元素中都按此方向流动。
DataContextobject获取或设置元素参与数据绑定时的数据上下文。
ResourcesResourceDictionary获取或设置本地定义的资源字典。
方法
方法名参数作用
BringIntoView
尝试将此元素放入视图，它包含在任何可滚动区域内。
BringIntoView(Rect targetRectangle)指定也放入视图的元素的大小。(targetRectangle)尝试将放入视图，它包含在任何可滚动区域内的此元素提供的区域大小。
FindName(string name)所请求元素的名称（name）查找具有提供的标识符名的元素。
FindResource(object resourceKey)所请求的资源键标识符（resourceKey）搜索具有指定键的资源并在引发异常，如果找不到所请求的资源。
事件
事件名称
作用
Loaded
当对元素进行布局、呈现，且可将其用于交互时发生。
KeyDown
当焦点在该元素上时按下某个键后发生。
GotFocus
在此元素获得逻辑焦点时发生
MouseDown
在指针位于此元素上并且按下任意鼠标按钮时发生。
MouseMove
在鼠标指针位于此元素上并且移动鼠标指针时发生。
Click控件的点击事件

控件分类

内容控件、文本控件、条目控件、布局控件、其它控件

内容控件
（System.Windows.Controls.ContentControl）
System.Windows.Controls.Label
System.Windows.Controls.TextBlock继承自FrameworkElement类
System.Windows.Controls.Button
System.Windows.Controls.Border继承自Decorator类
System.Windows.Controls.RadioButton
System.Windows.Controls.CheckBox
System.Windows.Controls.ToolTip
System.Windows.Controls.GroupBox
System.Windows.Controls.Expander
System.Windows.Controls.Frame
文本控件
（System.Windows.Controls.TextBoxBase）
System.Windows.Controls.TextBox
System.Windows.Controls.RichTextBox
条目控件
(System.Windows.Controls.ItemsControl)
System.Windows.Controls.ComboBox
System.Windows.Controls.Menu
System.Windows.Controls.ContextMenu
System.Windows.Controls.TabControl
System.Windows.Controls.ToolBar
System.Windows.Controls.ToolBarTray
System.Windows.Controls.ListBox
System.Windows.Controls.DataGrid
System.Windows.Controls.TreeView
布局控件
(System.Windows.Controls.Panel)
System.Windows.Controls.Grid
System.Windows.Controls.StackPanel
System.Windows.Controls.DockPanel
System.Windows.Controls.WrapPanel
System.Windows.Controls.Canvas
其他控件
System.Windows.Controls.Calendar
System.Windows.Controls.Image
System.Windows.Controls.ProgressBar
System.Windows.Shapes.Rectangle

代码区域

公共工具类

using Ken.Wpf.Entity;
using System;
using System.Collections.Generic;
using System.Text;
using System.Windows.Media;

namespace Ken.Wpf.Utils
{
    public class MenuHelper
    {

        public static List<MenuInfo> CreateMenus()
        {
            List<MenuInfo> menus = new List<MenuInfo>();

            MenuInfo m1 = new MenuInfo("出入库管理",null);
            MenuInfo m2 = new MenuInfo("请假管理", null);
            MenuInfo m3 = new MenuInfo("考勤管理",null);

            MenuInfo m3_1 = new MenuInfo("日报管理", m3);
            MenuInfo m3_2 = new MenuInfo("请假管理", m3);

            MenuInfo m4 = new MenuInfo("商品管理",null);
            MenuInfo m4_1 = new MenuInfo("单位管理", m4);
            MenuInfo m4_2 = new MenuInfo("类别管理", m4);

            menus.Add(m1);
            menus.Add(m2);
            menus.Add(m3);
            menus.Add(m4);
            return menus;
        }
    }
}

Label的演示代码

    
        <Label  Width="180" Height="30" Content="我是个label控件" 
                HorizontalAlignment="Right" 
                VerticalAlignment="Top" Margin="0,10" FontSize="18" Foreground="Blue"/>

TextBlock的演示代码


        
        <TextBlock  Text="我是个TextBlock33" FontSize="30" FontWeight="Light" Foreground="Red">
            我是文本一<LineBreak/>
            我是文本二<LineBreak/>
            我是文本三
        </TextBlock>

Button的演示代码

<Button Width="100" Height="30" HorizontalAlignment="Left" VerticalAlignment="Top"
        Content="我是个按钮" Margin="20,20,0,0" Background="Teal"
        BorderThickness="5,0,10,0" BorderBrush="Transparent" Foreground="White"
        Click="Button_Click_1"  MouseMove="Button_MouseMove"
          >

Border的演示效果

file

 
        <Border Width="200" Height="80" Background="LightBlue"
            BorderBrush="Red"  BorderThickness="1,1,2,1" CornerRadius="15">

            <!---->

            <Button Background="Transparent" FontSize="20" Foreground="White"
                    Content="我是个按钮" Click="Button_Click" BorderBrush="Transparent">
            </Button>
            
            <!--
                
                
            -->
            
        </Border>

RadioButton的演示效果

file


        <RadioButton Content="男" GroupName="sex"  Margin="10,100"  FontSize="20" Foreground="red" VerticalAlignment="Top" HorizontalAlignment="Left" ></RadioButton>
        <RadioButton Content="女" GroupName="sex" Margin="80,100"  FontSize="20" Foreground="red" VerticalAlignment="Top" HorizontalAlignment="Left" ></RadioButton>


        <RadioButton Content="语文" GroupName="course" FontSize="20" Foreground="Blue" VerticalAlignment="Top" HorizontalAlignment="Left" ></RadioButton>
        <RadioButton Content="数学"  GroupName="course" Margin="70,0" FontSize="20" Foreground="Blue" VerticalAlignment="Top" HorizontalAlignment="Left" ></RadioButton>
        <RadioButton

相关文章