Control Visibility with triggers

joel — Mon, 10 Aug 2009 21:30:10 +0000

I absolutely love writing triggers for Silverlight 3. As UX developers we often faced with the challenge of finding ways to fit a ton of information on a single user input screen. On occasion, some of that information may only be relevant to display if users have made certain choices on the interface: checking a box, selecting an item in a combobox or listbox. In this post I will include two custom TargetedTriggerAction’s which allow a developer to easily tie a UIElement’s visibility to an action made on another control.

VisibilityIsChecked

This first trigger I very simple. I wanted the ability to tie a checkbox to the visibility of another UIElement. Since a checkbox derives from ToggleButton we can get creative and write a single trigger that will work with either a CheckBox, RadioButton or ToggleButton. Here is how I did it.

using System.Windows;
using System.Windows.Controls.Primitives;
using System.Windows.Interactivity;
 
namespace VisibilityTriggers
{
    public class VisibilityIsChecked : TargetedTriggerAction
    {
        public static readonly DependencyProperty VisibleWhenCheckedProperty =
            DependencyProperty.Register("VisibleWhenChecked", typeof(bool), 
            typeof(VisibilityIsChecked), new PropertyMetadata(true));
        public bool VisibleWhenChecked
        {
            get
            {
                return (bool)GetValue(VisibleWhenCheckedProperty);
            }
            set
            {
                SetValue(VisibleWhenCheckedProperty, value);
            }
        }
 
        protected override void OnAttached()
        {
            base.OnAttached();
            FrameworkElement element = this.AssociatedObject as FrameworkElement;
            if (element != null) element.Loaded += TargetLoaded;
        }
 
        void TargetLoaded(object sender, RoutedEventArgs e)
        {
            ToggleButton tb = this.AssociatedObject as ToggleButton;
            SetVisibility(tb);
        }
        protected override void Invoke(object parameter)
        {
            RoutedEventArgs args = parameter as RoutedEventArgs;
 
            if (args != null)
            {
                ToggleButton tb = args.OriginalSource as ToggleButton;
                SetVisibility(tb);
            }
        }
 
        private void SetVisibility(ToggleButton tb)
        {
            if (tb != null)
            {
                Target.Visibility = ((bool)tb.IsChecked == VisibleWhenChecked) ? 
                Visibility.Visible : Visibility.Collapsed;
            }
        }
    }
}

To implement this trigger, we simply add an EventTrigger to a checkbox and set the TargetName to the control I want to visualize. Since there are times that we want IsChecked to either show or hide the element I have included a DependencyProperty called VisibileWhenChecked that can alter this behavior.

VisibilitySelectedItem

The second TargetedTriggerAction I created achieves a similar result, but instead of targeting a checkbox or radio button, it targets a ComboBox or ListBox. In this trigger I will flip a UIElements visibility based on a specific value being returned from a selection in the the ListBox. Here is how I implemented the trigger.

using System.Collections;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Interactivity;
 
namespace VisibilityTriggers
{
    public class VisibilitySelectedItem : TargetedTriggerAction
    {
        public static readonly DependencyProperty ValueProperty =
            DependencyProperty.Register("Value", typeof(object), typeof(VisibilitySelectedItem), null);
 
        public object Value
        {
            get
            {
                return (object)GetValue(ValueProperty);
            }
            set
            {
                SetValue(ValueProperty, value);
            }
        }
 
        public static readonly DependencyProperty MatchMemberPathProperty =
            DependencyProperty.Register("MatchMemberPath", typeof(string), typeof(VisibilitySelectedItem), new PropertyMetadata("Content"));
 
        public string MatchMemberPath
        {
            get
            {
                return (string)GetValue(MatchMemberPathProperty);
            }
            set
            {
                SetValue(MatchMemberPathProperty, value);
            }
        }
 
        protected override void OnAttached()
        {
            base.OnAttached();
            FrameworkElement element = this.AssociatedObject as FrameworkElement;
            if (element != null) element.Loaded += TargetLoaded;
        }
 
        void TargetLoaded(object sender, RoutedEventArgs e)
        {
            FrameworkElement element = this.AssociatedObject as FrameworkElement;
            Selector cb = this.Target as Selector;
            if (cb != null)
            {
                int index = cb.SelectedIndex > -1 ? cb.SelectedIndex : 0;
                object item = (cb.Items.Count > 0) ? cb.Items[index] as object : null;
 
                if (item != null)
                {
                    System.Reflection.PropertyInfo pi = item.GetType().GetProperty(MatchMemberPath);
                    var value = (pi != null) ? pi.GetValue(item, null) as object : item;
                    bool match = Equals(value, Value);
                    if (element != null) element.Visibility = match ? Visibility.Visible : Visibility.Collapsed;
                }
            }
        }
        protected override void Invoke(object parameter)
        {
            FrameworkElement element = this.AssociatedObject as FrameworkElement;
            SelectionChangedEventArgs args = parameter as SelectionChangedEventArgs;
 
            if (args != null)
            {
                IList list = args.AddedItems as IList;
                if (list != null)
                {
                    foreach (object item in list)
                    {
                        System.Reflection.PropertyInfo pi = item.GetType().GetProperty(MatchMemberPath);
                        var value = (pi != null) ? pi.GetValue(item, null) as object : item;
 
                        bool match = Equals(value, Value);
                        if (element != null) element.Visibility = match ? Visibility.Visible : Visibility.Collapsed;
                    }
                }
            }
        }
    }
}

To implement this TargetedTriggerAction you will place the custom EventTrigger on the item you want to visualize and target the SelectionChanged event on the ListBox (or ComboBox). Since we only want to visualize when a specific value is returned, we will also specifiy a "Value" and which property of our ListBox’s ItemSource we are targeting (MatchMemeberPath). The following is one way in which we can implement the trigger.

Code: VisibilityTriggers.zip

Silverlight | WPF | Microsoft.Net » ComboBox

Control Visibility with triggers

VisibilityIsChecked

VisibilitySelectedItem