Button Background Images - Mouseover and Clicked

Question

Guten Tag Zusammen,

ich bin neu in XAML und habe online keine Lösung gefunden, welche für meinen Fall funktioniert hat.

Problem: Ich habe in meiner Anwendung mehrere Buttons mit je einem individuellen Bild als "Background", und möchte dieses nun bei Mouseover und Klicken leicht verändern.

Nun mein erneuter Startpunkt (nach diversen online-"Lösungen" wie - leider ist es mir nicht möglich einen Link zu posten. ) ist erneut folgender:

<Button x:Name="Btn_CloseWindow" ..... >

<Button.Background>

<ImageBrush ImageSource="Graphics/CloseWindow.jpg"/>

</Button.Background>

</Button>

Für möglichst einfache Lösungsansätze wäre ich sehr dankbar.

M.f.G

B.

Answer 1

Hallo,

im XAML ist das einfcah Möglich.

Am einfchsten wären da Trigger.

<Button ....>
<...>
<!-- Wenn die Maus über dem Element ist, wird ein anderer Hintergrund gesetzt -->
<Button.Triggers>
 <Trigger Property="IsMouseOver" Value="True">
   <Setter Property="Background">
      <Setter.Value>
          <ImageBrush ImageSource="Graphics/CloseWindow2.jpg"/>
       </Setter.Value>
   <Setter />
  </Trigger>
</Button.Triggers>
</Button>

Hoffe da hat sich kein Tippfehler eingeschlichen, sonst wird VS dir den schon zeigen.

---

© 2015 Thomas Roskop
Germany //  Deutschland

Answer 2

Hi,
etwas komplexer mit Animation nachfolgend ein Beispiel für die Veränderung der Hintergrundfarbe. Analog kann man es mit einem Hintergrundbild realisieren.

<Window x:Class="Window6"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window6" Height="300" Width="700">
  <Window.Resources>
    <Color x:Key="Farbe1">#FF8080FF</Color>
    <Color x:Key="Farbe2">#FFFF8080</Color>
    <SolidColorBrush x:Key="Brush1" Color="{StaticResource Farbe1}"/>
    <SolidColorBrush x:Key="Brush2" Color="{StaticResource Farbe2}"/>
    <Style TargetType="Button">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="Button">
            <Grid x:Name="ButtonGrid">
              <Border x:Name="ButtonBorder" CornerRadius="5" BorderThickness="1"
                      BorderBrush="Black"
                      Background="{StaticResource Brush1}"/>
              <ContentPresenter
                x:Name="ButtonContentPresenter"
                HorizontalAlignment="{TemplateBinding Property=Button.HorizontalContentAlignment}"
                VerticalAlignment="{TemplateBinding Property=Button.VerticalContentAlignment}"
                Content="{TemplateBinding Property=Button.Content}" />
            </Grid>
            <ControlTemplate.Triggers>
              <EventTrigger RoutedEvent="Button.MouseEnter">
                <BeginStoryboard>
                  <Storyboard>
                    <ColorAnimation
                BeginTime="00:00:00"
                Storyboard.TargetName="ButtonBorder"
                Storyboard.TargetProperty="Background.Color"
                To="{StaticResource Farbe2}" Duration="0:0:1"/>
                  </Storyboard>
                </BeginStoryboard>
              </EventTrigger>
              <EventTrigger RoutedEvent="Button.MouseLeave">
                <BeginStoryboard>
                  <Storyboard>
                    <ColorAnimation
                BeginTime="00:00:00"
                Storyboard.TargetName="ButtonBorder"
                Storyboard.TargetProperty="Background.Color"
                To="{StaticResource Farbe1}" Duration="0:0:1"/>
                  </Storyboard>
                </BeginStoryboard>
              </EventTrigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Window.Resources>
  <Grid>
    <Button x:Name="myButton" Content="Drück mich" Height="100" Width="100"/>
  </Grid>
</Window>

 

---

--
Viele Grüsse
Peter Fleischer (MVP, Partner)
Meine Homepage mit Tipps und Tricks

Answer 3

Animation beim Übergang sind doch viel einfacher darzustellen:

Dieses Beispiel verwendet zwar die Größe (Width), sollte aber auch mit anderen Eigenschaften klappen.

Und ist wengiger Schreibareit:

<Trigger Property="IsMouseOver" Value="true">
                <Setter Property="Opacity" Value="1" />
                <Setter Property="Width" Value="300" />
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Duration="0:0:0.300" To="300" Storyboard.TargetProperty="Width" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Duration="0:0:0.150" To="50" Storyboard.TargetProperty="Width" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.ExitActions>
            </Trigger>

Die Triggerverwendung genau wie in meinem ersten Beispiel.

---

© 2015 Thomas Roskop
Germany //  Deutschland

Answer 4

Guten Tag,

vielen Dank für die Antwort. Bei dem obigen Code bekomme ich leider folgende Fehlermeldung:

Mitglieder der Trigger-Auflistung müssen vom Typ "EventTrigger" sein.

Mfg

Answer 5

Hallo Peter,

verstehe ich das richtig oder ersetzt diese Variante alle Buttons welche auf der Standardvariante basieren?

Mfg

Answer 6

Hi,
über <Style TargetType="Button"> wirkt dieser Style auf alle Befehlsschaltflächen vom Typ "Button" innerhalb des Fensters.

Beschreibe mal etwas genauer, was Du erreichen willst. Vielleicht reichen schon die Gedanken von Thomas. 

---

--
Viele Grüsse
Peter Fleischer (MVP, Partner)
Meine Homepage mit Tipps und Tricks

Answer 7

Hallo Peter,

ich möchte jedem Button ein individuelles Bild zuweisen. (soweit so gut).

Dieses soll dann jeweils in eine etwas hellere Variante bei mouseover und in eine dunklere bei clicked wechslen. Die Varianten stelle ich bereits in einem Ordner "Graphics" zur Verfügung (s.o).

D.h prinzipiell würden mir Thomas' Gedanken ausreichen - wenn diese Methode keine Fehlermeldung hervorrufen würde.

Mfg

Answer 8

Seltsam...

Versuch es mal damit, da zeigt VS keinen Fehler auf diese Art und weise an.

<Button ...>
                <Button.Style>
                    <Style TargetType="Button">
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <!-- ... -->
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Button.Style>
            </Button>

Der Rest, also der Inhalt des Triggers kann gleich bleiben.

Hoffe, es hilft dir weiter.

---

© 2015 Thomas Roskop
Germany //  Deutschland

Answer 9

Hallo Thomas,

primär hilft dies, allerdings wird trotz der Definition des Verhaltens im Rahmen von Style.Triggers die von Windows standardmäßige Mouseoveraktion verwendet. Keine Fehlermeldung dieses mal.

Mfg

Answer 10

Ah so, du willst nicht nur das Bild verändern sondern auch diese Animation verändern?

Das hättest du direkt sagen sollen, da habe ich auch eine Lösung:

 <Style TargetType="Button" x:Key="UISTogglePlaPauseStyle">
        <Setter Property="Content">
            <Setter.Value>
                <Image Source="/Assets/appbar.control.play.png" />
            </Setter.Value>
        </Setter>
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="Panel" CornerRadius="90" BorderThickness="2" BorderBrush="#FFFFFF">
                        <ContentPresenter x:Name="ContentSite"
                                        VerticalAlignment="Center"
                                        HorizontalAlignment="Center"
                                        Content="{TemplateBinding Content}"
                                        Height="50" Width="50"
                                        >
                            <ContentPresenter.Resources>
                                <ResourceDictionary>
                                    <Style TargetType="Image" >
                                        <Setter Property="Stretch" Value="Uniform" />
                                        <Setter Property="Height" Value="25" />
                                        <Setter Property="Width" Value="25" />
                                    </Style>
                                </ResourceDictionary>
                            </ContentPresenter.Resources>
                        </ContentPresenter>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Panel" Property="Background" Value="{StaticResource UISStandartDesignColorHover}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
Diesen Style habe ich selber mal verwendet gehabt.

Tausche einfach aus, was du möchtest und das wars.

Die Farben {UIS...} solltest du z.B. mit echten Farben belegen...

---

© 2015 Thomas Roskop
Germany //  Deutschland