【问题标题】:Template for basic reusable button基本可重用按钮的模板
【发布时间】:2013-12-22 23:06:07
【问题描述】:

在 WPF (VS2013) 中,我正在创建一个按钮,如下所示:

<Button>
  <Label>1</Label>
</Button>

每个按钮都有更多功能,例如增加标签的字体大小、网格行/列分配,我可能会为标签使用绑定以便更改数字。我正在创建一个计算器应用程序,因此我需要重复使用此按钮 10 次(每个数字 0-9 一个)。我不想复制/粘贴此按钮 XML 10 次,而是想看看是否可以将其模板化。

我已经阅读了一些关于 ControlTemplate 和 DataTemplate 的内容,但我不确定这两种方法是否正确。我也不清楚什么应该是样式或什么应该是模板。

因此,如果有人可以帮助我了解如何“模板化”按钮及其样式(例如宽度、高度、字体大小等),以便它们可以轻松重用,那将大有帮助。感谢指导!

【问题讨论】:

    标签: c# wpf


    【解决方案1】:

    当您想要覆盖控件的整个模板时使用ControlTemplate,当您想要告诉 WPF 如何绘制数据对象(通常是DataContext)时使用DataTemplate,并使用ContentTemplate当您想告诉 WPF 如何绘制对象的 Content 属性时。

    创建一个全新的ControlTemplate 非常复杂。为了演示,请查看 this MSDN example 以获取示例 ControlTemplate 以获取 Button

    在您的情况下,我建议为您的按钮创建一个Style,并使用HeightWidthFont 等常见属性的设置器。如果您想绘制按钮的Content 属性在不完全覆盖按钮模板的自定义方式中,包含一个 ContentTemplate 样式设置器来告诉 WPF 如何绘制 Button.Content 属性。

    <Button Style="{StaticResource CalculatorButton}" Content="1" />
    

    <Style x:Key="CalculatorButton" TargetType="{x:Type Button}">
        <Setter Property="Height" Value="50"/>
        <Setter Property="Width" Value="50"/>
        <Setter Property="FontSize" Value="14" />
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <TextBlock Text="{Binding }" FontFamily="Wingdings 3" FontWeight="Bold" FontSize="18" Foreground="Navy" />
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    

    ControlTemplate 定义了按钮的外观,ContentTemplate 定义了Button.Content 的外观,而用于ContentTemplateDataTemplate 定义了如何绘制“1”的数据对象。

    【讨论】:

    • 这看起来很不错。一些问题:(1){Binding } 应该是空的吗?这是否告诉它查看在 XAML 中添加每个按钮时指定的 Content 属性? (2) 你的最后一个Setter 指定了Value=,下面还有一个&lt;Setter.Value&gt;,这是错了吗?
    • 对这两个问题都是 :) {Binding } 是空的,所以它只会显示当前数据上下文是什么,在这种情况下是 Button.Content,我有一个错误我设置了两次Value 属性的示例。我将编辑我的答案以删除它,谢谢。
    • 谢谢!最后一个问题......你怎么知道Button.Content 是它将引用的数据上下文?我不熟悉此类事物的“搜索模式”。
    • @RobertDailey Hrmmm 我可能首先通过 Google 了解到这一点 :) 但这是有道理的,ContentTemplate.Content 属性的模板,DataTemplate 旨在告诉 WPF 如何绘制它的数据层,也就是DataContext。如果您是 WPF 新手,您可能有兴趣阅读我的博客文章 - What is this "DataContext" you speak of?。它解释了更多关于 WPF 的数据层与它的 UI 层
    • 我无法弄清楚的一件事是,当通过{Binding}(未指定属性)用作对象时,父(按钮)DataContext 是如何映射到Button.Content 的。这是我们在每个&lt;Button&gt; 元素上设置的,带有数字。默认行为应该是 Button 的 DataContext 为 NULL(因为我们没有在每个 Button 上设置它),并且它永远不会找到数据上下文,因为我们从未设置过。我很困惑!
    【解决方案2】:

    您可以从按钮样式的副本开始。使用 Blend(VS 的一部分)来创建:打开对象树内按钮的上下文菜单,然后选择“编辑模板”(或类似的,手头没有英文版本),然后选择“模板的副本” (或类似的)。

    现在您可以更改属性(在设计器或 XAML 中)。每个应具有此样式的按钮都需要引用此新资源。

    【讨论】:

      【解决方案3】:

      您需要创建一个新的按钮样式。学习曲线不是太陡峭,但好处是巨大的。你可以从这里开始了解它:http://msdn.microsoft.com/en-us/library/ms745683(v=vs.110).aspx

      长话短说:使用 Blend 打开您的项目,右键单击您的按钮,“编辑样式”,“编辑副本”。如果您选择在 Application 中定义它,您可以在其他页面中重复使用它(它将在您的 App.xaml 文件中)

      一旦有了基本样式,就可以根据需要对其进行编辑。

      【讨论】:

      • 奇怪的是,我没有“编辑样式”选项,只有“编辑模板”会创建 &lt;ControlTemplate&gt; 而不是 &lt;Style&gt;,就像我期望的那样......
      • 还有另一个问题...我只是想为现有控件的层次结构创建一个模板,我不会更改控件本身。我想要的模板实际上只是将 XML 放置在适当的位置,作为一种元编程技术。但是,我仍然想使用股票按钮和标签。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2016-08-01
      • 2019-07-16
      • 1970-01-01
      • 1970-01-01
      • 2010-10-14
      • 2015-11-30
      • 2011-08-29
      相关资源
      最近更新 更多