Question

我正在尝试制作一个图像按钮，当鼠标悬停在按钮上时会改变图像，我尝试了一些东西

这是我尝试的最后一件事，但它不起作用：

<Button Name="fileNameLink" Margin="15,6,30,1" VerticalAlignment="Top"    Click="btnMinimize_Click" MaxWidth="250" Background="Transparent" Cursor="Hand" Visibility="Visible" Height="16">
                    <Button.Template>
                        <ControlTemplate TargetType="Button">
                            <StackPanel>
                                <Image Name="image1"  Source="{StaticResource Minimize1}" Stretch="None" Visibility="Collapsed"/>
                                <Image Name="image2" Source="{StaticResource Minimize2}" Stretch="None" Visibility="Visible"/>
                                <StackPanel.Triggers>
                                    <Trigger Property="IsMouseOver" Value="true">
                                        <Setter TargetName="image1" Property="Visibility" Value="Visible"/>
                                        <Setter TargetName="image2" Property="Visibility" Value="Collapsed"/>
                                        </Trigger>
                                </StackPanel.Triggers>
                            </StackPanel>
                        </ControlTemplate>
                    </Button.Template>
                    <Button.Style>
                        <Style TargetType="Button">
                            <Style.Triggers>
                            </Style.Triggers>
                        </Style>
                    </Button.Style>
                </Button>

我只想使用XAML，没有cs文件感谢

Answer 1

您的触发器已应用于StackPanel。需要在ControlTemplate

上设置

尝试：

<Button Name="fileNameLink"
        Height="16"
        MaxWidth="250"
        Margin="15,6,30,1"
        VerticalAlignment="Top"
        Click="btnMinimize_Click"
        Background="Transparent"
        Cursor="Hand"
        Visibility="Visible">
  <Button.Template>
    <ControlTemplate TargetType="Button">
      <StackPanel>
        <Image Name="image1"
                Source="{StaticResource Minimize1}"
                Stretch="None"
                Visibility="Collapsed" />
        <Image Name="image2"
                Source="{StaticResource Minimize2}"
                Stretch="None"
                Visibility="Visible" />
      </StackPanel>
      <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver"
                  Value="true">
          <Setter TargetName="image1"
                  Property="Visibility"
                  Value="Visible" />
          <Setter TargetName="image2"
                  Property="Visibility"
                  Value="Collapsed" />
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>
  </Button.Template>
</Button>

在这种情况下。您可以使用Trigger来设置Image的来源，从而无需在多个UI元素上切换Visibility。

类似的东西：

<Button Name="fileNameLink"
        Height="16"
        MaxWidth="250"
        Margin="15,6,30,1"
        VerticalAlignment="Top"
        Click="btnMinimize_Click"
        Background="Transparent"
        Cursor="Hand"
        Visibility="Visible">
  <Button.Template>
    <ControlTemplate TargetType="Button">
      <Image Name="image"
              Source="{StaticResource Minimize1}"
              Stretch="None" />
      <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver"
                  Value="true">
          <Setter TargetName="image"
                  Property="Source"
                  Value="{StaticResource Minimize2}" />
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>
  </Button.Template>
</Button>

Answer 2

您需要一个辅助类来附加每个按钮状态的图像源属性和按钮的样式。将帮助程序类放在WPF项目的Helpers文件夹中。

助手类

public static class ImageLoader
{
    public static ImageSource GetDefaultImage(DependencyObject obj)
    {
        return (ImageSource)obj.GetValue(DefaultImageProperty);
    }
    public static void SetDefaultImage(DependencyObject obj, ImageSource value)
    {
        obj.SetValue(DefaultImageProperty, value);
    }

    public static readonly DependencyProperty DefaultImageProperty =
        DependencyProperty.RegisterAttached(
        "DefaultImage",
        typeof(ImageSource),
        typeof(ImageLoader),
        new UIPropertyMetadata(null));

    public static ImageSource GetHoverImage(DependencyObject obj)
    {
        return (ImageSource)obj.GetValue(HoverImageProperty);
    }
    public static void SetHoverImage(DependencyObject obj, ImageSource value)
    {
        obj.SetValue(HoverImageProperty, value);
    }

