原文:《Programming WPF》翻译 第5章 5.数据模板和样式

让我们想象一下我们想要实现TTT更有娱乐性的一个版本(这是大部分游戏中最重要的特色)。例如,TTT的一种变体允许玩家每次只能占据3个格子,去除第一步在下第四步的时候,去除第二步在下第五步的时候,,以此类推。为了实现这个变体,我们需要保持对每一步按顺序跟踪——可以利用PlayMover类,如示例5-20。

示例5-20

namespace TicTacToe {

  public class PlayerMove {

    private string playerName;

    public string PlayerName {

      get { return playerName; }

      set { playerName = value; }

    }



    private int moveNumber;

    public int MoveNumber {

      get { return moveNumber; }

      set { moveNumber = value; }

    }



    public PlayerMove(string playerName, int moveNumber) {

      this.playerName = playerName;

      this.moveNumber = moveNumber;

    }

  }

}

现在,取代以为每个按钮对象的内容使用一个简单的字符串,我们将用示例5-20中的一个PlayMover实例鲜明显示这样的一个改动。

示例5-21

namespace TicTacToe {

  public partial class Window1 : Window {

    

    int moveNumber;



    void NewGame( ) {

      

      ;

    }



    void cell_Click(object sender, RoutedEventArgs e) {

      

      // Set button content

      //button.Content = this.CurrentPlayer;

      button.Content =

        new PlayerMove(this.CurrentPlayer, ++this.moveNumber);

      

    }

    

  }

}

图5-6

正如你回想到的,在第四章,图5-6所发生的是,按钮没有足够多的信息生成一个PlayMover对象,但是我们可以通过一个数据模板修复它。

5.5.1数据模板

回忆第四章,WPF允许你定义一个数据模板,这是一棵元素树,可以在特定的上下文中扩展。数据模板用于提供一个应用程序生成非可视化外观对象的能力,正如示例5-22所示。

示例5-22

<?Mapping XmlNamespace="l" ClrNamespace="TicTacToe" ?>

<Window  xmlns:local="local">

  <Window.Resources>

    <DataTemplate DataType="{x:Type local:PlayerMove}">

      <Grid>

        <TextBlock

          TextContent="{Binding Path=PlayerName}"

          FontSize ="32"

          FontWeight="Bold"

          VerticalAlignment="Center"

          HorizontalAlignment="Center" />

        <TextBlock

          TextContent="{Binding Path=MoveNumber}"

          FontSize="16"

          FontStyle="Italic"

          VerticalAlignment="Bottom"

          HorizontalAlignment="Right" />

      </Grid>

    </DataTemplate>

    

  </Window.Resources>

  

</Window>

使用在第一章介绍的xaml映射语法,我们将PlayMover类型间接映射到了带有xmlns属性的xaml中,我们将其作为数据模板的数据类型。现在,无论何时WPF遇到一个PlayMove对象,如我们所有的按钮内容,数据模板都会展开。在我们这种情形,这个模板由一个grid组成,其中排列了两个TextBlock,一个在按钮中间显示玩家名,另一个在按钮右下位置显示移动的步数,伴随着其它的一些设置使之看起来更漂亮。

5.5.2带样式的数据绑定

尽管如此,这些属性设置深埋在数据模板的很深层。正像这是一个好的想法将“魔力数字”移出你的代码,将它们拉出去并给它们一个易于管理的名称,这是一个好的想法将成组的设置移动到样式中,如示例5-23所示。

*将成组的设置移动到样式中,还顾及皮肤和主题,在第六章会介绍。

示例5-23

<Window.Resources>

  <Style x:Key="CellTextStyle" TargetType="{x:Type TextBlock}">

    <Setter Property="FontSize" Value="32" />

    <Setter Property="FontWeight" Value="Bold" />

    <Setter Property="VerticalAlignment" Value="Center" />

    <Setter Property="HorizontalAlignment" Value="Center" />

  </Style>

  <Style x:Key="MoveNumberStyle" TargetType="{x:Type TextBlock}">

    <Setter Property="FontSize" Value="16" />

    <Setter Property="FontStyle" Value="Italic" />

    <Setter Property="VerticalAlignment" Value="Bottom" />

    <Setter Property="HorizontalAlignment" Value="Right" />

  </Style>

  <DataTemplate DataType="{x:Type l:PlayerMove}">

    <Grid>

      <TextBlock

        TextContent="{Binding Path=PlayerName}"

        Style="{StaticResource CellTextStyle}" />

      <TextBlock

        TextContent="{Binding Path=MoveNumber}"

        Style="{StaticResource MoveNumberStyle}" />

    </Grid>

  </DataTemplate>

</Window.Resources>

使用样式是很通常的,从而可以使用数据模板设置成组的属性,创建带有大量属性的大量元素。图5-7显示了这个结果。

图5-7





仍然,像图5-7一样漂亮,交互作用是一种WPF给予的令人厌烦的能力。让我们看一下使用在应用程序中使用样式属性我们都能做些什么。

