据说是微软界面开发的无二之选

元

windows以前的界面用C语言写，后来有了很多种选择了。。MFC，winFrom等等。。。。

现在微软想要搞多平台统一了哇，win10桌面、平板、手机都是一个系统，还能应用通用。

有幸在工作中学习到wpf，在比较了玩具winFrom之后我不得不承认，wpf很厉害。

据说开发web和手机端界面的silverlight也是一种显示技术，而且是wpf的子集（mini版）。

然后我就要慢慢来学习wpf了。。

hello world

WPF 界面搭架子

通过网络上了解到，wpf是标签格式的类xml的东东，那真轻松加简单，html我还没写过么。。

据说还有另外两款专业前端使用的wpf编辑器，但是我们纯程序员还是用vs。

建一个wpf工程。出现了一个窗口，窗口就是最基本的用来装窗户的空框框，有种水泥钢筋的既视感。

窗口

然后呢，通过资料，理解到：每个标签都是一个类，咱们写标签就是在写类。不同名字的标签显示效果不同，通过过字面意思可以理解到它是啥样的。不同的标签可以嵌套，当然不能乱套，不过可以尝试看看乱套的效果。

<Window x:Class="WpfApplication1.test"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="test" Height="300" Width="300">
    <Grid>
        
    </Grid>
</Window>

我认为肯定在<windows>标签里面写上自己想要它出现的标签。

找啊找啊找，找到一个<Grid>叫网格的标签。明显就是它了嘛，来画个网格子，类似于html里面的<div>，一切布局都靠它了。

显示一看这个哥们儿是木有内容的，只有是划分出一个隐形的木有边框宽度的区域。

所以你得先搞明白自己的页面该分为几个区域，然后使用它来划分。

怎么划分？Grid叫网格嘛，网格大家都懂的啊，所以就画网格来分出一个一个的小格子啥，同时网格还有等分等特性。

Grid说我有行和列，这点比<div>好多了。

于是发现了<Grid.Rowdifinctions>和<Grid.Columedifnictions>这两个标签（可能单词没写对，不过不用在意这些细节）。用他们分别来定义行和列。其中写入一个<RowDefinition />或<ColumnDefinition />来标识一行或一列，两个就是两行或两列。有几行就给几个，有几列就给几个。是提前定义行列，再在"接下来的地方"放置你要用到的标签，设置他们的行列属性就可以让它出现在网格里了。

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <!-- 我叫“接下来的地方” -->
</Grid>

代码就是上面这样了。不给<RowDefinition />或<ColumnDefinition />标签任何规格参数，他们就是几兄弟有多少平分多少，但是一定给了一个，它不管怎么样都占那么多，剩下的哥们儿平分。剩下只有一个哥们儿那剩下的都是它自己的了。

想要把它放在哪一行那一列怎么办？

在接下来的地方继续添加你想要给进去的标签，然后在它属性里写上Grid.Row="i",Grid.Colume="j",就会把它显示在第i行，j列了了。序号都是从零开始的。

架子画好了，可是这只是初期设计啊，里面还是什么都没有啊。所以接着就是在<Grid>标签里面继续放置其他可以有显示效果的标签或者布局样式了，来丰富美化你的界面。

WPF 布局面板

当你的区域布局搭建好了之后就要往里面放置内容了，你可以按照自己的喜好放进任何标签组件进去。但是我习惯于先放置一个组织组件的面板来控制里面的组件排列。面板独占一个区域，不能互相嵌套。

WPF里面包含了好几种面板，用来排列和组织一个区域内的其他显示标签组件。可以参照html的form表单。

对于布局，面板，框框有很多种选择，但是学习的时候要思考根据它的特性适合出现在哪里，这些都是见仁见智的，我只是说出自己的理解。

<DockPanel>，字面停靠标签。那效果应该是停靠在那个边上了。如果不是效果需要，一般不建议使用过多，不包括个人喜好。

布局中放入DockPanel

果不其然，放进一个标签到0行0列的<DockPanel>直接就充满了整个面板，为神马？因为四条边都停靠了.

自动填充的DockPanel

但是放两个按钮却没有出现我们能够理解的两个平分，而且充满面板的是后来的标签经过实验发现有些规律：

1.如果已经有了一个的话，只要它没有规格，说明它软啊能屈能伸。接下来就被欺负——被人霸占了所有的地盘。但是只要一有点规模（规格），它又能马上抢回来。

能屈能伸的按钮

<DockPanel Grid.Row="0" Grid.Column="0">    
    <Button Width="30"></Button>     
    <Button></Button>     
</DockPanel>

2.我自己写代码发现好像只能水平排开，前面的不设置规格，会面的就会欺负你到死抢走你的地盘。但是能不能垂直排列还不得而知。设置了高度之后也会出现在自己地盘上长高和变矮的情况，但不管怎么高都是居中的。

水平排开

<DockPanel Grid.Row="0" Grid.Column="0">   
    <Button Width="20" Height="10"></Button>    
    <Button Height="50"></Button>  
</DockPanel>

<StackPanel>,堆栈面板，晓得堆栈的童鞋都应该能瞬间明白。就像堆柴火那么堆嘛，堆一个堆两个，堆三个，堆多少都行，堆满了就出去了。横着竖着，默认是竖着排。

