1

我正在尝试制作一个图像按钮，当鼠标悬停在按钮上时会更改图像，我尝试了几件事

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

<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 文件谢谢

4

4 回答 4

8

您的触发器应用于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' 源，从而不必Visibility打开多个 UI 元素。

就像是：

<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>
于 2013-07-15T14:52:25.373 回答
2

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

助手类

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}" />

        ...
于 2015-01-16T21:00:50.407 回答
1

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>
于 2013-07-15T14:57:25.973 回答
0

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

<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 不会再次触发。

于 2013-07-15T14:58:36.533 回答