collapse UIElements in Silverlight LOB application based upon data in model

Question

Within a form I have a user control for each field being returned. The control consists of a label and a texblock within a stack panel. This control is part of a datatemplate that makes up my form which is comprised of a wrap panel which contains the user controls. My intent is when the form is rendered to evaluate the bound property returned in my model and if it null set the visibility of the control to collapsed. The intent is to only have fields rendered within the form that has data being returned. The wrap panel allows for the controls to stay inline vs allowing excess white space in the form.

My initial thought was to iterate through the List that is returned and if the property in the model is null set the visibility of the control to collapsed via a dependency property. A concern I have here is with performance as some forms have over 700 fields / properties.

I was curious to learn if anyone has done a similar approach or what approach they used to control the visibility of UIElements

Thanks in advance for any suggestions

score 0 · Accepted Answer · answered May 03 '11 at 23:50

We use Dependency Properties to determine visibility of controls. We do this in concert with our Authorization library. So in our xaml, the code looks something like this:

<ListBoxItem x:Name="About" 
    Content="About Us"  
    AuthLib:Authorization.Visibility="WebUser"
    Margin="10,5,10,5" />
<ListBoxItem x:Name="Accounting" 
    Content="Work Order Acct" 
    AuthLib:Authorization.Visibility="Admin, Accounting,Finance"
    Margin="10,5,10,5" />

Where WebUser is any authenticated user, and obviously Accounting/Finance/Admin roles have elevated privilages.

We've done this with dozens of calls on a page without any problem, but never hundreds. Might be worth a copy/paste to see how it goes.

In case it's worthwhile, here's the visibility property in our Auth library:

#region Visibility

  public static string GetVisibility(UIElement obj)
    {
        return (string)obj.GetValue(VisibilityProperty);
    }
  public static void SetVisibility(UIElement obj, string value)
    {
     obj.SetValue(VisibilityProperty, value);
    }

    /// Using a DependencyProperty as the backing store for requiresRole.  This enables animation, styling, binding, etc...
  public static readonly DependencyProperty VisibilityProperty = DependencyProperty.RegisterAttached(
     "Visibility", 
        typeof(string), 
        typeof(Authorization),
     new PropertyMetadata(Visibility_Callback));
    // This callback will be invoked when some control will receive a value for your 'Visibility' property
  private static void Visibility_Callback(DependencyObject source, DependencyPropertyChangedEventArgs e)
    {
        var uiElement = (UIElement)source;

        if (App.IsAuthenticated)
        {
            RecalculateControlVisibility(uiElement);
        }
        else
        {
            EventHandler eh = null;
            eh = delegate
            {
                RecalculateControlVisibility(uiElement);
            };
            App.Authenticated += eh;
                RecalculateControlVisibility(uiElement);
        }
    }

    private static void RecalculateControlVisibility(UIElement control)
    {
        //Authorization.UserHasRole() - is your code to check roles
        if (Authorization.UserHasRole(GetVisibility(control)))
        {
            control.Visibility = Visibility.Visible;
        }
        else
        {
            control.Visibility = Visibility.Collapsed;
        }
    }

  #endregion

Thanks Scott, this is along the lines of what I was thinking. Thanks for validating my approach. — rlcrews, May 04 '11 at 12:42

collapse UIElements in Silverlight LOB application based upon data in model

1 Answers1