C# WPF 学习笔记（一）-The Basics

最新推荐文章于 2025-06-10 16:44:59 发布

原创最新推荐文章于 2025-06-10 16:44:59 发布 · 277 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#c# #wpf

C# WPF学习笔记专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在WPF中使用StackPanel和Grid实现屏幕截图的布局效果，包括按钮分栏、标题区块和组合控件的布局技巧，以及边框和间距的设置。

学习笔记来源于b站视频，在这里撰写为了督促自己把这个学完，也能更详细地记录整个学习过程。

1.创建项目

项目列表中app.config包括框架版本，app.xaml点击可以看到是一个文件的代码，<window></window>内即是可视的窗口，F5开启窗口。

2.stack panel和grid

stack panel一行横排或者一列竖排，以水平或者竖直方向对子元素进行排列。

grid相当于表格，可以定义行和列，然后将元素布局到表格当中。

3.实现屏幕截图的布局效果

顶部三个按钮的实现

1.三个ColumnDefinition中宽度定义星号可以实现一行三个按钮，宽度三分之一分配的布局；

2.button中添加grid.column属性，否则所有button都堆叠在了第一个

3.在最外框添加border，添加padding属性出现空白空间；单个button的margin属性四个值分别对应左上右下

4.注释：T

    <Border Padding="10">
        <StackPanel>
            
            <!-- Buttons -->
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Button Margin="0 0 10 0" Grid.Column="0" Content="Apply" />
                <Button Grid.Column="1" Content="Rest" />
                <Button Margin="10 0 0 0" Grid.Column="2" Content="Refresh" />
            </Grid>

        </StackPanel>
    </Border>

Title段的实现

1.label或textblock实现

2.可输入文本的空间为textbox，外部的空间用margin，内部的空间用padding，isreadonly设置文本框的属性为只读，用户不可修改。background设置文本背景

            <TextBlock Text="Pulse Properties" FontWeight="Bold" Margin="0 10" />

            <!--Description-->
            <TextBlock Text="Description"  />
            <TextBox Padding="2"/>

ComboBox 下拉选择框

<ComboBox SelectedIndex="0" Padding="2">
                <ComboBoxItem>Painted</ComboBoxItem>
                <ComboBoxItem>Not Painted</ComboBoxItem>
 </ComboBox>

CheckBox复选框

<!--Checkboxes -->
             <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <!--Column1-->
                <StackPanel Grid.Column="0" Margin="0 0 10 0">
                    <CheckBox Content="Weld" />
                    <CheckBox Content="Assembly" />
                    <CheckBox Content="Plasma" />
                    <CheckBox Content="Laser" />
                    <CheckBox Content="Purchase" />
                </StackPanel>

                <!--Column2-->
                <StackPanel Grid.Column="1">
                    <CheckBox Content="Lathe" />
                    <CheckBox Content="Drill" />
                    <CheckBox Content="Drill" />
                    <CheckBox Content="Fold" />
                    <CheckBox Content="Saw" />
                </StackPanel>

            </Grid>

用这些功能最终实现了这样的布局：

总结：

1.<Border>最外圈外框可以用来设计整体，加padding使可视效果更好

2.stack panel与grid结合使用

3. 两种写法

当控件里不加内容时可以直接用<... />

当控件里额外需要添加控件时，用<>......</>

4.赋予事件属性的方法

<Button x:Name="ApplyButton" Click="ApplyButton_Click" Margin="0 0 10 0" Grid.Column="0" Content="Apply" />

        private void ApplyButton_Click(object sender,EventArgs e)
        {
            //MessageBox.Show("Hi.");
              MessageBox.Show($"The Descripition text is {this.DescriptionTextbox.Text}");
        }

附录：

<Window x:Class="WPF_basics.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:WPF_basics"
        mc:Ignorable="d"
        Title="Wpf Basics" Height="800" Width="400">
    <Border Padding="10">
        <StackPanel>
            
            <!-- Buttons -->
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Button Margin="0 0 10 0" Grid.Column="0" Content="Apply" />
                <Button Grid.Column="1" Content="Rest" />
                <Button Margin="10 0 0 0" Grid.Column="2" Content="Refresh" />
            </Grid>
            
            <TextBlock Text="Pulse Properties" FontWeight="Bold" Margin="0 10" />

            <!--Description-->
            <TextBlock Text="Description"  />
            <TextBox Padding="2"/>
            
            <!-- Status and Revision -->
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="2*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                
                <!--Status-->
                <StackPanel Grid.Column="0" Margin="0 0 10 0">
                    <TextBlock Text="Status"/>
                    <TextBox IsReadOnly="True" Background="#eee" Padding="2"/>
                </StackPanel>

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

            </Grid>
            
            <!--Part Number-->
            <TextBlock Text="PartNumber"/>
            <TextBox IsReadOnly="True" Background="#eee" Padding="2"/>
            
            <!-- Raw Material-->
            <TextBlock Text="Raw Material" FontWeight="Bold" Margin="0 10" />

            <!--Material-->
            <TextBlock Text="Material"  />
            <ComboBox Padding="2"/>

            <!-- Manufacturing Info-->
            <TextBlock Text="Manufacturing Info" FontWeight="Bold" Margin="0 10" />

            <!--Work Centres-->
            <TextBlock Text="Work Centres" Margin="0 0 0 10" />

            <!--Checkboxes -->
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <!--Column1-->
                <StackPanel Grid.Column="0" Margin="0 0 10 0">
                    <CheckBox Content="Weld" />
                    <CheckBox Content="Assembly" />
                    <CheckBox Content="Plasma" />
                    <CheckBox Content="Laser" />
                    <CheckBox Content="Purchase" />
                </StackPanel>

                <!--Column2-->
                <StackPanel Grid.Column="1">
                    <CheckBox Content="Lathe" />
                    <CheckBox Content="Drill" />
                    <CheckBox Content="Drill" />
                    <CheckBox Content="Fold" />
                    <CheckBox Content="Saw" />
                </StackPanel>

            </Grid>

            <!--Length-->
            <TextBlock Text="Length"  />
            <TextBox Padding="2"/>

            <!--Mass-->
            <TextBlock Text="Mass"/>
            <TextBox IsReadOnly="True" Background="#eee" Padding="2"/>

            <!--Finish-->
            <TextBlock Text="Finish"  />
            <ComboBox SelectedIndex="0" Padding="2">
                <ComboBoxItem>Painted</ComboBoxItem>
                <ComboBoxItem>Not Painted</ComboBoxItem>
            </ComboBox>

            <!--Purchase Info-->
            <TextBlock Text="Purchase Information"  />
            <ComboBox SelectedIndex="0" Padding="2">
                <ComboBoxItem>Rubber</ComboBoxItem>
                <ComboBoxItem>Not Rubber</ComboBoxItem>
            </ComboBox>

            <!--Supplier Name-->
            <TextBlock Text="Supplier Name"  />
            <TextBox Padding="2"/>

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

            <TextBlock Text="Additional Info" FontWeight="Bold" Margin="0 10" />

            <!--Note-->
            <TextBlock Text="Note"  />
            <TextBox Padding="2"/>

        </StackPanel>
    </Border>


</Window>