[WPF] Background image verdwijnt bij mouseEnter?

[Verwijderd]

Hallo allemaal,

Ik probeer met WPF een inlogscherm te realiseren. Op dit inlogscherm zijn een viertal knoppen aanwezig. Op de knoppen zijn afbeeldingen zichtbaar van de verschillende gebruikers (het gaat dus om afbeeldingen, geen tekst). Dit heb ik voor elkaar gekregen met de volgende code:

<Button Canvas.Left="113" Canvas.Top="316" Height="126" Name="btnAlvin" Width="125">
<Button.Background>
<ImageBrush ImageSource="Images\Users\Alvin.png" />
</Button.Background>
</Button>

Maar nu komt het: iedere keer dat ik met mijn muis boven een van deze knoppen kom, verdwijnt de background image en zie ik alleen nog een wit/blauwe knop.

Nu is mijn vraag: hoe kan ik voorkomen dat mijn background image verdwijnt indien ik met de muis boven mijn knop beweeg?

Ik dacht dat ik dit op kon lossen door dit event af te handelen via de C# code zelf. Op het moment dat de muis boven de button komt, treedt het mouseEnter event op, waarna de volgende code wordt uitgevoerd:

// Create an ImageBrush.
ImageBrush imageBrush = new ImageBrush();
imageBrush.ImageSource = new BitmapImage(new Uri(@"Images\Users\Alvin.png", UriKind.Relative));

// Use the brush to paint the button's background.
btnAlvin.Background = imageBrush;

De compiler heeft hier geen moeite mee, de code wordt gewoon uitgevoerd...maar toch verdwijnt mijn background image!

Heeft iemand enig idee hoe ik dit verdwijnen kan voorkomen?

[TheNameless]

Verwijderd schreef op donderdag 15 april 2010 @ 20:39:
Hallo allemaal,

Ik probeer met WPF een inlogscherm te realiseren. Op dit inlogscherm zijn een viertal knoppen aanwezig. Op de knoppen zijn afbeeldingen zichtbaar van de verschillende gebruikers (het gaat dus om afbeeldingen, geen tekst). Dit heb ik voor elkaar gekregen met de volgende code:

<Button Canvas.Left="113" Canvas.Top="316" Height="126" Name="btnAlvin" Width="125">
<Button.Background>
<ImageBrush ImageSource="Images\Users\Alvin.png" />
</Button.Background>
</Button>

Maar nu komt het: iedere keer dat ik met mijn muis boven een van deze knoppen kom, verdwijnt de background image en zie ik alleen nog een wit/blauwe knop.

Nu is mijn vraag: hoe kan ik voorkomen dat mijn background image verdwijnt indien ik met de muis boven mijn knop beweeg?

Ik dacht dat ik dit op kon lossen door dit event af te handelen via de C# code zelf. Op het moment dat de muis boven de button komt, treedt het mouseEnter event op, waarna de volgende code wordt uitgevoerd:

// Create an ImageBrush.
ImageBrush imageBrush = new ImageBrush();
imageBrush.ImageSource = new BitmapImage(new Uri(@"Images\Users\Alvin.png", UriKind.Relative));

// Use the brush to paint the button's background.
btnAlvin.Background = imageBrush;

De compiler heeft hier geen moeite mee, de code wordt gewoon uitgevoerd...maar toch verdwijnt mijn background image!

Heeft iemand enig idee hoe ik dit verdwijnen kan voorkomen?

Zo iets misschien (niet getest)?

XML:

<Button Canvas.Left="113" Canvas.Top="316" Height="126" Name="btnAlvin" Width="125"> 
  <Button.Template>
    <ControlTemplate TargetType="{x:Type Button}">
      <Image Source="Images\Users\Alvin.png" />        
    </ControlTemplate>
  </Button.Template>
 </Button> 

De reden dat je achtergrond image verdwijnt als je met je muis erover heen gaat heeft te maken met de manier waarop WPF een control "styled".
Dit wordt geregeld via zogeheten ControlTemplates; waarin je definieerd hoe een control er daadwerkelijk uitziet.
Een Button heeft dus standaard ook zo'n ControlTemplate. Als je met je muis over de knop gaat, wordt er geswitched van ControlTemplate.

In bovenstaand voorbeeld overschrijf je de standaard ControlTemplate en moet het dus niet meer voorkomen AFAIK.

[Verwijderd]

Deze oplossing lijkt minstens gedeeltelijk te werken: ook bij mouseEnter blijft de achtergrond zichtbaar.

Het probleem is nu echter dat de visuele ervaring van het klikken (het effect dat de knop daadwerkelijk zichtbaar ingedrukt wordt) nu ook verdwenen is; het lijkt nu alsof er simpelweg op een plaatje geklikt wordt, in plaats van op een button.

Zou het dan mogelijk zijn om op een of andere manier een deel van de oorspronkelijke ControleTemplate te nemen (zodat het klikken op een button er voor zorgt dat de knop zichtbaar wordt ingedrukt), maar waarbij de background image wel behouden blijft? Een soort "take the best of both worlds" dus.

[CyBoB]

Als je het uiterlijk van een Button wil behouden dan kan je een Image element als Content zetten.

XML:

<Button> 
   <Image Source="Images\Users\Alvin.png" />
</Button>

[ Voor 2% gewijzigd door CyBoB op 16-04-2010 11:53 . Reden: Tekst iets aangepast ]

[Verwijderd]

Ah, dat blijkt dus inderdaad dé oplossing te zijn voor mijn probleem. Ik zat zelf te denken in de richting van het werken met VisualStateGroups (bron: http://msdn.microsoft.com...y/ee230084(v=VS.100).aspx), al leek me dat een erg complexe oplossing voor iets dat zo simpel zou moeten zijn. Dank je wel!