重用需要参数的Button模板

时间:2012-07-03 23:24:42

标签: c# .net wpf binding datatemplate

我有几个按钮,我设置如下:

<Button Template="{DynamicResource btnTmplt}" Command="{Binding ImgChgeCmd}" >
  <Button.Resources>
  <ControlTemplate x:Key="btnTmplt" TargetType="{x:Type Button}">
    <StackPanel x:Name="stPanel" HorizontalAlignment="Left" Width="Auto" 
                Height="Auto" Orientation="Horizontal">
    <Image x:Name="img" Source=""></Image>
    </StackPanel>
      <ControlTemplate.Triggers>
        <Trigger Property="IsEnabled" Value="False">
          <Trigger.Setters>
            <Setter TargetName="img" Property="Source" 
Here--------->      Value="{Binding FirstImage, Converter={StaticResource GrayScaleConverter}}" />
            <Setter TargetName="stPanel" Property="BitmapEffect">
              <Setter.Value>
                <BlurBitmapEffect Radius="1" />
              </Setter.Value>
            </Setter>
          </Trigger.Setters>
        </Trigger>
        <Trigger Property="IsEnabled" Value="True">
          <Trigger.Setters>
And Here--> <Setter TargetName="img" Property="Source" Value="{Binding FirstImage}" />
            <Setter TargetName="stPanel" Property="BitmapEffect" Value="{x:Null}" />
          </Trigger.Setters>
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>
  </Button.Resources>
</Button>

Button.Resources部分在所有这些按钮中几乎相同。不同的两行是由“Here ---&gt;”表示的值绑定。上方。

这些差异允许我为每个按钮加载不同的图像。

有没有办法设置它,以便我不必为每个按钮复制Button.Resources?(但仍然在每个按钮中加载不同的图像)。

1 个答案:

答案 0 :(得分:0)

您可以创建自定义控件。我做了一个简单的例子,但是您可以自定义控件以按照您的需要运行(它非常强大)。另外请注意不推荐使用BitMapEffects,如果你尝试在.net 4中使用它们,你会得到一个例外。无论如何......创建一个自定义控件,如:

public class VaccanoButton : Button
{        
    static VaccanoButton()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(VaccanoButton), new FrameworkPropertyMetadata(typeof(VaccanoButton)));
    }

    public ImageSource FirstImage
    {
        get { return (ImageSource)GetValue(FirstImageProperty); }   
        set { SetValue(FirstImageProperty, value); }
    }

    // Using a DependencyProperty as the backing store for FirstImage.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty FirstImageProperty =
        DependencyProperty.Register("FirstImage", typeof(ImageSource), typeof(VaccanoButton), new UIPropertyMetadata(null));  
}

并在Generic.xaml中设置xaml,如:(注意:我拿出你的GrayScaleConverter,因为我没有代码,只是把它作为资源重新放入它应该有效)

<Style TargetType="{x:Type local:VaccanoButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:VaccanoButton}">
                <Button>
                    <StackPanel x:Name="stPanel" HorizontalAlignment="Left" Width="Auto"  
                Height="Auto" Orientation="Horizontal">
                        <Image x:Name="img"></Image>
                    </StackPanel>
                </Button>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="img" Property="Source" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=FirstImage}" />
                            <Setter TargetName="stPanel" Property="BitmapEffect">
                                <Setter.Value>
                                    <BlurBitmapEffect Radius="1"  />
                                </Setter.Value>
                            </Setter>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="True">
                        <Trigger.Setters>
                            <Setter TargetName="img" Property="Source" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=FirstImage}" />
                            <Setter TargetName="stPanel" Property="BitmapEffect" Value="{x:Null}" />
                        </Trigger.Setters>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

然后像:

一样使用它
        <local:VaccanoButton FirstImage="\Untitled.png"/>