WPF入门思考-布局篇(上篇)

开篇：

作者常思考做一个APP需要了解哪些知识（作者是Android开发），琢磨一下，大概以下几点：

基本布局（基本控件，控件属性，排版，列表展示，项目基本框架）
路由
http请求
打包/发布

其实上面的思维定式用在C#开发使完全可行的，上面四点拆分下来还是挺多的，毕竟篇幅有限，所以标题命名为入门基础就不太妙了。

WPF有关控件参阅

https://docs.microsoft.com/zh-cn/dotnet/api/index?view=netframework-4.7.2
搜素框输入命名控件+控件名

例：System.Windows.Documents.RUN

XAML有100行，直接粘过来，一行行分析

<Window x:Class="CalculatorDemo.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:CalculatorDemo"
        mc:Ignorable="d"
        Title="MainWindow"
        Height="350"
        Width="525"
        Icon="appicon.ico">
    <DockPanel Name="MyPanel">
        <Menu DockPanel.Dock="Top" Height="26">
            <MenuItem Header="File">
                <MenuItem Click="OnMenuExit" Header="Exit" />
            </MenuItem>
            <MenuItem Header="View">
                <MenuItem Name="StandardMenu" Click="OnMenuStandard" IsCheckable="true" IsChecked="True"
                          Header="Standard" />
            </MenuItem>
            <MenuItem Header="Help">
                <MenuItem Click="OnMenuAbout" Header="About" />
            </MenuItem>
        </Menu>
        <Grid Name="MyGrid" ShowGridLines="False">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Button Name="B7" Click="DigitBtn_Click" Grid.Column="4" Grid.Row="2">7</Button>
            <Button Name="B8" Click="DigitBtn_Click" Grid.Column="5" Grid.Row="2">8</Button>
            <Button Name="B9" Click="DigitBtn_Click" Grid.Column="6" Grid.Row="2">9</Button>
            <Button Name="B4" Click="DigitBtn_Click" Grid.Column="4" Grid.Row="3">4</Button>
            <Button Name="B5" Click="DigitBtn_Click" Grid.Column="5" Grid.Row="3">5</Button>
            <Button Name="B6" Click="DigitBtn_Click" Grid.Column="6" Grid.Row="3">6</Button>
            <Button Name="B1" Click="DigitBtn_Click" Grid.Column="4" Grid.Row="4">1</Button>
            <Button Name="B2" Click="DigitBtn_Click" Grid.Column="5" Grid.Row="4">2</Button>
            <Button Name="B3" Click="DigitBtn_Click" Grid.Column="6" Grid.Row="4">3</Button>
            <Button Name="B0" Click="DigitBtn_Click" Grid.Column="4" Grid.Row="5">0</Button>
            <Button Name="BPeriod" Click="DigitBtn_Click" Grid.Column="5" Grid.Row="5">.</Button>
            <Button Name="BPM" Click="OperBtn_Click" Background="DarkGray" Grid.Column="6" Grid.Row="5">+/-</Button>
            <Button Name="BDevide" Click="OperBtn_Click" Background="Darkgray" Grid.Column="7" Grid.Row="2">/</Button>
            <Button Name="BMultiply" Click="OperBtn_Click" Background="Darkgray" Grid.Column="7" Grid.Row="3">*</Button>
            <Button Name="BMinus" Click="OperBtn_Click" Background="Darkgray" Grid.Column="7" Grid.Row="4">-</Button>
            <Button Name="BPlus" Click="OperBtn_Click" Background="Darkgray" Grid.Column="7" Grid.Row="5">+</Button>
            <Button Name="BSqrt" Click="OperBtn_Click" Background="Darkgray" Grid.Column="8" Grid.Row="2"
                    ToolTip="Usage: 'A Sqrt'">
                Sqrt
            </Button>
            <Button Name="BPercent" Click="OperBtn_Click" Background="Darkgray" Grid.Column="8" Grid.Row="3"
                    ToolTip="Usage: 'A % B ='">
                %
            </Button>
            <Button Name="BOneOver" Click="OperBtn_Click" Background="Darkgray" Grid.Column="8" Grid.Row="4"
                    ToolTip="Usage: 'A 1/X'">
                1/X
            </Button>
            <Button Name="BEqual" Click="OperBtn_Click" Background="Darkgray" Grid.Column="8" Grid.Row="5">=</Button>
            <Button Name="BC" Click="OperBtn_Click" Background="Darkgray" Grid.Column="8" Grid.Row="1"
                     ToolTip="Clear All">
                C
            </Button>
            <Button Name="BCE" Click="OperBtn_Click" Background="Darkgray" Grid.Column="7" Grid.Row="1"
                    ToolTip="Clear Current Entry">
                CE
            </Button>
            <Button Name="BMemClear" Click="OperBtn_Click" Background="Darkgray" Grid.Column="3" Grid.Row="2"
                    ToolTip="Clear Memory">
                MC
            </Button>
            <Button Name="BMemRecall" Click="OperBtn_Click" Background="Darkgray" Grid.Column="3" Grid.Row="3"
                    ToolTip="Recall Memory">
                MR
            </Button>
            <Button Name="BMemSave" Click="OperBtn_Click" Background="Darkgray" Grid.Column="3" Grid.Row="4"
                    ToolTip="Store in Memory">
                MS
            </Button>
            <Button Name="BMemPlus" Click="OperBtn_Click" Background="Darkgray" Grid.Column="3" Grid.Row="5"
                    ToolTip="Add To Memory">
                M+
            </Button>
            <TextBlock Name="BMemBox" Grid.Column="3" Grid.Row="1" Margin="10,17,10,17" Grid.ColumnSpan="2">Memory: [empty]</TextBlock>
            <local:MyTextBox Grid.ColumnSpan="9" x:Name="DisplayBox" Height="30" Margin="5" />
            <local:MyTextBox Grid.Row="1" Grid.ColumnSpan="3" Grid.RowSpan="5" Margin="5" x:Name="PaperBox" />
        </Grid>
    </DockPanel>