    public static readonly DependencyProperty HoverImageProperty =
        DependencyProperty.RegisterAttached(
        "HoverImage",
        typeof(ImageSource),
        typeof(ImageLoader),
        new UIPropertyMetadata(null));

    public static ImageSource GetDisabledImage(DependencyObject obj)
    {
        return (ImageSource)obj.GetValue(DisabledImageProperty);
    }
    public static void SetDisabledImage(DependencyObject obj, ImageSource value)
    {
        obj.SetValue(DisabledImageProperty, value);
    }

    public static readonly DependencyProperty DisabledImageProperty =
        DependencyProperty.RegisterAttached(
        "DisabledImage",
        typeof(ImageSource),
        typeof(ImageLoader),
        new UIPropertyMetadata(null));
}

按钮样式

<ResourceDictionary ...
                    xmlns:helper="clr-namespace:MySolution.MyWPFProject.Helpers"
                    ...
                    >

    <Style TargetType="{x:Type Button}" x:Key="MyButtonStyle">
        ...
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <ContentPresenter Name="content" 
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          Margin="{TemplateBinding Padding}"
                                          RecognizesAccessKey="True"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      />
                        <Border>
                            <!-- Default image -->
                            <Image Name="image"  Source="{TemplateBinding helper:ImageLoader.DefaultImage}" />
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Cursor" Value="Hand" />
                            <!-- Hover image -->
                            <Setter TargetName="image" Property="Source" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Button}, Path=(helper:ImageLoader.HoverImage)}" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <!-- Disabled image -->
                            <Setter TargetName="image" Property="Source" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=Button}, Path=(helper:ImageLoader.DisabledImage)}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

<强>用法

<UserControl ...
             xmlns:helper="clr-namespace:MySolution.MyWPFProject.Helpers"
             ...
             >
        <UserControl.Resources >
                <ResourceDictionary Source="Path-to-my-button-style.xaml" />
        </UserControl.Resources>
        ...
        <Button helper:ImageLoader.DefaultImage="Resources/Images/MyDefaultImage.png"
                helper:ImageLoader.HoverImage="Resources/Images/MyHoverImage.png"
                helper:ImageLoader.DisabledImage="Resources/Images/MyDisabledImage.png"
                Style="{DynamicResource MyButtonStyle}" />

        ...

Answer 3

您可以通过Image样式实现此目的：

<Button Name="fileNameLink" VerticalAlignment="Top" Click="btnMinimize_Click" MaxWidth="250" Height="100">          
    <Button.Content>
        <StackPanel>
            <Image Name="image1"  Source="{StaticResource Minimize1}" Stretch="None" >
                <Image.Style>
                    <Style TargetType="Image">
                        <Setter Property="Visibility" Value="Visible" />
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" Value="True">
                                <Setter Property="Visibility" Value="Collapsed" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>
            <Image Name="image2" Source="{StaticResource Minimize2}" Stretch="None" >
                <Image.Style>
                    <Style TargetType="Image">
                        <Setter Property="Visibility" Value="Collapsed" />
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" Value="True">
                                <Setter Property="Visibility" Value="Visible" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>                   
        </StackPanel>
    </Button.Content>           
</Button>

Answer 4

这是使用专门样式处理它的另一种方法。应该指出的是，使用附加属性来正确定制图像文件可以进一步改善这种情况。

<Style x:Key="ButtonStyle" TargetType="Button">
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <Grid>
                    <Rectangle Fill="Transparent"/>
                    <Image x:Name="img" Width="64" Height="64" Source="a.jpg"/>
                </Grid>
                <DataTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="img" Property="Source" Value="b.jpg"/>
                    </Trigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

Rectangle对于命中测试很重要，否则IsMouseOver不会触发。 ContentAlignment上的Stretch是必要的，否则按钮的ContentPresenter不会跨越整个按钮，因此IsMouseOver不会再次触发。

鼠标悬停在按钮WPF上时，如何制作一个改变图像的图像按钮？

4 个答案: