c# - una - picturebox1

cómo hacer un botón de imagen que cambie la imagen cuando el mouse sobre el botón WPF?

Question

Intento crear un botón de imagen que cambie la imagen cuando el mouse esté sobre el botón, intenté algunas cosas

esto es lo último que intenté pero no funciona:

<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>

Estoy intentando usar el XAML solamente, sin el archivo cs Gracias

Answer 1

Aquí hay otro enfoque para manejarlo usando un estilo especializado. Cabe señalar que esto podría mejorarse aún más con el uso de propiedades adjuntas para personalizar los archivos de imagen correctamente.

<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>

El Rectángulo es importante para la prueba de impacto, de lo contrario, IsMouseOver no se disparará. Y el estiramiento en ContentAlignment es necesario, de lo contrario, el ContentPresenter del botón no abarcaría todo el botón, por lo tanto, IsMouseOver no se activaría de nuevo.

Answer 2

Necesitará una clase auxiliar para adjuntar la propiedad de origen de la imagen por estado de botón y un estilo para su botón. Coloque la clase auxiliar en una carpeta Helpers en su proyecto WPF.

Clase de ayuda

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));
}

Estilo de botón

<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>

Uso

<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

Puedes lograr esto por estilo de 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

Sus disparadores se aplican al StackPanel . Necesita ser configurado en el ControlTemplate

Tratar:

<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>

En esos casos. Simplemente puede usar el Trigger para configurar la fuente de la Image y así no tener que jugar cambiando la Visibility en múltiples elementos de la IU.

algo como:

<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>