silverlight教程（7）——使用控制模板来定制一个控制的外观和感觉

In this tutorial segment we'll look at a few ways you can customize controls, and then close out by polishing up the user interface of our Digg application using these techniques.在本教程部分，我们将看到几个方法，你可以通过定制控制，然后关闭，由抛光了用户界面，我们的digg中应用这些技巧。

Customizing the Content of Controls 定制的内容管制

In Part 1 of our tutorial we added a simple button control to the page and demonstrated how to set a custom "Push Me!"在第1部分我们的补习，我们增加了一个简单的按钮控制网页展示了如何建立一个定制的"推我！ " text string for its content.  We then wired up a "Click" event handler that executed code when it was clicked:文本字符串的内容。然后，我们可以用电了"点击"事件处理即处死代码时，它被点击：

This caused the button to render like below within the browser:这引起了按钮，使想下面该浏览器：

One of the things that might surprise you about the Button control is that its "Content" property does not have to be a simple string like "Push Me!".  We can in fact set the "Content" property to be any sequence of Shapes or Controls we want.事情之一，有可能突击一下按钮控制的是，它的"内容"的财产并不一定是一个简单的字符串喜欢的"推我！ " ，我们其实可以在设置的"内容"的财产，以什么顺序形状或控制我们想要的。

For example, we could embed a StackPanel with an <Image> and <TextBlock> control within it:举例来说，我们可以嵌入一个stackpanel与<image>和<textblock>控制它：

This will cause our Button to look like below at runtime.  Note that it still retains the same functionality behavior (push it and the button will still depress, and the click event handler will fire like before):这将导致我们的按钮看起来像下面时有效。指出，它仍保留了相同的功能特性（推它和按钮仍会压低，并通过点击事件处理，将消防像以前） ：

We could alternatively use Shape controls (like the Ellipse control below) to create custom vector graphics inside the button.我们可以交替使用形状控制（如椭圆控制以下） ，以创建定制的向量图形内的按钮。

Notice above how I'm filling the Ellipse control with an offset RadialGradientBrush to add a nice reflective polish to it:公告上述如何，我填补椭圆控制抵消radialgradientbrush加入尼斯反射波兰语给它：

We could even get wacky and embed interactive controls like a Calendar control within the Button:我们甚至可以得到怪诞和嵌入互动管制像一个日历控制按钮：

