WPF模板开发介绍

WPF(Windows Presentation Foundation )是ASP.Net3.0中的技术,主要解决界面问题.通过它 我们可以制作出三维图形,还有很多自定义模板,让我们的UI层更加丰富多彩.今天我就先讲个自定义模板的例子,以后再介绍三维图型等.

首先,你必须装有.Net Framework3.0框架,还有WindowsSDK_Vista,大家先看一下代码,我再做出解释,代码如下:

< Page  x:Class ="XAMLBrowserApplication1.Page1"     xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"     Title ="Page1"      >    < StackPanel >      < ProgressBar  Orientation ="Vertical"  Margin ="50,0,50,0"  Value ="{Binding ElementName=wzl,Path=Value}" >        < ProgressBar .Template >          < ControlTemplate >            < StackPanel  Orientation ="Horizontal" >              < Rectangle  Name ="PART_Track"  Fill ="Blue"  Width ="20"  Height ="200"  Margin ="400,0,0,0" />              < Rectangle  Name ="PART_Indicator"  Fill ="Brown"  Width ="20" />                    </ StackPanel >          </ ControlTemplate >        </ ProgressBar.Template >      </ ProgressBar >      < ScrollBar  Name ="wzl"  Maximum ="100"  Margin ="50"  Minimum ="0"  Orientation ="Horizontal"  SmallChange ="1" ></ ScrollBar >        </ StackPanel > </ Page >

首先在ProgressBar里的Value属性进行一个绑定,它是根据下面的ScrollBar的名称(即wzl)的值来变化的.让就可以使用ProgressBar.Template,这是一个模板的类,在这个列里面就可以使用ControlTemplate了.里面定义里2个矩形,这2个矩形的名字是PART_Track和PART_Indicator,这2个名字是非常特殊的名字,是Windows已经命名了的部件.PART_Track是进行比对的控件,PART_Indicator则是根据ProgressBar里的Value绑定变化而变化的.弄清楚这个其他的就不难了.由于PART_Track有Height,PART_Indicator而没有,则PART_Indicator的Height跟着绑定变化.

然后根据这个我写了一个这个,大家就应该更清楚了吧,代码如下:

   < StackPanel >      < ProgressBar  Orientation ="Horizontal"  Value ="{Binding ElementName=wzl,Path=Value}" >        < ProgressBar .Template >          < ControlTemplate >            < Canvas >              < Rectangle  Name ="PART_Track"  Width ="200"  Height ="20"  Canvas.Top ="50"  Canvas.Left ="50" />              < Rectangle  Name ="PART_Indicator"  Height ="20"   Canvas.Top ="80"   Canvas.Left ="50" />              < Polygon  Points ="5 5 5 -5 -75 0"              Stroke ="Black"  Fill ="Red"  Canvas.Left ="400"  Canvas.Top ="120" >                 <!-- Points为下 上 中三个点坐标 -->                < Polygon .RenderTransform >                  < RotateTransform                      Angle ="{Binding ElementName=PART_Indicator,                                                 Path=ActualWidth}"   />                </ Polygon.RenderTransform >              </ Polygon >            </ Canvas >          </ ControlTemplate >        </ ProgressBar.Template >      </ ProgressBar >      < ScrollBar  Name ="wzl"  Maximum ="100"  Minimum ="0"  Orientation ="Horizontal"  SmallChange ="1" ></ ScrollBar >    </ StackPanel >