Как создать общий привязку фонового изображения из шаблона управления?

Question

У меня есть кнопка с этим стилем:

<Style TargetType="Button" x:Key="btnStyle"> 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="Button"> 
          <Image x:Name="img" Source="{TemplateBinding Tag}" Margin="{TemplateBinding Margin}" 
           Stretch="None"></Image> 
          <ControlTemplate.Triggers> 
           <Trigger Property="IsPressed" Value="true"> 
            <Setter TargetName="img" Property="Source" Value="{DynamicResource imgClose_P}"/> 
           </Trigger> 
           <Trigger Property="IsMouseOver" Value="true"> 
            <Setter TargetName="img" Property="Source" Value="{DynamicResource imgClose_H}"/> 
           </Trigger> 
          </ControlTemplate.Triggers> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Style> 

Как вы можете видеть, я буду связывать ImageSource свойству Tag кнопки. И в свойстве Tag я обязующий его к ResourceDictionary, что хранить этот битмап:

<BitmapImage x:Key="imgClose_N" UriSource="..\AppImages\mainWindow\TopBanner\CloseButton_sN.png" /> 

это дает мне возможность использовать этот «IMAGEBUTTON» на все протяжении приложения с различными фоновыми изображениями и один шаблоном. проблема заключается в том, как сохранить этот общий подход с помощью триггеров? Мне бы хотелось, чтобы триггер IsMouseOver менял фоновое изображение, но привязывал его к некоторому свойству элемента управления и не записывал его жестко закодированным в шаблоне управления. как это можно сделать?

Answer 1

Как вы уже сказали, вызывая его «Imagebutton», вы можете получить от Button и определить некоторые свойства изображения для привязки к, например. BackgroundImage, MouseOverImage и т.д.

Альтернатива получения от Button будет использовать attached properties для установки изображения и связываются с теми, в вашем стиле, но эти присоединенные свойства также должны быть определена где-то, что не делает это проще.

Вот пример для первого решения:

public class ImageButton : Button 
{ 
    public static readonly DependencyProperty NormalBackgroundImageProperty = DependencyProperty.Register(
     "NormalBackgroundImage", typeof(ImageSource), typeof(ImageButton)); 

    public static readonly DependencyProperty MouseOverBackgroundImageProperty = DependencyProperty.Register(
     "MouseOverBackgroundImage", typeof(ImageSource), typeof(ImageButton)); 

    public static readonly DependencyProperty PressedBackgroundImageProperty = DependencyProperty.Register(
     "PressedBackgroundImage", typeof(ImageSource), typeof(ImageButton)); 

    public ImageSource NormalBackgroundImage 
    { 
     get { return (ImageSource)GetValue(NormalBackgroundImageProperty); } 
     set { SetValue(NormalBackgroundImageProperty, value); } 
    } 

    public ImageSource MouseOverBackgroundImage 
    { 
     get { return (ImageSource)GetValue(MouseOverBackgroundImageProperty); } 
     set { SetValue(MouseOverBackgroundImageProperty, value); } 
    } 

    public ImageSource PressedBackgroundImage 
    { 
     get { return (ImageSource)GetValue(PressedBackgroundImageProperty); } 
     set { SetValue(PressedBackgroundImageProperty, value); } 
    } 
} 

и соответствующий стиль ниже. Обратите внимание, что этот стиль также имеет ContentPresenter для содержимого кнопки и что он использует регулярные привязки с RelativeSource={RelativeSource TemplatedParent} вместо TemplateBindings. Они оцениваются во время выполнения.

<Style TargetType="local:ImageButton"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="local:ImageButton"> 
       <Grid Margin="{TemplateBinding Margin}"> 
        <Image x:Name="img" Source="{Binding NormalBackgroundImage, RelativeSource={RelativeSource TemplatedParent}}" Stretch="None"/> 
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="true"> 
         <Setter TargetName="img" Property="Source" Value="{Binding MouseOverBackgroundImage, RelativeSource={RelativeSource TemplatedParent}}"/> 
        </Trigger> 
        <Trigger Property="IsPressed" Value="true"> 
         <Setter TargetName="img" Property="Source" Value="{Binding PressedBackgroundImage, RelativeSource={RelativeSource TemplatedParent}}"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Вы должны определить или заменить XAML пространства имен local с отображением в пространстве имен/сборки, которая содержит класс ImageButton.

Кнопка может быть затем использовать так:

<local:ImageButton 
    Margin="10" 
    NormalBackgroundImage="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" 
    PressedBackgroundImage="C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg" 
    MouseOverBackgroundImage="C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg" 
    Content="Click Me"/>