WPF Pulsante del Mouse sull’Immagine

Sto imparando il C# e XAML per costruire applicazioni di windows. Ho voluto creare un pulsante che ha un’immagine come sfondo. Ma quando si passa il mouse sopra il pulsante, lo sfondo del pulsante deve cambiare per un altro “evidenziato” l’immagine. Ho tentato di aggiungere le immagini di sfondo in Risorse.resx. Ho dovuto creare un pulsante personalizzato utilizzando xaml stili di sbarazzarsi di default che evidenziano l’effetto di un wpf pulsante.

Ho creato un pulsante personalizzato da un po ‘ di codice che ho trovato su COSÌ. Il codice è (in una nuova risorsa dizionario):

    <!-- This style is used for buttons, to remove the WPF default 'animated' mouse over effect -->
    <Style x:Key="StartMenuButtons" TargetType="Button">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Margin" Value="5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="border" 
                        BorderThickness="0" 
                        Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">


                        <!-- UPDATE THE BUTTON BACKGROUND -->
                        <Setter Property="Background" Value="WHAT GOES HERE"  TargetName="border"/>


                    </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Cosa devo mettere in modo che lo sfondo cambia a un’altra immagine, se è nelle mie risorse.resx o in un’altra posizione? (Non sono sicuro di dove mettere l’immagine per accedere). Ho cercato TANTO ma le soluzioni che ho trovato non erano esattamente quello che sto trattando. Se questo è un duplicato domanda, mi scuso.

Sommario:

Come faccio a cambiare l’immagine di sfondo di un tasto di un mouse sopra il trigger in XAML?
Dove devo mettere l’immagine in modo che è possibile accedere al codice del trigger?

Aggiornamento
Questo è quello che ho messo come l’azione del trigger, ma l’immagine non si aggiorna. Ho fatto in modo di impostare l’immagine di costruire l’azione e di risorse, mettere in una cartella chiamata Risorse.

Il codice è:

<ControlTemplate.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Background">
          <Setter.Value>
             <ImageBrush ImageSource="/Simon;component/Resources/btn_bg_hover.jpg" />
          </Setter.Value>
        </Setter>
     </Trigger>

La struttura del file è

Simon
    Simon
        Resources
            all the images
        Fonts
        bin
        obj
        Properties

Soluzione

Il seguente è il codice completo per consentire un mouseover cambio di immagine sul tasto:

<!-- This style is used for buttons, to remove the WPF default 'animated' mouse over effect -->
    <Style x:Key="StartMenuButtons" TargetType="Button">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Margin" Value="5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="border" 
                        BorderThickness="0" 
                        Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" TargetName="border">
                            <Setter.Value>
                                <ImageBrush ImageSource="Resources/btn_bg_hover.jpg" />
                            </Setter.Value>
                        </Setter>

                    </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Per l’immagine, l’ho posizionato in Risorse cartella nella directory principale. Dopo aver importato le immagini utilizzando le risorse strumento di visual studio, ho aggiornato l’immagine impostazioni di generazione per Risorsa nel riquadro Proprietà.

Grazie per la soluzione dbaseman

OriginaleL’autore Ishikawa | 2012-09-04

2 Replies
  1. 12

    Penso sia più facile basta aggiungere l’immagine di un /Images cartella del progetto. Quindi questa è la sintassi che uso:

    <ControlTemplate TargetType="Button">
        <Border Name="border" BorderThickness="0" 
                    Background="Transparent">
              <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background">
                   <Setter.Value>
                       <ImageBrush ImageSource="/MyProjectName;component/Images/MyImage.jpg" />
                   </Setter.Value>
                </Setter>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    (Supponendo che la tua immagine MyImage.jpg è in Images cartella nella root del tuo progetto.)

    Basta fare in modo che MyImage.jpg ha il suo “Build Action” è impostato a “Risorsa”.

    Ho una cartella Risorse che le mie immagini sono archiviate. Ho aggiunto il codice come l’ho, ma quando ho mouse sopra l’immagine non cambia? Ho fatto in modo che l’immagine ha il “Build Action” set di Risorse. Tutte le idee?
    primo, sei sicuro di essere il riferimento dell’immagine correttamente? Utilizzare una base <Image Source='' /> elemento nella vista progettazione, e assicurarsi che sia visualizzato correttamente. La fonte dovrebbe essere solo /Simon;component/Resources/image.jpg, ma c’è anche un pulsante creazione guidata cosa Visual Studio.
    <Fonte dell’Immagine=”/Resources/btn_bg_hover.jpg” Stretch=”None”></Immagine> io ho usato questa e l’immagine si avvicinò correttamente. Ho provato a mettere solo “/Resources/btn_bg_hover.jpg” nel codice originale, ma ancora non cambia nulla. Apprezzo molto l’aiuto. Tutte le idee?
    Vedo qual è il problema … lo sfondo deve essere impostato in stile prima.
    Ho appena risolto! Ho dimenticato di aggiungere TargetName dopo <Setter Property=”Sfondo” TargetName. Funziona correttamente per me, ora. Grazie ancora per l’aiuto.

    OriginaleL’autore McGarnagle

  2. 6

    Qui è un altro modo per fare questo.

    È possibile utilizzare i due eventi dell’immagine MouseEnter e MouseLeave.
    Ora nel codice farlo.

    XAML

    <Image x:Name="image1" HorizontalAlignment="Left" Height="142" Margin="64,51,0,0" VerticalAlignment="Top" Width="150" MouseEnter="image1_MouseEnter" MouseLeave="image1_MouseLeave"   />

    C#

    private void image1_MouseEnter(object sender, MouseEventArgs e)
    {
        string packUri = @"pack://application:,,,/Resources/Polaroid.png";
        image1.Source = new ImageSourceConverter().ConvertFromString(packUri) as ImageSource;
    }
    
    private void image1_MouseLeave(object sender, MouseEventArgs e)
    {
        string packUri = @"pack://application:,,,/Resources/PolaroidOver.png";
        image1.Source = new ImageSourceConverter().ConvertFromString(packUri) as ImageSource;
    }

    OriginaleL’autore Yannick Turbang

Lascia un commento