学习笔记来源于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>