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

简介: 原文:《Programming WPF》翻译 第5章 5.数据模板和样式让我们想象一下我们想要实现TTT更有娱乐性的一个版本(这是大部分游戏中最重要的特色)。例如,TTT的一种变体允许玩家每次只能占据3个格子,去除第一步在下第四步的时候,去除第二步在下第五步的时候,,以此类推。
原文: 《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( ) {
      
      
this.moveNumber = 0;
    }


    
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给予的令人厌烦的能力。让我们看一下使用在应用程序中使用样式属性我们都能做些什么。

目录
相关文章
|
8月前
|
C#
WPF疑难问题之Treeview中HierarchicalDataTemplate多级样式
WPF疑难问题之Treeview中HierarchicalDataTemplate多级样式
149 0
|
1月前
|
文字识别 C# 开发者
WPF开源的一款免费、开箱即用的翻译、OCR工具
WPF开源的一款免费、开箱即用的翻译、OCR工具
|
2月前
|
C#
浅谈WPF之样式与资源
WPF通过样式,不仅可以方便的设置控件元素的展示方式,给用户呈现多样化的体验,还简化配置,避免重复设置元素的属性,以达到节约成本,提高工作效率的目的,样式也是资源的一种表现形式。本文以一个简单的小例子,简述如何设置WPF的样式以及资源的应用,仅供学习分享使用,如有不足之处,还请指正。
42 0
|
8月前
WPF-布局样式练习-Day02-聊天气泡
WPF-布局样式练习-Day02-聊天气泡
129 1
|
5月前
|
算法 C# UED
浅谈WPF之控件模板和数据模板
WPF不仅支持传统的Windows Forms编程的用户界面和用户体验设计,同时还推出了以模板为核心的新一代设计理念。在WPF中,通过引入模板,将数据和算法的“内容”和“形式”进行解耦。模板主要分为两大类:数据模板【Data Template】和控件模板【Control Template】。
96 8
|
8月前
|
C#
WPF-Binding问题-模板样式使用Binding TemplatedParent与TemplateBinding区别
WPF-Binding问题-模板样式使用Binding TemplatedParent与TemplateBinding区别
82 0
|
8月前
WPF-样式问题-处理ListBox、ListView子项内容全填充问题
WPF-样式问题-处理ListBox、ListView子项内容全填充问题
114 0
|
8月前
|
C#
WPF-布局样式练习-Day01
WPF-布局样式练习-Day01
71 0
|
8月前
WPF-样式问题-ListBox或ListView中子项全填充去除边线问题
WPF-样式问题-ListBox或ListView中子项全填充去除边线问题
72 0
|
17天前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库