Perspective : Knob

Perspective : Knob

Knob : un contrôle personnalisé

Le contrôle Knob est issu de la bibliothèque Perspective pour Silverlight . Il s'agit d'un portage du contrôle original de Perspective pour WPF . Il fonctionne comme le bouton de volume d'un ampli : on le tourne pour faire varier sa valeur. En attendant une version tactile :-o la rotation s'effectue en faisant glisser la souris verticalement, vers le haut ou vers le bas.

La molette n'est pas supportée dans la version Silverlight.

Knob

Knob est de la même famille que Slider : ces deux classes héritent de RangeBase, et permettent de définir une valeur (propriété Value) dans une étendue donnée (propriétés Minimum et Maximum).

La propriété WalkAngle indique l'angle de débattement (300 degrés par défaut).

Le code de la classe Knob est un bon exemple de création de contrôle personnalisé. Le visuel est entièrement défini dans le template XAML (fichier generic.xaml). Son architecture graphique est très simple : une ellipse et une ligne (Line). Le code issu de WPF a été adapté pour exploiter le VisualStateManager. La logique du contrôle (gestion du glisser-lâcher notamment) est codée en C#, avec un minimum de références au visuel : c'est la philosophie des contrôles lookless de WPF et de Silverlight, qui facilite la création de nouveaux visuels exploitant la même logique sous-jacente, et la collaboration entre un développeur et un infographiste.

Liaison entre éléments

Dans Silverlight 3 (comme dans WPF), le databinding entre éléments est rendu possible par la propriété ElementName de la classe Binding.

L’exemple suivant montre comment lier la hauteur d’une ellipse et le texte d’un TextBlock à la propriété Value d’un Knob :

Liaison entre éléments avec Silverlight 3

<StackPanel 
  Grid.Column="0"
  VerticalAlignment="Top">
  <pc:Knob
    Name="knob"
    Width="100"
    Minimum="0" Maximum="100"
    Value="50"/>
  <TextBlock 
    Name="tb3" 
    Style="{StaticResource TextBlockStyle}"
    Text="{Binding 
      ElementName=knob, 
      Path=Value, 
      Converter={StaticResource StringFormatConverter},
      ConverterParameter=###.0,
      Mode=OneWay}"/>
</StackPanel>
<Ellipse
  Grid.Column="1"
  Style="{StaticResource BasicShapeStyle}"
  Width="100"
  Height="{Binding 
    ElementName=knob, 
    Path=Value, 
    Mode=OneWay}"/>

Le convertisseur StringFormatConverter utilisé ici pour arrondir la valeur est issu de Perspective .

Sous Silverlight 2, la propriété ElementName n'est pas supportée. Le databinding entre éléments peut néanmoins se faire au moyen d'une classe intermédiaire, telle que le BindingBroker de Perspective .

Cette classe expose trois propriétés typées : IntValue, DoubleValue et TextValue. Un objet BindingBroker peut être utilisé comme objet source d’un binding en mode TwoWay avec un Slider ou un Knob, et comme objet source d’un binding en mode OneWay d’un élément destiné à exploiter la valeur, tel qu'une ellipse :

<UserControl.Resources>
  <pcd:BindingBroker x:Key="Broker"
    DoubleValue="50" />  
</UserControl.Resources>
...
<pc:Knob
  Width="100" Name="knob" Minimum="0" Maximum="100" 
  Value="{Binding
    Source={StaticResource Broker},
    Path=DoubleValue,
    Mode=TwoWay}"/>
...
<Ellipse 
  Stroke="Black"
  StrokeThickness="2"
  Width="100"
  Height="{Binding 
    Source={StaticResource Broker}, 
    Path=DoubleValue, 
    Mode=OneWay}"/>

Démo BindingBroker

Asservissement par multisélection

Knob supporte la multisélection (par Ctrl-Clic sous Windows, et Cmd-Clic sous Mac). La propriété booléenne IsSelected indique si le contrôle est sélectionné.

Lorsque plusieurs contrôles Knob sont sélectionnés, ils sont asservis : la variation d'un bouton s'applique à tous les autres boutons sélectionnés. Ce système est utilisé par exemple dans les tables de mixage en programmation audio.

Asservissement par multisélection

Démo

A propos de cet article

Auteur : Olivier Dewit.

Historique :