Question

I have a rectangle with its Visibility property bound to the view-model. For (apparent) performance reasons, I’m setting the DataContext in the page’s Loaded event. This rectangle should be collapsed by default. Unfortunately, with this “late-context” pattern, the rectangle shows for a few fractions of a second.

Is there a no-code way to make it collapsed by default?

If no, I could simply set the property to Collapsed and bind it in the Loaded event, but I have many such rectangles in my app.

Could I implement a ContentControl that is collapsed until loaded? Is that second idea too far-fetched?

Answer 1

I made an AppearingControl who’s implementation defies calling this “coding” since it’s so simple:`

public class AppearingControl : ContentControl
{
  public AppearingControl()
  {
    if( !System.ComponentModel.DesignerProperties.IsInDesignTool )
    {
      this.Visibility = System.Windows.Visibility.Collapsed;
      this.Loaded += new RoutedEventHandler( AppearingControl_Loaded );
    }
  }

  void AppearingControl_Loaded( object sender, RoutedEventArgs e )
  {
    this.Loaded -= new RoutedEventHandler( AppearingControl_Loaded );

    this.ClearValue( AppearingControl.VisibilityProperty );
  }
}

I can use the control this way:

<slim:AppearingControl HorizontalContentAlignment="Stretch" 
                       VerticalContentAlignment="Stretch">
    <Rectangle Visibility="{Binding TipRoundingHasError, Converter={StaticResource VisibilityConverter}}">
        <Rectangle.Fill>
            <SolidColorBrush Color="#FFFF4040" Opacity="0.5"/>
        </Rectangle.Fill>
    </Rectangle>
</slim:AppearingControl>

Can someone confirm I didn’t just reinvent the wheel, or worse, use a bazooka to kill a fly?

Thanks.