如何将Fill属性绑定到controltemplate中的自定义属性

时间:2012-03-19 16:17:54

标签: wpf wpf-controls

我有一个按钮控件,其模板在外部资源Theme.xaml中进行了分析。在controltemplate定义下面:

    <ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}">
     <Grid x:Name="Grid">
       <Border x:Name="Background" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="2,2,2,2" CornerRadius="2,2,2,2">
       <Border x:Name="Hover" Background="{StaticResource HoverBrush}" CornerRadius="1,1,1,1" Height="Auto" Width="Auto" Opacity="0"/>
       </Border>
       <StackPanel Orientation="Horizontal" Margin="2,2,2,2">
          <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True" />
       </StackPanel>

...

现在我添加了一个椭圆项,必须用红色或绿色填充(作为信号量),具体取决于我的usercontrol中定义的自定义属性:

<UserControl.Resources>
    <ResourceDictionary Source="Themes/theme.xaml"/>
</UserControl.Resources>

<Grid>
    <Button Click="Button_Click"></Button>

    <Ellipse x:Name="ellipse1" Width="20" Height="20"  Margin="5,40,45,5"></Ellipse>

</Grid>

在后面的代码中我有:

private SolidColorBrush ButtonValue_;
public SolidColorBrush ButtonValue {
    get { return ButtonValue_; }
    set {
        ButtonValue_ = value;
    }
}

我正在尝试将CONTROLTEMPLATE这个椭圆项目放入,但是我对如何使用 ButtonValue 自定义属性绑定椭圆的 Fill 属性有一些问题进入controlTemplate。

任何提示? 提前致谢

2 个答案:

答案 0 :(得分:1)

你可以去几个方向:

  1. 实现自定义控件,这是您自己的类派生自现有控件(在您的情况下为Button)。添加依赖项属性(例如ButtonValue)。注意 - 依赖属性不是标准的.NET属性 - 它们还有更多。请查看以下示例:http://msdn.microsoft.com/en-us/library/cc295235(v=expression.30).aspx(自定义按钮)或此处:http://wpftutorial.net/HowToCreateACustomControl.html(更简单的示例,但没有属性。

  2. 拥有控件的数据上下文。通常,数据上下文是一个单独的类(也就是“视图模型”),但如果您不遵循mvvm范例,那么数据上下文就是自我。无论您使用何种数据上下文,它都必须从INotifyPropertyChanged派生,并且必须提交PropertyChanged事件。

  3. (推荐!)为 CheckBox 创建一个控制模板。当你想到它时,逻辑你的控件实际上是一个具有二进制状态的按钮。在您的情况下为红色/绿色,Checkged / Unchecked为CheckBox。从逻辑上讲,您正在寻找一个复选框,但您只想以不同的方式呈现它。

  4. 因此,在控件模板中,绘制椭圆,并为IsChecked属性添加触发器:

    <ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type CheckBox}">
        <Grid>
            ... everything else in the control ...
            <Ellipse x:Name="ellipse1" Width="20" Height="20"  Margin="5,40,45,5" />
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsChecked" Value="True">
                <Setter TargetName="ellipse1" Property="Fill" Value="Red" />
            </Trigger>
            <Trigger Property="IsChecked" Value="False">
                <Setter TargetName="ellipse1" Property="Fill" Value="Green" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    

    这是WPF的行为演示文稿之间差异的一个很好的示例。 虽然你的控件可能看起来像一个按钮,但它的行为就像一个CheckBox,因为它有两种状态。

    编辑:使用 ToggleButton - 这是CheckBox(和RadioButton)的基类,它具有您需要的功能,包括IsChecked属性。

答案 1 :(得分:0)

您有几个选择:

1.最简单的方法是重新使用未使用的画笔或颜色(带转换器)按钮现有属性:

 <Window.Resources>
      <ControlTemplate x:Key="repurposedProperty" TargetType="Button">
        <Border Background="{TemplateBinding BorderBrush}">
          <ContentPresenter/>
        </Border>
       </ControlTemplate>
    </Window.Resources>

...

<Button Template="{StaticResource repurposedProperty}">Button</Button>

2.其他选项是定义附加属性并在ControlTemplate中使用它。在您应用模板的任何按钮上,您必须设置附加属性:

public static readonly DependencyProperty AttachedBackgroundProperty =
            DependencyProperty.RegisterAttached("AttachedBackground", typeof (Brush), typeof (MainWindow), 
            new PropertyMetadata(default(Brush)));

        public static void SetAttachedBackground(UIElement element, Brush value)
        {
            element.SetValue(AttachedBackgroundProperty, value);
        }

        public static Brush GetAttachedBackground(UIElement element)
        {
            return (Brush) element.GetValue(AttachedBackgroundProperty);
        }

...

&LT;

Window.Resources>
        <ControlTemplate x:Key="attachedProperty" TargetType="Button">
            <Border Background="{TemplateBinding WpfApplication1:MainWindow.AttachedBackground}">
                <ContentPresenter/>
            </Border>
        </ControlTemplate>
    </Window.Resources>

...

<Button Template="{StaticResource attachedProperty}">
            <WpfApplication1:MainWindow.AttachedBackground>
                <SolidColorBrush Color="Pink"></SolidColorBrush>
            </WpfApplication1:MainWindow.AttachedBackground>
  Button</Button>

PS:您可以使用绑定来设置附加属性的值。