In the above sample the Calendar is fully interactive - meaning end-users can actually page back and forward through the months and choose a date on the Calendar, and then push its containing button to trigger the "Click" event handler: (note: I'm not sure why this would be a good user experience - but it does show off the flexibility of what you can do!).在上述样本日历是完全互动的-即最终用户其实可以一页前进后退通过内，并选择一个日期上的日历，然后将其含有的按钮，启动"点击"事件处理： （注：我百万不知道为什么，这将是一个很好的用户体验-但它确实表明小康的灵活性，您该怎么办！ ） 。

These types of content customization scenarios I outlined above work not just for Button controls, but likewise for all other controls that derive from the ContentControl base class.这些类型的内容，个性化的情况，概述了上述工作不仅是为按钮控制，但同样对于其他所有控制来自contentcontrol基地班。

Customizing Controls using Control Templates 定制控制用控制模板

The control model used by Silverlight and WPF allows you to go much further than just customizing the inner content of a control.控制模型所使用的silverlight和wpf让你能更进一步不仅仅是定制党内的内容控制。 It optionally allows you to completely replace a control's visual tree with anything you want - while still keeping the control behavior intact.它可以选择让您完全取代管制的视觉树与任何你想-虽然仍保持控制行为完好无损。

For example, let's say we don't want our buttons to have the default rectangle push button look, and instead we want them to have a custom round button look like below:比如，我们不妨说，我们不希望我们的按钮有默认的矩形按钮看看，而不是我们希望他们能有一个习俗轮按钮样子如下：

We could accomplish this by creating a "RoundButton" style in our App.xaml file.  Within it we'll override the Button's "Template" property, and provide a ControlTemplate that replaces the Button's default Rectangle visual with an Ellipse control and a TextBlock inside it:我们能做到这一点，创造一个" roundbutton "风格，在我国app.xaml档案。内部，我们将凌驾按钮的"模板"的财产，并提供一个controltemplate取代按钮默认的矩形视觉与椭圆控制和textblock内它：

We can then have a <Button> control reference this Style resource to use this "RoundButton" look and feel:我们便可以有一个<button>控制参考这种风格的资源，利用这一" roundbutton "外观与感觉：

Incorporating Content within Our Control Templates 包含的内容在我们控制的范本

One thing you might have noticed in our "RoundButton" control template above is that the size of the Button, and the Content displayed within it, are hard-coded (it always says "Push Me!").有件事你可能已经注意到，在我们的" roundbutton "控制模板以上是大小的按钮，显示的内容，它内部的，是硬编码（它总是说， "推我！ " ） 。

The good news is that WPF and Silverlight make it possible for us to have these settings be customizable as well.  We can do this using a {TemplateBinding ControlProperty } markup extension syntax inside the control template to bind to properties of the control.  This will allow our control template to adapt as properties are set on the Control by an external developer:好消息是， wpf和silverlight使我们有可能有这些设置可定制的，以及我们可以做到这一点用（ templatebinding controlproperty ）标记扩展语法内部控制模板约束性质的控制，这将使我们所能控制的样板，以适应作为属性是一套关于控制由外部开发商：

Notice above how instead of adding a <TextBlock> control to display the content, we are instead using the <ContentPresenter> control.  That will enable us to have the button display not just text strings, but any custom content as well (just like we did earlier in this tutorial).以上通知，而不是如何加<textblock>控制要显示的内容，我们正在用这一新<contentpresenter>控制，这将使我们能够有按钮显示不是简单的文字字串，但任何定制内容以及（就像我们较早时说，在此教程） 。

We can then use the above Style on three buttons below (each with different content and property settings):我们便可以利用上述方式对三个按钮下面（各有不同的内容和财产设定） ：

The above Buttons will then display like below (and yes - the scaled Calendar control still supports paging and date selection!):上述按钮，然后将展出像下面（是-规模日历控制仍然支持寻呼和日期的选择！ ） ：

If we wanted to go further we could optionally add storyboard animations to the ControlTemplate (to handle button states like "hover", "focus" and "pushed").  This capability enables us to create really polished user interaction scenarios, and enable scenarios not possible with HTML.如果我们想要更进一步，我们可以有选择地放入串连动画向controltemplate （处理按钮国家一样， "悬停" ， "焦点"和"推" ） 。这方面的能力，使我们能够制造出非常抛光用户交互情景，让情景不可能与HTML 。

Developers working with controls in an application can remain oblivious to all of this style and control interaction customization.  They can handle events off of the controls and manipulate the control's object model as normal, and have a designer own sculpting and customizing the look and feel separately using styles and templates.开发人员的管制，在申请时，可以继续无视这一切，作风和控制互动定制，他们可以处理的事件小康的控制和操纵控制的对象模型作为正常的，有一个设计师自己的造型和定制的外观和感觉分开用风格和模板。

Polishing up our Digg Application 抛光了我们digg应用

Now that we've covered some of the basics of how Control Templates work, let's use them in a few places to add a bit more UI polish to our Digg application.现在，我们已涵盖的一些基本知识，如何控制模板工作，让它们用在少数地方，以增添多一点的UI波兰语我们digg申请。

Right now there is one obvious place in the application that clearly needs some work - the "Close" button on our User Control:现在有一个很明显的地方，在应用这显然需要一定的工作-"关闭"按钮，我们的用户控制：

The good news is that this is easy for either us (or a designer working with us) to fix.  We could add a ControlTemplate to the "CloseButton" style in our App.xaml file and add some custom vector shapes to provide a more attractive close button (note: a more competent designer than me could also add hover and animation behavior to the vector graphic shapes and make it look even better):好消息是，这是很容易要么我们（或设计师与我们共事等）确定，我们可以添加controltemplate向" closebutton "风格，在我国app.xaml档案，并添加一些定制矢量形状，以提供更具吸引力关闭按钮（注意：一个更称职的设计师比我还可以放入悬停和动画行为，以矢量图形的形状，使之期待，甚至更好） ：

When we run the application again the button will now look like it does below:当我们运行应用程序再次按钮，将现在看似但这如下：

The second place in our application that I think we should work to polish up more is the outer UI of our ListBox.  If you look closely at it you can see that the ListBox in Beta1 has a nested border look as its default (note: we are still finalizing the default skins we ship with so this will likely change before the final release):第二次发生在我国的应用，我认为我们应该致力于波兰语了，更重要的是外层的UI我们的列表，如果你仔细看看它，你可以看到，该列表在素beta1有一个嵌套边界看作为其默认（注：我们仍在敲定默认皮肤，我们船，所以这可能会改变之前的最后一份新闻稿） ：

We can remove this and go with a flat border around the ListBox by customizing its Control Template.  Below is a ListBox style with a custom template that does this:我们可以删除此去同一个单位边界周围的列表，由用户自己控制模板，下面是一个列表风格定制模板，这是否：

Notice how we've removed all border controls from the ListBox.  We are now just using the <ScrollViewer> control in Silverlight (which enables scrolling of any content within it) and embedding into it an <ItemsPresenter/> control which will own rendering the actual items in the ListBox (it will use the <DataTemplate> we created in Part 4 to render these items).公告如何，我们已经取消了所有的边界管制，从列表，现在我们只用了<scrollviewer>控制在silverlight （使滚动的任何内容） ，并嵌入到它的一个<itemspresenter/>控制，将自己绘制了实际项目中的列表框（它会利用<datatemplate>我们创造了在第4部分，以使这些项目） 。

Below is the more flat look this now gives us for our List:下面是更多的单位看看这个，现在让我们为我们的名单：

What is cool is that we did not have to change any code in our application, nor modify the XAML markup on our actual controls, in order to make these look and feel changes.  This code/design separation enables a great developer and designer workflow when working on Silverlight and WPF applications.  Expression Blend and the overall Expression Studio products take these control design capabilities to the next level, and will deliver a rich designer toolset that makes this customization easy.什么是酷的是，我们没有改变任何代码，在我们的申请，也没有修改xaml标记对我们的实际控制，为了使这些外观与感受的变化，这代码/设计分离，使一个伟大的开发商和设计师的工作流程，当工作silverlight和wpf申请。表达配方和整体表达Studio产品采取这些控制设计能力，到新的层次，并会提供了丰富的设计工具，使这一定制容易。