</Window>

**Window **
xmlns部分我们只需要关注以下几点

 		xmlns:local="clr-namespace:CalculatorDemo"//类似于Android的Style，不申明后面引用报错
        Title="MainWindow"//标题
        Height="350"//高度	
        Width="525"//宽度

xmlns我们也不会过多的纠结，固定写法。想了解的推荐下面这篇
WPF学习之X名称空间详解
DockPanel
类似于Android的FramLayout
Menu MenuItem
类似于Android的ToolBar

<Menu DockPanel.Dock="Top" Height="26">
            <MenuItem Header="File">
            	//Click绑定点击事件
                <MenuItem Click="OnMenuExit" Header="Exit" />
            </MenuItem>
            <MenuItem Header="View">
                <MenuItem Name="StandardMenu" Click="OnMenuStandard" IsCheckable="true" IsChecked="True"
                          Header="Standard" />
            </MenuItem>
            <MenuItem Header="Help">
                <MenuItem Click="OnMenuAbout" Header="About" />
            </MenuItem>
        </Menu>

DockPanel.Dock: 类似于layout_graity
Click:类似于onClick
Header:Menu的标题
MenuItem ：IsCheckable=true 直接变checkBox

Grid
这个类似于Android的GridLayout
ShowGridLines:展示分割线

//2行3列
<Grid.ColumnDefinitions>
	<ColumnDefinition />
	<ColumnDefinition />
	<ColumnDefinition />           
</Grid.ColumnDefinitions>
<Grid.RowDefinitions> 
	<RowDefinition />
	<RowDefinition />
</Grid.RowDefinitions>

如下图横向箭头6（0 ~ 5 ）个纵向9（0 ~ 8）个
grid

Button

 <Button Name="BSqrt" Click="OperBtn_Click" Background="Darkgray" Grid.Column="8" Grid.Row="2"
                    ToolTip="Usage: 'A Sqrt'">
                Sqrt
