zoukankan      html  css  js  c++  java
  • WPF01(xaml)

    XAML:(转自http://www.cnblogs.com/huangxincheng/archive/2012/06/17/2552511.html)

    复制代码
    <Window x:Class="WpfApplication1.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="350" Width="525">
        <Grid>
            
        </Grid>
    </Window>
    复制代码

     然后我们来对比一下webform中的page默认生成页面

    复制代码
     1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
     2 
     3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     4 <html xmlns="http://www.w3.org/1999/xhtml">
     5 <head runat="server">
     6     <title></title>
     7 </head>
     8 <body>
     9     <form id="form1" runat="server">
    10     <div>
    11     </div>
    12     </form>
    13 </body>
    14 </html>
    复制代码

    我们发现xaml很像xml结构,是的,它是一种遵循xml规范的界面描述语言。

    一:xaml简述

       首先我默认大家都是熟悉webform的开发者。

      1:x:Class

           这个标记在webform中有对应的标记吗?有的,也就是这里的CodeBehind。

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

      2:xmlns

          这个在webform中也有对应标记吗?首先我们要知道xmlns是干嘛的?哦,导入命名空间用的,那我们马上就想到webform中的对应标记import。

    <%@ Import Namespace="System.IO" %>

     那么下一个问题就是两者有什么不同吗?我们知道webform中导入命名空间需要一个一个的导入,4个命名空间就要写4个import,而xaml可以做到多

    个命名空间做为一个导入。

     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    其实也就导入了如下4个wpf开发必备的dll,这个命名空间也是xaml中默认的命名空间。

    3:xmlns:x

        如果我们需要导入一些自定义的命名空间,那么我们就需要加上用“: + 自定义名称”的形式,这里微软导入了一个自定义的命名空间。

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       下面我们也来导入一个命名空间,实际开发中我们当然我们不会做成url的形式,这里我就取名为sys前缀

    复制代码
    <Window x:Class="WpfApplication1.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:sys="clr-namespace:System.IO;assembly=mscorlib"
            Title="MainWindow" Height="350" Width="525">
        <Grid>   
        </Grid>
    </Window>
    复制代码

    4:Grid

        我们都知道在n年前的html网页布局中都采用table的形式,table嵌套table,table跨行跨列等手段构建了漂亮的网页,这种排版思路也应用到了wpf中。

    <1>:划分位置

          我们画个两行两列的界面布局,这里我们只要将”鼠标“放在”红色方框“中,就会出现小三角,我们点击就可生成一个分割线,红色小圈圈标记着“行列”

    的分割比列。

    然后我们看一下生成的代码

    复制代码
    <Window x:Class="WpfApplication1.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:sys="clr-namespace:System.IO;assembly=mscorlib"
            Title="MainWindow" Height="350" Width="525">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="161*" />
                <RowDefinition Height="150*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="225*" />
                <ColumnDefinition Width="278*" />
            </Grid.ColumnDefinitions>
        </Grid>
    </Window>
    复制代码

    我们奇怪的发现为什么宽度有“*”号,这里要解释一下wpf中对“宽高度”的设置有三个形式。

    ①:绝对尺寸         <RowDefinition Height="161" />

    ②:自动尺寸         <RowDefinition Height="auto" />

    ③:按比例尺寸      <RowDefinition Height="161*" />

    那我们就有疑问了,到底161* 是多少呢?计算规则如下:

    我们这里的窗体Height=350。

    第一行高度为: 350/(161+150)*161  

    第二行高度为:350(161+150)*150

    <2>: UI元素布局

       ①:UI元素对号入座

               很简单,我们只要在button的Grid属性上设置button应该放在哪一个单元格即可。

       ②:UI元素跨行跨列

    二:xaml中扩展标记

        扩展标记分为两种:wpf级别和xaml级别。

    <1> wpf级别扩展标记

    ①: StaticResource

           用于获取资源的值,值获取在xaml编译的时候完成,什么意思呢?先举个例子。

    首先,我们发现有一个window.Resources,这东西我们可以认为是在MainWindow类中定义的全局变量,这里我就定义个name=“一线码农”的

    变量,那么textblock获取变量的方式就可以通过StaticResource。

    ②:DynamicResource

           跟StaticResource唯一不同的是,它是在运行时获取的,如果大家知道C#里面的dynamic关键字,我想就不用解释了,上代码。

    ③:Binding

         还是在webform中找一下关键字吧,相当于webform中的Eval,上代码说话。

    复制代码
     1 <Window x:Class="WpfApplication1.MainWindow"
     2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     4         xmlns:sys="clr-namespace:System;assembly=mscorlib"
     5         Title="MainWindow" Height="350" Width="525">
     6     <Grid>
     7         <TextBox Height="23" Margin="87,75,0,0" Name="textBox1"  Width="120" />
     8         <TextBox Height="23" Margin="87,126,0,0" Name="textBox2"  Width="120" 
     9                  Text="{Binding ElementName=textBox1, Path=Text}" />
    10     </Grid>
    11 </Window>
    复制代码

    这里我把textbox2的text绑定到了textbox1的text上,最后的效果就是我在textbox1上输入,textbox2也会相应的变化,很有意思。

    ④:TemplateBinding

         这个被称为模板绑定,可以把对象的属性和模板的属性绑定起来,详细的介绍放在后续文章中。

    <2>xaml级别扩展标记

    ①  x:Type

       将模板或者样式指定在哪一种对象上时需要用type指定。

    复制代码
     1 <Window x:Class="WpfApplication1.MainWindow"
     2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     4         xmlns:sys="clr-namespace:System;assembly=mscorlib"
     5         Title="MainWindow" Height="350" Width="525">
     6     <Window.Resources>
     7         <Style TargetType="{x:Type TextBox}">
     8             <Setter Property="Background" Value="Red"/>
     9         </Style>
    10     </Window.Resources>
    11     <Grid>
    12         <TextBox Height="23" 
    13                  Margin="87,75,0,0" Name="textBox1"  Width="120" />
    14     </Grid>
    15 </Window>
    复制代码

    如这里我定义的css样式,将background=red指定到textbox控件上。

    ②:x:Static

        主要用于在xaml中获取某个对象的静态值,上代码说话。

    复制代码
    namespace WpfApplication1
    {
        /// <summary>
        /// MainWindow.xaml 的交互逻辑
        /// </summary>
        public partial class MainWindow : Window
        {
            public static string name = "一线码农";
    
            public MainWindow()
            {
                InitializeComponent();
            }
        }
    }
    复制代码

    xaml代码:

    复制代码
    <Window x:Class="WpfApplication1.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:local="clr-namespace:WpfApplication1"
            Title="MainWindow" Height="350" Width="525">
        <Grid>
            <TextBox Height="23"  Text="{x:Static local:MainWindow.name}"
                     Margin="87,75,0,0" Name="textBox1"  Width="120" />
        </Grid>
    </Window>
    复制代码

    最后效果:

    ③:x:null

        这个就比较简单了,xaml中某某控件设为null就靠它了。

    1     <Grid>
    2         <TextBox Height="23"  Text="{x:Null}"
    3                  Margin="87,75,0,0" Name="textBox1"  Width="120" />
    4     </Grid>

    ④:x:Array

      这个主要就是在xaml中创建数组,还是举个例子。

  • 相关阅读:
    OK335x mksd.sh hacking
    Qt jsoncpp 对象拷贝、删除、函数调用 demo
    OK335xS 256M 512M nand flash make ubifs hacking
    Qt QScrollArea and layout in code
    JsonCpp Documentation
    Qt 4.8.5 jsoncpp lib
    Oracle数据库生成UUID
    freemarker得到数组的长度
    FreeMarker中if标签内的判断条件
    freemarker语法
  • 原文地址:https://www.cnblogs.com/newcoder/p/4785268.html
Copyright © 2011-2022 走看看