This post is in continuation to an explanation on WPF Templates.
1. ControlTemplate- You use this, when you want to completely redefine the visualappearance of any control. Say, you don‘t want a radiobutton to looklike a radiobutton - you want it to look like a smiley instead. Smilingmeans Checked, and Frowning means Unchecked. You could easily acheivethis using ControlTemplate.
2. ItemsPanelTemplate -Is a rather simple kind of template, it lets you control the appearanceof the "ItemsPanel" property defined by "ItemsControl" on elements suchas ListBox or ComboBox.
3. DataTemplate- is probably the most common kind of template you will use. It letsyou change how "Content" is rendered on any control. So if you have anobject called "Customer" and you want to define a standard look andfeel for "Customer" - you‘d use DataTemplate.
We‘ve all seen a button. No not your shirt button - I‘m talking about a button on the screen - a Windows Button.
Y‘know, it‘s rectangular, with some text on it - boring as hell.What‘s up with that, heck even a M&M dispensing machine has a moreattractive button. Actually, most windows controls have a standard"look & feel". While some folks argue that there is an advantage ofthis familiarity, I would argue that there is still a learning curve -of learning computers, and understanding what a button looks like, whata checkbox looks like, so on so forth.
Here is how you‘d create a boring button in WPF -
<Button HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" Height="100" >
Now, what if Iwanted to completely swap out the UI, but retain the functionality?Easy, use the Button.Template property as shown below -
<Button HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" Height="100" >
<Button.Template>
<ControlTemplate>
.. specify look and feel here ..
</ControlTemplate>
</Button.Template>
</Button>
InsideControlTemplate, you can start specifying the look & feel of yourbutton, this could be as creative as you want - even 3d stuff. I‘mgoing to keep it simple and use a simple colorful rectangle to rendermy button -
<ControlTemplate>
<Rectangle RadiusX="5" RadiusY="5" Stroke="LightYellow" StrokeThickness="3" Name="myRectangle">
<Rectangle.Fill>
<VisualBrush Opacity="0.7">
<VisualBrush.Visual>
<TextBlock Name="myTextBlock" Foreground="LightYellow" Background="DarkBlue" Padding="10">Press Me!</TextBlock>
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.Fill>
</Rectangle>
This causes the button to look a whole lot more attractive as shown below -

(Okay okay, this is about how creative I feel at 1 AM. But theidea being, you could use tools like Expression*.*/Zam3d to create abutton that looks like whatever you wish.)
Now the problem is, a Windows Button gives the user a feedback whenclicked. So it actually looks like a button is being clicked. How can Iacheive the same in this totally customized button? Earlier I hadblogged about " <ControlTemplate.Triggers> <Trigger Property="Button.IsPressed" Value="True"> <Setter TargetName="myRectangle" Property="Stroke" Value="LightGreen"/> <Setter TargetName="myTextBlock" Property="Background"> <Setter.Value> <LinearGradientBrush> <GradientStop Offset="1" Color="DarkBlue"/> <GradientStop Offset="0.5" Color="Blue"/> <GradientStop Offset="0" Color="DarkBlue"/> </LinearGradientBrush> </Setter.Value> </Setter> </Trigger> </ControlTemplate.Triggers> Great, now the full button‘s XAML looks like this (font size reduced- because I know you‘re gonna copy paste this into XAMLPad or sump‘n) - <Button HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" Height="100" > <Button.Template> <ControlTemplate> <Rectangle RadiusX="5" RadiusY="5" Stroke="LightYellow" StrokeThickness="3" Name="myRectangle"> <Rectangle.Fill> <VisualBrush Opacity="0.7"> <VisualBrush.Visual> <TextBlock Name="myTextBlock" Foreground="LightYellow" Background="DarkBlue" Padding="10">Press Me!</TextBlock> </VisualBrush.Visual> </VisualBrush> </Rectangle.Fill> </Rectangle> <ControlTemplate.Triggers> <Trigger Property="Button.IsPressed" Value="True"> <Setter TargetName="myRectangle" Property="Stroke" Value="LightGreen"/> <Setter TargetName="myTextBlock" Property="Background"> <Setter.Value> <LinearGradientBrush> <GradientStop Offset="1" Color="DarkBlue"/> <GradientStop Offset="0.5" Color="Blue"/> <GradientStop Offset="0" Color="DarkBlue"/> </LinearGradientBrush> </Setter.Value> </Setter> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Button.Template> </Button> NEAT, now lets throw in some glassy effect, and run the app. Not Clicked - 
Clicked -

NEAT! :-)
聯(lián)系客服