entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

0voto

WPF Mostrar un botón al pasar el ratón sobre un elemento de un ListBox

Buenas,
Tengo un ListBox con una lista de imágenes. Me gustaría que al seleccionar un elemento de la lista o al pasar el ratón por encima de una imagen me apareciera un botón que el usuario pudiera pulsar.
Así tengo definida la template del elemento de la lista:

<ListBox.ItemTemplate>
    <DataTemplate>
       <Grid Width="300" Height="200">
          <Image Source="{Binding FullPath}" />
          <Button Visibility="Hidden" />
       </Grid>
    </DataTemplate>
</ListBox.ItemTemplate>

Gracias

1 Respuesta

1voto

Puedes crear un ControlTemplate con el layout que necesitas y agregarle triggers para cambiar la visibilidad del boton segun el IsMouseOver del Image.

Aqui un ejemplo funcionando(he cambiado el Image por un Text):

MainWindow.xaml

<Window x:Class="Test_WPF_IsMouseOver.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:testWpfIsMouseOver="clr-namespace:Test_WPF_IsMouseOver"
        Title="MainWindow"
        Height="350"
        Width="525">
    <Window.Resources>
        <ControlTemplate x:Key="DataItemControlTemplate">
            <StackPanel Orientation="Horizontal">
                <TextBlock Name="Img1" Text="{Binding Text}" />
                <Button Name="Btn1" Visibility="Hidden" Content="Click me!"/>
            </StackPanel>
            <ControlTemplate.Triggers>
                <DataTrigger Binding="{Binding ElementName=Img1, Path=IsMouseOver}" Value="True">
                    <Setter TargetName="Btn1" Property="Visibility" Value="Visible" />
                </DataTrigger>
                <DataTrigger Binding="{Binding ElementName=Img1, Path=IsMouseOver}" Value="False">
                    <Setter TargetName="Btn1" Property="Visibility" Value="Collapsed" />
                </DataTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Window.Resources>

    <Window.DataContext>
        <testWpfIsMouseOver:MainWindowViewModel />
    </Window.DataContext>

    <Grid>
        <ListBox ItemsSource="{Binding Items}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <ContentControl Template="{StaticResource DataItemControlTemplate}" />
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Window>

MainWindowViewModel.cs

public class MainWindowViewModel : ViewModelBase
    {
        private readonly int itemCount;
        public ObservableCollection<Item> Items { get; private set; }

        public MainWindowViewModel()
        {
            this.itemCount = 10;
            this.Items = new ObservableCollection<Item>();

            for (var i = 0; i < this.itemCount; i++)
            {
                this.Items.Add(new Item("Thi is item number " + i));
            }
        }
    }

    public class Item
    {
        public string Text { get; private set; }

        public Item(string text)
        {
            this.Text = text;
        }
    }

Screenshot
enter image description here

2votos

oscar_arrivi comentado

Muchas gracias.
Tambien me he dado cuenta de que no es necesario el Trigger de cuando el MouseIsOver = false

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta