Archive for March, 2011

ClipToBound Behavior [Extension]

Aucun commentaire

    Comme beaucoup d'autres petits détails, vous aurez sans aucun doute remarqué qu'il n'est pas possible de définir la propriété ClipToBounds dans Silverlight contrairement à WPF. Autrement dit, vous ne pouvez pas faire en sorte qu'un objet contenu dans un autre ne dépasse pas des limites de son parent sauf si cela est prévu nativement. Comme d'habitude, la solution consiste à créer une extension ou un comportement. J'ai fais une propriété attachée ainsi qu'un comportement qui facilitent cette mise en oeuvre.

    Voici une copie d'écran réalisée sous Blend.

    Et voici le code très simpliste qui permet de créer cet effet via une AttachedProperty :

    public static class ClippingExtension
        {
     
            public static bool GetClipToBounds(DependencyObject obj)
            {
                return (bool)obj.GetValue(ClipToBoundsProperty);
            }
     
            public static void SetClipToBounds(DependencyObject obj, bool value)
            {
                obj.SetValue(ClipToBoundsProperty, value);
            }
     
            // Using a DependencyProperty as the backing store for ClipToBounds.  This enables animation, styling, binding, etc...
            public static readonly DependencyProperty ClipToBoundsProperty =
                DependencyProperty.RegisterAttached("ClipToBounds", typeof(bool), typeof(FrameworkElement), new PropertyMetadata(false,OnClipToBoundsChanged));
     
     
            private static void OnClipToBoundsChanged (DependencyObject d, DependencyPropertyChangedEventArgs e)
            {
                FrameworkElement f = d as FrameworkElement;
     
                if (f == null)
                {
                    return;
                }
     
                if (System.Convert.ToBoolean(e.NewValue))
                {
                    f.SizeChanged += new SizeChangedEventHandler(f_SizeChanged);
     
                    RectangleGeometry rg = new RectangleGeometry();
     
                    rg.Rect = new Rect() { Width = f.ActualWidth, Height = f.ActualHeight };
     
                    f.Clip = rg;
                }
                else
                {
                    f.SizeChanged -= new SizeChangedEventHandler(f_SizeChanged);
     
                    f.Clip = null;
                }
     
            }
     
            static void f_SizeChanged(object sender, SizeChangedEventArgs e)
            {
                FrameworkElement f = sender as FrameworkElement;
     
                if (f == null)
                {
                    return;
                }
     
                RectangleGeometry rg = new RectangleGeometry();
     
                rg.Rect = new Rect() { Width=f.RenderSize.Width, Height=f.RenderSize.Height };
     
                f.Clip = rg;
     
            }
        }

    RangedSlider [Custom Control]

    Aucun commentaire


      J'ai récemment eu besoin d'utiliser un Slider avec deux thumbs, certaines librairies le proposent, mais de manière générale, je ne les trouve pas simple à "templatiser". N'en ayant pas trouver d'adéquat à télécharger, je l'ai codé et je le fournirai en version finale avec la prochaine version de la librairie Tweened. Le look du contrôle n'est pas terminé. Un RangeSlider permet de filtrer ou de définir une plage de valeur. Cela peut être du double, des DateTime (ou tout autre type à l'aide d'un converter).
      Le contrôle fourni ne propose pour l'instant que le mode horizontal mais je prévois la version avec affichage verticale. Il est possible de définir le mode d'update de la propriété Value durant le drag ou lors du relâché. Cela est très utile lorsque vous souhaitez éviter un rafraichissement trop fréquent coté Vue-Modèle par exemple. Coté intégration graphique, c'est exactement la même procédure que pour le slider classique et donc assez facile à personnaliser.

      Get Microsoft Silverlight

      Voici une exemple.

      Install Microsoft Silverlight


      Vous pouvez télécharger le projet ici.

      Yet Another FlipControl [Custom Control]

      2 commentaires


        Lorsque vous développez une application Silverlight ou Wpf, certaines questions se posent avec plus de force. C'est notamment le cas concernant l'ergonomie. Définir un zoning simple et sans heurts est indispensable pour une utilisation intuitive de votre application. Vous remarquerez souvent que certains usages ou même certaines entités métier présentent plusieurs facettes.
        Prenons l'exemple de plusieurs classes héritant d'une classe ou implémentant une interface. Nous pourrions partir du principe que chaque sous-classe présente des membres communs a la classe mère ainsi qu'un jeu de propriétés ou de méthodes qui lui est spécifique. Lorsqu'une vue de l'application représente ce type d'instance, nous pouvons répartir l'affichage de cette dernière en deux zones distinctes que l'utilisateur n'aura pas forcément besoin de voir en même temps. La rotation 3D de la surface est un bon moyen d'y parvenir. Je mets à disposition un nouveau contrôle utilisateur : le FlipControl. Il est constitué de deux faces qui exposent chacune, un visuel distinct. On affiche successivement les deux faces par une rotation 3D sur l'axe horizontal ou vertical.
        Je mets donc à disposition un contrôle de ce type directement utilisable dans Blend. C'est un ContentControl qui possède les propriétés Header, FrontContent, BackContent et FrontTemplate et BackTemplate représentant le DataContext de chaque face.

        Il possède également une propriété IsFlipped sur laquelle vous pourrez créer une liaison de donnée afin de déclencher une rotation 3D du contrôle. L'avantage principal de ce FlipControl est de faciliter la configuration du contenu de chaque face directement dans Blend.

        Install Microsoft Silverlight

        Les sources de base ainsi que le projet de test sont téléchargeables à cette adresse.