C# - WPF基础入门

最后更新时间：2023年01月31日

C# - WPF基础入门

WPF基础入门

Visual Studio Installer —— .NET桌面开发

新建项目

WPF应用程序

GUI用户界面

XAML实例（Hello World）—— MainWindow.xaml

<Window x:Class="_00WpfApp1.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:_00WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="492,0,0,0" TextWrapping="Wrap" Text="Hello World" VerticalAlignment="Center"/>

    </Grid>
</Window>

亦可在配套的CS文件中写控件 —— MainWindow.xaml.cs

using System;
using System.Collections.Generic;
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 _00WpfApp1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            var grid = (Grid)this.Content;
            Button button = new Button();
            button.Height = 50;
            button.Width = 600;
            Margin = new Thickness(0,0,700,385);
            button.Content = "在CS文件中写button";
            grid.Children.Add(button);
        }
    }
}

MVC架构

什么是MVC

  • 软件工程的架构方式。
  • 模型（Model）、视图（View）和 控制器（Controller）。
  • 分离业务操作、数据显示、逻辑控制。

视图（View）

  • 用户交互界面
  • 仅展示数据，不处理数据
  • 接收用户输入

模型（Model）

  • MVC架构的核心
  • 表示业务模型或数据模型
  • 业务逻辑，如算法实现、数据的管理、输出对象的封装等

控制器（Controller）

  • 接受用户的输入，并调用模型和视图去完成用户的请求处理
  • 不处理数据
  • 返回视图、显示数据

MVC架构的数据是如何流动？

MVC vs 三层架构

  • 三层架构面向接口编程，而三个层级之间的完全解耦、完全可替换。
  • MVC的每个部分都是紧密结合的，它的核心并不是解耦，而是重用。

MVC架构（平级的）

MVC的优点

  • 耦合性低
  • 可复用性高
  • 可维护性高

MVC的缺点

  • 定义不明确，学习曲线陡
  • 结构复杂
  • 数据流动效率低

UI控件 —— StackPanel 与 ListBox

实例

<Window x:Class="_01StackPanel.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:_01StackPanel"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel>
        <TextBlock HorizontalAlignment="Center" Margin="20">StackPanel</TextBlock>
        <ListBox Height="100" Width="400">
            <ListBoxItem Content="item 1"></ListBoxItem>
            <ListBoxItem Content="item 2"></ListBoxItem>
            <ListBoxItem Content="item 3"></ListBoxItem>
            <ListBoxItem Content="item 4"></ListBoxItem>
        </ListBox>
    </StackPanel>
</Window>

WPF的视觉原理 —— 逻辑树与视觉树

Grid网格系统

<Window x:Class="_02Grid.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:_02Grid"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width ="*"></ColumnDefinition>
            <ColumnDefinition Width ="*"></ColumnDefinition>
            <ColumnDefinition Width ="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Button Grid.Column="0">00000.0000000000</Button>
        <Button Grid.Column="1">111111.1111111111</Button>
        <Button Grid.Row="1" Grid.Column="1">Row1RowRowRowRow</Button>
        <Button Grid.Row="1" Grid.Column="0">Row2Row2Row2Row2Row2</Button>
        <TextBlock Grid.Row="2" Grid.Column="1" HorizontalAlignment="Center" Margin="50">Grid.Row="2" Grid.Column="1"</TextBlock>
    </Grid>
</Window>

属性依赖 与 数据处理

  1. 单向绑定 one way bining : Source -> Target
  2. 双向绑定 two way bining : Source <-> Target
  3. 指定方向单向绑定 oneWayToSource Target -> Source
  4. 单次绑定 One Time -> 构造方法中单次执行

实例

MainWindow.xaml

<Window x:Class="WpfApp.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:WpfApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
        <!--
        1. 单向绑定 one way bining : Source -> Target
        2. 双向绑定 two way bining : Source <-> Target
        3. 指定方向单向绑定 oneWayToSource Target -> Source
        4. 单次绑定 One Time -> 构造方法中单次执行
        -->
    <StackPanel>
        <TextBox Name="myTextBox" Width="100" Margin="50" Text="{Binding ElementName=mySlider, Path=Value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"></TextBox>
        <Slider Name="mySlider" Minimum="0" Maximum="100" IsSnapToTickEnabled="True"></Slider>
    </StackPanel>
</Window>

MainWindow.xaml.cs

namespace WpfApp
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            mySlider.Value = 35;
            myTextBox.Text = mySlider.Value.ToString();
        }

    }
}

调试

INotifyPropertyChanged事件处理

实例 —— 加法计算

调试

### MainWindow.xaml

<Window x:Class="WpfApp.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:WpfApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel>
        <Label Content="number 1"></Label>
        <TextBox Width="200" Margin="30" Text="{Binding Path=Num1, Mode=TwoWay}"></TextBox>
        <Label Content="number 2"></Label>
        <TextBox Width="200" Margin="30" Text="{Binding Path=Num2, Mode=TwoWay}"></TextBox>
        <Label Content="Resule"></Label>
        <TextBox Width="200" Margin="30" Text="{Binding Path=Result, Mode=TwoWay}"></TextBox>
    </StackPanel>
</Window>

MainWindow.xaml.cs

using System;

namespace WpfApp
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public Sum Sum { get; set; }

        public MainWindow()
        {
            InitializeComponent();
            Sum = new Sum() { Num1 = "1", Num2 = "2" };
            this.DataContext = Sum;
        }

    }
}

Sum.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace WpfApp
{
    public class Sum : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        private void OnPropertyChanged(string property)
        {
            if (PropertyChanged == null)
            {
                return;
            }
            PropertyChanged(this, new PropertyChangedEventArgs(property));
        }

        private string _num1;
        private string _num2;
        private string _result;

        public string Num1
        {
            get
            {
                return _num1;
            }
            set
            {
                int number;
                bool result = int.TryParse(value, out number);
                if(result)
                {
                    _num1 = value;
                    OnPropertyChanged("Num1");
                    OnPropertyChanged("Result");
                }
            }
        }

        public string Num2
        {
            get
            {
                return _num2;
            }
            set
            {
                int number;
                bool result = int.TryParse(value, out number);
                if (result)
                {
                    _num2 = value;
                    OnPropertyChanged("Num2");
                    OnPropertyChanged("Result");
                }
            }
        }

        public string Result
        {
            get
            {
                int result = int.Parse(_num1) + int.Parse(_num2);
                return result.ToString();
            }
            set
            {
                int result = int.Parse(_num1) + int.Parse(_num2);
                _result = result.ToString();
                OnPropertyChanged("Result");
            }
        }
    }
}

声明：三二一的一的二|版权所有，违者必究|如未注明，均为原创|本网站采用BY-NC-SA协议进行授权

转载：转载请注明原文链接 - C# - WPF基础入门

三二一的一的二