шаблон кнопки изображения?

Question

Я хочу кнопку Изображение с двумя состояниями (нормальное, наведение мыши). эта кнопка должна автоматически менять изображение с помощью триггера мыши. эта кнопка изображения должна быть пользовательским элементом управления. Также я хочу установить изображение для каждого кода формы состояния, в которой я использую этот пользовательский элемент управления.

Решение использует шаблон с " Value Converter ", но я не знаю как?

Answer 1

Почему эта кнопка изображения должна быть пользовательским элементом управления? Если обычная кнопка с новым шаблоном управления подходит, это должно работать:

<Button>
  <Button.Template>
    <ControlTemplate TargetType="{x:Type Button}">
      <Grid>
        <Image Name="HoverImage" Source="hover_image.png" Visibility="Hidden" />
        <Image Name="DefaultImage" Source="default_image.png" />
      </Grid>
      <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
          <Setter TargetName="DefaultImage" Property="Visibility" Value="Hidden" />
          <Setter TargetName="HoverImage" Property="Visibility" Value="Visible" />
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>
  </Button.Template>
</Button>

Answer 2

Я нашел это в Code-project-Article (Классный пример)

http://www.codeproject.com/KB/WPF/WPF_xaml_taskbar_window.aspx

Сначала он создает Wpf-Custom-control (вы можете создать наследование класса от Button следующим образом)

 public class ImageButton : Button
{
    private string cornerRadius;
    public string CornerRadius
    {
        get { return cornerRadius; }
        set { cornerRadius = value; }
    }

    private string highlightBackground;
    public string HighlightBackground
    {
        get { return highlightBackground; }
        set { highlightBackground = value; }
    }

    private string pressedBackground;
    public string PressedBackground
    {
        get { return pressedBackground; }
        set { pressedBackground = value; }
    }
}

В качестве второго шага необходимо создать шаблон в ресурс-словаре (здесь код)

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:local="clr-namespace:Phone.Controls">

<ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type local:ImageButton}">
    <ControlTemplate.Resources>
        <Storyboard x:Key="MouseOverButton">
            <ThicknessAnimation Storyboard.TargetName="ButtonBackgroundBorder" 
                                Storyboard.TargetProperty="(Control.Margin)"
                                Duration="0:0:0.05" 
                                FillBehavior="Stop"
                                From="0,0,0,0" To="2,2,2,2" 
                                AutoReverse="True" />
        </Storyboard>
    </ControlTemplate.Resources>
    <Grid x:Name="ButtonOuterGrid">
        <Border x:Name="ButtonBackgroundBorder" 
                CornerRadius="{Binding Path=CornerRadius, RelativeSource={RelativeSource TemplatedParent}}" 
                Background="{Binding Path=HighlightBackground, RelativeSource={RelativeSource TemplatedParent}}" 
                BorderBrush="Black"
                BorderThickness="0.8"
                Opacity="0">
            <Border.BitmapEffect>
                <OuterGlowBitmapEffect GlowColor="#FFFFFFFF" GlowSize="2.75" Noise="0.20"/>
            </Border.BitmapEffect>
        </Border>
        <Border x:Name="ButtonEdgesBorder" CornerRadius="{Binding Path=CornerRadius, RelativeSource={RelativeSource TemplatedParent}}"
                Opacity="1" 
                BorderBrush="Transparent"
                BorderThickness="0" />
        <Border x:Name="ButtonContentBorder" 
                CornerRadius="{Binding Path=CornerRadius, RelativeSource={RelativeSource TemplatedParent}}" 
                Opacity="1" 
                BorderThickness="1">
            <ContentPresenter x:Name="ContentText"
                              Width="Auto" Height="Auto"

                              HorizontalAlignment="Center" 
                              VerticalAlignment="Center"/>
        </Border>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.Setters>
                <Setter Property="Opacity" TargetName="ButtonBackgroundBorder" Value="1"/>
                <Setter Property="TextElement.Foreground" TargetName="ContentText" Value="Black"/>
            </Trigger.Setters>
        </Trigger>
        <EventTrigger RoutedEvent="Grid.MouseEnter" 
                      SourceName="ButtonOuterGrid">
            <BeginStoryboard Storyboard="{StaticResource MouseOverButton}"/>
        </EventTrigger>
    </ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="ImageButton" TargetType="{x:Type Button}">
    <Setter Property="Template" Value="{StaticResource ButtonTemplate}" />
</Style>

И это последний шаг, в файл xaml вы должны вставить этот пользовательский элемент управления

<ImageButton x:Name="btnConfigs"
                      Style="{StaticResource ImageButton}"
                      Width="25" Height="25"
                      VerticalAlignment="Top"
                      HorizontalAlignment="Right"
                      Margin="0,31.125,16.418,0">
            <Image x:Name="ImgConfigs"
                   Stretch="Fill"/>
        </ImageButton >

и в файле cs сделайте это

 this.ImgConfigs.Source="any imag-source" 

также мы можем изменить этот источник изображения при событии btnconfig-click

С особой благодарностью от Murray-Foxcroft за создание этой статьи

Answer 3

Если вам нужен простой эффект ролловера, вам не нужен шаблон для него. В статье ниже есть решение для этого ..

http://www.c -sharpcorner.com / Resources / Detail.aspx? ResourceId = 706 В этой статье пользователь использует SolidColorBrush, вы можете использовать ImageBrush, чтобы установить изображение в качестве фона кнопки.