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中创建数组,还是举个例子。

  • 相关阅读:
    获取控件的xy坐标
    你不知道的JavaScript--Item4 基本类型和基本包装类型(引用类型)
    你不知道的JavaScript--Item3 隐式强制转换
    ajax技术基础详解
    git回退到某个历史版本
    jQuery中 $.ajax()方法详解
    Eclipse Java注释模板设置详解
    MySQL中group_concat函数深入理解
    javascript知识详解之8张思维导图
    javascript 事件编程之事件(流,处理,对象,类型)
  • 原文地址:https://www.cnblogs.com/newcoder/p/4785268.html
Copyright © 2011-2022 走看看