Home

repost： C# WPF UI Tutorials: 01 - The Basics - YouTube

# Create WPF Project

Execute dotnet new wpf -o WPFBasics or in WPFBasics directory execute dotnet new wpf .

# Define Layout and Control in xaml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<Window x:Class="WPFBasics.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:WPFBasics" mc:Ignorable="d" Title="WPFBasics" Left="300" Top="0" Height="800" Width="400" Loaded="Window_Loaded">

    <Border Padding="10">
        <StackPanel>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <Button x:Name="ApplyButton" Click="ApplyButton_Click" Margin="0 0 10 0" Grid.Column="0" Content="Apply"/>
                <Button x:Name="ResetButton" Click="ResetButton_Click" Grid.Column="1" Content="Reset"/>
                <Button Margin="10 0 0 0" Grid.Column="2" Content="Refresh"/>
            </Grid>

            <TextBlock Text="Pulse Properties" FontWeight="Bold" Margin="0 10"/>
            <TextBlock Text="Description"/>
            <TextBox x:Name="DescriptionText" Padding="2"/>

            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="2*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <StackPanel Grid.Column="0" Margin="0 0 10 0">
                    <TextBlock Text="Status"/>
                    <TextBox IsReadOnly="True" Background="#eee" Padding="2"/>
                </StackPanel>

                <StackPanel Grid.Column="1">
                    <TextBlock Text="Revision"/>
                    <TextBox IsReadOnly="True" Background="#eee" Padding="2"/>
                </StackPanel>
            </Grid>

            <TextBlock Text="Part Number"/>
            <TextBox IsReadOnly="True" Background="#eee" Padding="2"/>

            <TextBlock Text="Raw Material" FontWeight="Bold" Margin="0 10"/>
            <TextBlock Text="Material"/>
            <ComboBox Padding="2"/>

            <TextBlock Text="Manufacturing Information" FontWeight="Bold" Margin="0 10"/>
            <TextBlock Text="Work Centres" Margin="0 0 0 10"/>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <StackPanel Grid.Column="0" Margin="0 0 10 0">
                    <CheckBox Checked="CheckBox_Checked" x:Name="WeldCheckBox" Content="Weld"/>
                    <CheckBox Checked="CheckBox_Checked" x:Name="AssemblyCheckBox" Content="Assembly"/>
                    <CheckBox Checked="CheckBox_Checked" x:Name="PlasmaCheckBox" Content="Plasma"/>
                    <CheckBox Checked="CheckBox_Checked" x:Name="LaserCheckBox" Content="Laser"/>
                    <CheckBox Checked="CheckBox_Checked" x:Name="PurchaseCheckBox" Content="Purchase"/>
                </StackPanel>

                <StackPanel Grid.Column="1">
                    <CheckBox Checked="CheckBox_Checked" x:Name="LatheCheckBox" Content="Lathe"/>
                    <CheckBox Checked="CheckBox_Checked" x:Name="DrillCheckBox" Content="Drill"/>
                    <CheckBox Checked="CheckBox_Checked" x:Name="FoldCheckBox" Content="Fold"/>
                    <CheckBox Checked="CheckBox_Checked" x:Name="RollCheckBox" Content="Roll"/>
                    <CheckBox Checked="CheckBox_Checked" x:Name="SawCheckBox" Content="Saw"/>
                </StackPanel>
            </Grid>

            <TextBlock Text="Length"/>
            <TextBox x:Name="LengthText" Padding="2"/>

            <TextBlock Text="Mass"/>
            <TextBox x:Name="MassText" IsReadOnly="True" Background="#eee" Padding="2"/>

            <TextBlock Text="Finish"/>
            <ComboBox x:Name="FinishDropdown" SelectionChanged="FinishDropdown_SelectionChanged" SelectedIndex="1" Padding="2">
                <ComboBoxItem>Painted</ComboBoxItem>
                <ComboBoxItem>No Painted</ComboBoxItem>
            </ComboBox>

            <TextBlock Text="Purchase Information"/>
            <ComboBox SelectedIndex="0" Padding="2">
                <ComboBoxItem>Rubber</ComboBoxItem>
                <ComboBoxItem>No Rubber</ComboBoxItem>
            </ComboBox>


            <TextBlock Text="Supplier Name"/>
            <TextBox x:Name="SupplierText" TextChanged="SupplierText_Changed" Padding="2"/>

            <TextBlock Text="Supplier Code"/>
            <TextBox Padding="2"/>

            <TextBlock Text="Additional Info" FontWeight="Bold" Margin="0 10"/>
            <TextBlock Text="Note"/>
            <TextBox x:Name="NoteText" Padding="2"/>

        </StackPanel>
    </Border>
</Window>

# Define Event and Logic in xaml.cs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
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 WPFBasics
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        
        public void ApplyButton_Click(Object sender, RoutedEventArgs e) {
            MessageBox.Show($"The description is: {this.DescriptionText.Text}");
        }


        public void ResetButton_Click(Object sender, RoutedEventArgs e) {
            this.WeldCheckBox.IsChecked =
            this.AssemblyCheckBox.IsChecked =
            this.PlasmaCheckBox.IsChecked =
            this.LaserCheckBox.IsChecked =
            this.PurchaseCheckBox.IsChecked =
            this.LatheCheckBox.IsChecked =
            this.DrillCheckBox.IsChecked =
            this.FoldCheckBox.IsChecked =
            this.RollCheckBox.IsChecked =
            this.SawCheckBox.IsChecked = false;
        }

        public void CheckBox_Checked(Object sender, RoutedEventArgs e) {
            this.LengthText.Text += ((CheckBox)sender).Content;
        }

        public void FinishDropdown_SelectionChanged(object sender, SelectionChangedEventArgs? e) {
            
            if (this.NoteText == null) {
                return;
            }

            ComboBox combo = (ComboBox)sender;
            ComboBoxItem comboItem = (ComboBoxItem)(combo.SelectedValue);

            this.NoteText.Text = (string)comboItem.Content;
        }

        public void Window_Loaded(Object sender, RoutedEventArgs e) {
            FinishDropdown_SelectionChanged(this.FinishDropdown, null);
        }

        public void SupplierText_Changed(object sender, RoutedEventArgs e) {
            this.MassText.Text = this.SupplierText.Text;
        }

    }
}

# Run project

dotnet run

Edited on