</Button>

Grid.Column=“5” //坐标第5行（从0开始）
Grid.Row=“4”//第4列（从0开始）
ToolTip 悬浮提示
Name 按钮标题

TextBlock
类似于Android的TextView，不能编辑，可编辑的叫：RichTextBox

//边距 左上右下
Margin="10,17,10,17" 
// 所占格子数
Grid.ColumnSpan="2"

自定义控件

<local:MyTextBox x:Name="PaperBox" />

有了Window的xmlns申明（xmlns:x| xmlns:local）这里就可以直接 alt +右键提示出来
myTextBox
上面已经给出了三个提示的含义

现在转到CS文件
关于sealed ,partial,internal：比java会玩

readonly 和 const：const只能在初期就使用常量初始化好。对于每一次编译后的结果，const的值是固定的，而readonly的值是可以在运行的时候才确定值
public sealed               					 类可以在任何地方访问,不供派生调用,只能实例化.
sealed  或   internal  sealed                    类只能在当前项目中访问,不供派生调用,只能实例化.
partial：x:Class的值所指示的类型在声明的时候必须使用partial关键字
internal ：在编程的时候，有的时候需要用一个程序集里的一个窗体元素访问到另一个程序集的窗体元素，那么就需要使用x:FieldModifier来改变变量的访问级别！
例子：
 <TextBox Height="23" Width="120" x:Name="txtName" x:FieldModifier="internal"/>

参考 WPF学习之X名称空间详解

定点击事件
双击XAML控件会自动生成点击事件哦,快去试试吧。
set，get方法
感觉比java要骚气的多啊

  private string Display { get; set; }

数据绑定
不像Android 的findViewById 直接使用，不过现在的anko插件也支持了这种操作

<local:MyTextBox Grid.ColumnSpan="9" x:Name="DisplayBox" Height="30" Margin="5" />
        
private void UpdateDisplay()
{
    DisplayBox.Text = Display == string.Empty ? "0" : Display;
}

数据类型操作

//使用ALT +Enter  自动生成
private string _memVal;
private double Memory
      {
          get
          {
              if (_memVal == string.Empty)
                  return 0.0;
                  //记住便是
              return Convert.ToDouble(_memVal);
          }
          //set方法，InvariantCulture去除格式化
          set { _memVal = value.ToString(CultureInfo.InvariantCulture); }
      }

//字符串用‘+’拼接和java一样        
_paper.AddArguments(LastValue + " / " + Display);
d = (Convert.ToDouble(LastValue)/Convert.ToDouble(Display));

//记住就行
if (double.IsNegativeInfinity(d) || double.IsPositiveInfinity(d) || double.IsNaN(d))
    throw new Exception("Illegal value");

//非空判断
if (_memVal != string.Empty){}
 
//三目运算符
DisplayBox.Text = Display == string.Empty ? "0" : Display;

 //获取角标元素
if (Display.IndexOf('.', 0) >= 0) return;

//获取字符串长度                    
var i = Display.Length;
//字符串移除
Display = Display.Remove(i - 1, 1); //remove last char 
类似Android TextView的setText方法（其实更像kotlin）
 _window.PaperBox.Text = string.Empty;

对话框

 var parent = (Window) MyPanel.Parent;
            MessageBox.Show(parent, parent.Title + " - By Jossef Goldberg ", parent.Title, MessageBoxButton.OK,
                MessageBoxImage.Information);

退出

  Close();

选中

<MenuItem Header="Help">
	<MenuItem Click="OnMenuAbout" Header="About" />
</MenuItem>

StandardMenu.IsChecked = true;

结尾：

本篇基于WPF开源项目 - CalculatorDemo
https://github.com/Microsoft/WPF-Samples

PS:个人不喜欢C#静态常量和函数，布局ID都用大写开头，你懂得。

WPF入门思考-布局篇(上篇)

开篇：

WPF有关控件参阅

结尾：

猜你喜欢