[Silverlight] Détecter la molette de la souris
Très souvent les applications Silverlight ne prennent pas en compte la molette de la souris ce qui peux énerver l’utilisateur, surtout quand on recherche une “expérience utilisateur hors du commun”.
La solution pour implémenter le MouseWheel est simple: créer une zone avec un ScrollViewer et capturer le MouseWheel de la souris par rapport au navigateur.
Exemple de Page.xaml:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Wheel.Page"
Width="640" Height="364">
<Grid x:Name="LayoutRoot" Background="White">
<ScrollViewer Margin="65,25,196,164" x:Name="scroll">
<ScrollViewer.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF000000"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</ScrollViewer.Background>
<Grid Height="Auto" Width="Auto">
<Button Content="Button" Height="400" Width="200"/>
</Grid>
</ScrollViewer>
</Grid>
</UserControl>
Puis côté code behind on s’abonne à l’événement du navigateur MouseWheel (différents événements suivant le navigateur):
public Page()
{
// Required to initialize variables
InitializeComponent();
HtmlPage.Window.AttachEvent("DOMMouseScroll", OnMouseWheel);
HtmlPage.Window.AttachEvent("onmousewheel", OnMouseWheel);
HtmlPage.Document.AttachEvent("onmousewheel", OnMouseWheel);
}Puis on crée la méthode OnMouseWheel qui va incrémenter le scroll ou non de notre scrollviewer:
private void OnMouseWheel(object sender, HtmlEventArgs args)
{
double mouseDelta = 0;
ScriptObject e = args.EventObject;
// Mozilla and Safari
if (e.GetProperty("detail") != null)
mouseDelta = ((double)e.GetProperty("detail"));
// IE and Opera
else if (e.GetProperty("wheelDelta") != null)
mouseDelta = ((double)e.GetProperty("wheelDelta"));
mouseDelta = Math.Sign(mouseDelta);
if(mouseDelta.Equals(1))
scroll.ScrollToVerticalOffset(scroll.VerticalOffset + 10);
else
scroll.ScrollToVerticalOffset(scroll.VerticalOffset - 10);
}
EDIT:
après une recherche suite à la remarque de lionel, il n’est pas possible de capturer le MouseWheel sur un DOM lorsque l’application est en plein écran.