Discussion :

[anthyme]

Bonjour,

J'aimerai faire un équivalant d'un jeu à grater (banco, millionnaire, etc ...) en WPF.

En gros une image et par dessus un controle qui pourrait avoir des zone transparente en passant (et maintenant le clic enfoncer) avec la souris dessus.

Quel contrôle je pourrais utiliser ?

[Jérem22]

Tu pourrai partir d'un CustomControl.

Ton CustomControl aurait une DP "ImageSource" qui serait utiliser pour l'affichage en arrière plan.

Le CustomControl réagirait au évènements Click et MouseMove pour gérer une ObservableCollection de "Marker". Chaque "Marker" aurait une position (X,Y) ce qui permettrait de placer les "Marker" dans un Canvas de manière automatique (binding sur la position). Ce Marker aurait un contrôle template avec une ellipse blanche.

J'ai écris ça en 3min, c'est juste mon avis, y'a ptet bcp plus simple ou plus malin

[Thomas Lebrun]

Ca me semble une bonne idée telle que tu la décrit Jerem22

[anthyme]

ok merci je vais creuser dans cette direction (pas l habitude de ce genre de manip !)

Ce que tu 'appel "Marker" représenterai 1 pixel de l'image ? et il y en aurai autant que de pixels sur l image ?

je serai pas contre le fait de voir ton code

[Jérem22]

Un Marker serait un autre type de CustomControl tout simple:
- 2 DP pour la position (X,Y)
- un control template contenant une ellipse blanche
- ça ne correspond donc pas directement à un pixel (de toutes façons en WPF tu manipules rien au pixel près)
- il y en aurait "suffisamment" pour faire apparaître l'image en dessus lors du "grattage"

Pour mon code, j'ai rien de plus que ce qui est dans ma tête

[tomlev]

J'aurais plutôt utilisé la propriété OpacityMask, appliquée à l'Image (ou autre contrôle) que tu utilises pour masquer le contenu.

Code XML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<Window.Resources>
    <Drawing x:Key="mask">
        <!-- ... -->
    </Drawing>
</Window.Resources>
<Grid>
    <Image Name="imgContent" ImageSource="ImageSecrete.png"/>
    <Image Name="imgMask" ImageSource="GrattezIci.png">
        <Image.OpacityMask>
            <DrawingBrush Drawing="{StaticResource mask}"/>
        </Image.OpacityMask>
    </Image>
</Grid>

Quand la souris passe avec le bouton enfoncé, tu modifies le Drawing en conséquence, et l'image imgMask devrait devenir transparente à cet endroit, laissant apparaitre imgContent en dessous.

Bon, c'est juste une idée, j'ai pas trop approfondi, et je sais pas exactement quoi mettre dans le Drawing... (d'ailleurs Drawing est abstract, donc il faudrait plutôt utiliser une classe dérivée...)