堆栈面板

<StackPanel Grid.Row="0" Grid.Column="1">   
    <Button Height="20" Width="50"></Button>    
    <Button Height="20"></Button>    
    <Button Height="30" Width="80"></Button>    
    <Button Height="50"></Button>    
    <!-- 上面的小哥就醉了栈满了溢出了 -->    
</StackPanel>

堆栈面板和停靠面板不同，没有他那么屌炸天。里面的孩子都是谦谦君子，不给规格（长高宽），哥就是不要位置也不占你地盘。就是这么自信！在自己地盘他们也是默认居中的。

添加一个Orientation属性，设置为Horizontal就横着排了，Vertical就是竖着排。

还有其他面板，暂时没用到，等用到的时候再进行描写。

WPF 区域内再引入布局——Grid嵌套

在后续的学习中，我发现，光使用面板有时候无法达到在一个大区域内实现小的控件的排列，有时候都挤到一起或者其他怎么了，不利于我对不同大小窗口下的显示效果的把握。

于是发现在Grid中可继续嵌套Grid来达到区域内在进行布局划分。

因为标签格式是典型的树形结构，所以千万要控制每一层的数量和层数，免得最后把自己都搞晕了。

布局

1 <Grid Grid.Row="1" Grid.Column="0"> 
2     <Grid.RowDefinitions> 
3         <RowDefinition></RowDefinition> 
4         <RowDefinition></RowDefinition> 
5     </Grid.RowDefinitions> 
6     <Button Grid.Row="0">button</Button> 
7     <Label Grid.Row="1">label</Label> 
8 </Grid>

有了这些方法就能按照预先的设想将各种“玻璃”——显示组件装到窗户里了。

WPF Border——一个漂亮的玻璃框

有时候光有“窗户”——框架，和“玻璃”——显示组件，毫无边界的紧挨着，看着是不是有点难受？能不能让我们的眼睛更轻松的分辨出来每个个体？

可以，可以通过设置间距、颜色、等一系列显示属性。

但是我发现了一个更加厉害的东西，那就是给“玻璃”套上边框“Border”。这样的话，一个距离现实界限不是很大的窗户就出来了。

接着我们就要为这个“玻璃框”刷上颜色，通过BorderBrush属性来设置它。

光有颜色不够啊，要有厚度，通过 BorderThickness设置一个值来改变它。

还能把它变成圆角的，通过CornerRadius来设置圆角的半径是多少像素。要是一个正方形的border，设置成边框的一半你说长什么样子？

什么！你说北京雾霾沙尘暴？没关系，用Opacity属性给玻璃框设置下透明度，再明亮的玻璃装上去都是灰蒙蒙的，保证看不到霾！

模糊的2014

 1 <StackPanel Grid.Row="0" Background="DarkGreen"  Margin="0,0,0,1" Orientation="Horizontal"> 
 2                 <Label>现在时间:</Label>3                 <Border Width="80" Height="36" BorderBrush="Black" BorderThickness=".8" CornerRadius="5" Background="Silver">
 4                     <Border.Effect> 
 5                         <DropShadowEffect BlurRadius="15"></DropShadowEffect> 
 6                     </Border.Effect> 
 7                     <Label Name="year">2014</Label> 
 8                 </Border> 
 9                 <Label>年</Label>
 10                 <Border  Width="40" Height="40" BorderBrush="Black" BorderThickness="1" CornerRadius="20" Background="White">
 11                     <Label Name="mouth">09</Label>
 12                 </Border>
 13                 <Label>月</Label>
 14                 <Border  Width="40" Height="36" BorderBrush="Black" BorderThickness="1" CornerRadius="5" Background="White">
 15                     <Label Name="day">01</Label>
 16                 </Border>
 17                 <Label>日</Label>
 18                 <Border  Width="20" Height="36" BorderBrush="Black" BorderThickness="1" CornerRadius="5" Background="White">
 19                     <Label Name="hour_1">1</Label>
 20                 </Border>
 21                 <Border  Width="20" Height="36" BorderBrush="Black" BorderThickness="1" CornerRadius="5" Background="White">
 22                     <Label Name="hour_2">1</Label>
 23                 </Border>
 24                 <Label>:</Label>
 25                 <Border  Width="20" Height="36" BorderBrush="Black" BorderThickness="1" CornerRadius="5" Background="White">
 26                     <Label Name="minute_1">1</Label>
 27                 </Border>
 28                 <Border  Width="20" Height="36" BorderBrush="Black" BorderThickness="1" CornerRadius="5" Background="White">
 29                     <Label Name="minute_2">1</Label>
 30                 </Border>
 31                 <Label>:</Label>
 32                 <Border  Width="20" Height="36" BorderBrush="Black" BorderThickness="1" CornerRadius="5" Background="White">
 33                     <Label Name="second_1">1</Label>
 34                 </Border>
 35                 <Border  Width="20" Height="36" BorderBrush="Black" BorderThickness="1" CornerRadius="5" Background="White">
 36                     <Label Name="second_2">1</Label>
 37                 </Border>
 38         </StackPanel>