《Programming WPF》翻译 第5章 5.数据模板和样式的更多相关文章

  1. WPF应用的一些小总结(模板、样式,上下文)

    1: 后台:XXX.DataContext = ViewModel(数据对象)(XXX可以是当前的UserControl.Windows.Grid.TextBlock.Lable等UI控件,选择不同的 ...

  2. 《Programming WPF》翻译 第5章 6.触发器

    原文:<Programming WPF>翻译 第5章 6.触发器 目前为止,我们已经看到样式,作为一个Setter元素的集合.当应用一个样式时,在Setter元素中描述的设置不会无条件地应 ...

  3. 《Programming WPF》翻译 目录

    原文:<Programming WPF>翻译 目录 注:第1.2章我只做了笔记,没有翻译,请大家阅读时注意. 还有就是,这本书的英文版本下载:[O'Reilly] Programming ...

  4. Hadoop专业解决方案-第1章 大数据和Hadoop生态圈

    一.前言: 非常感谢Hadoop专业解决方案群:313702010,兄弟们的大力支持,在此说一声辛苦了,经过两周的努力,已经有啦初步的成果,目前第1章 大数据和Hadoop生态圈小组已经翻译完成,在此 ...

  5. 《Programming WPF》翻译 第9章 3.自定义功能

    原文:<Programming WPF>翻译 第9章 3.自定义功能 一旦你挑选好一个基类,你将要为你的控件设计一个API.大部分WPF元素提供属性暴露了多数功能,事件,命令,因为他们从框 ...

  6. 《Programming WPF》翻译 第9章 2.选择一个基类

    原文:<Programming WPF>翻译 第9章 2.选择一个基类 WPF提供了很多类,当创建一个自定义元素时,你可以从这些类中派生.图9-1显示了一组可能作为类--可能是合适的基类, ...

  7. 《Programming WPF》翻译 第7章 5.可视化层编程

    原文:<Programming WPF>翻译 第7章 5.可视化层编程 形状元素能提供一种便利的方式与图形一起工作,在一些情形中,添加表示绘图的元素到UI树中,可能是比它的价值更加麻烦.你 ...

  8. 《Programming WPF》翻译 第7章 1.图形基础

    原文:<Programming WPF>翻译 第7章 1.图形基础 WPF使得在你的应用程序中使用图形很容易,以及更容易开发你的显卡的能力.这有很多图形构架的方面来达到这个目标.其中最重要 ...

  9. 《Programming WPF》翻译 第7章 2.图形

    原文:<Programming WPF>翻译 第7章 2.图形 图形时绘图的基础,代表用户界面树的元素.WPF支持多种不同的形状,并为它们每一个都提供了元素类型. 7.2.1基本图形类 在 ...

随机推荐

  1. 深入理解Java的protected修饰符

    其实Java的protected修饰符,权限定义的很微妙,大致有以下几种: (1)protected控制符用于修饰方法和成员变量: (2)一个类的protected方法或成员变量,在包外是不能通过该类 ...

  2. spoj1812-Longest Common Substring II(后缀自动机)

    Description A string is finite sequence of characters over a non-empty finite set Σ. In this problem ...

  3. 马士兵 Servlet_JSP(3) Servlet和JSP的通信(源代码)

    (1)从JSP调用Servlet可用<jsp:forward>,请求信息自动转到Servlet FromJspToServlet.jsp <html>     <body ...

  4. PyCharm常用设置

    pycharm,优秀的python开发工具 本文介绍一点python开发工具,pycharm的使用方式. 内容仅仅为最常用的几点,想要了解更多,请自行谷歌. 1.常用工具栏 唤出常用工具栏,View ...

  5. spring-data-mongodb必须了解的操作

    http://docs.spring.io/spring-data/data-mongo/docs/1.0.0.M5/api/org/springframework/data/mongodb/core ...

  6. 【Linux】linux经常使用基本命令

    Linux中很多经常使用命令是必须掌握的,这里将我学linux入门时学的一些经常使用的基本命令分享给大家一下,希望能够帮助你们. 这个是我将鸟哥书上的进行了一下整理的,希望不要涉及到版权问题. 1.显 ...

  7. php:兄弟连之面向对象版图形计算器1

    曾经看细说PHP的时候就想做这个,可是一直没什么时间,这次总算忙里偷闲搞了代码量比較多的project. 首先,文档结构,都在一个文件夹下就好了,我的就例如以下. 一開始,进入index.php文件. ...

  8. DevExpress控件-GridControl根据条件改变单元格/行颜色--转载

    DevExpress控件-数据控件GridControl,有时我们需要根据特定条件改变符合条件的行或者单元格颜色达到突出显示目的,现在动起鼠标跟我一起操作吧,对的,要达到这个目的您甚至都不用动键盘. ...

  9. windows程序消息机制(Winform界面更新有关)--转

    1. Windows程序消息机制 Windows GUI程序是基于消息机制的,有个主线程维护着消息泵.这个消息泵让windows程序生生不息. Windows程序有个消息队列,窗体上的所有消息是这个队 ...

  10. ajaxFileUpload js判断类型

    function ajaxFileUpload() {    var File_box = document.getElementById('V_file');    var extend = Fil ...