.NET 4.0+

WPF Base Classes - FrameworkElement - Visibility

by Richard Carr, published at http://www.blackwasp.co.uk/FrameworkElementVis.aspx

The twenty-fifth part of the Windows Presentation Foundation Fundamentals tutorial continues to look at the FrameworkElement type. This article examines the visibility methods and events, which allow items in scrollable areas to be brought into view.

Bringing a Control Partially into View

In some situations it is not a requirement to bring a control fully into view. It may not even be possible if the control in question is larger than the scrollable area. However, you might want to scroll a specific portion of the control into view. You can achieve this with an overloaded version of BringIntoView.

The second version of BringIntoView accepts a Rect argument. Rect represents a rectangle with co-ordinates for the top-left and bottom-right corners. When used with BringIntoView, the rectangle is defined relative to the top-left of the control that you wish to make visible. The scrollable area is moved enough to bring just this part of the control into view.

To demonstrate, replace the code within the Bottom_Click method with that shown below. Here we are passing a rectangle width a width and height of five pixels. The rectangle is positioned at the top-left of the Border. This means that when you click the button, only the top five pixels of the Border will be made visible.

Bottom.BringIntoView(new Rect(0, 0, 5, 5));

NB: If the area could be scrolled horizontally, the method would bring the five leftmost pixels of the Border into view.

RequestBringIntoView Event

When you call BringIntoView, the control raises a RequestBringIntoView event. This event bubbles up the logical tree so that ScrollViewers, or similar controls or classes, can handle it. To be successful, such a control must capture the event and scroll accordingly. If you are creating your own layout controls, you might decide to capture this event in order that you can provide similar behaviour.

To capture the event you can subscribe to it normally, either in the XAML or in other code. For example, if we wanted to handle the event in the Border controls, we can replace their XAML with the following. Note that all three borders are subscribed to the same event; we can determine which Border raised the event using the event arguments.

<Border Name="Top"
        BorderBrush="Red"
        BorderThickness="5"
        Height="100"
        RequestBringIntoView="Border_RequestBringIntoView">
<Label HorizontalAlignment="Center"
       VerticalAlignment="Center"
       Content="Top"/>
</Border>

<Border Name="Middle"
        BorderBrush="Orange"
        BorderThickness="5"
        Height="100"
        RequestBringIntoView="Border_RequestBringIntoView">
<Label HorizontalAlignment="Center"
       VerticalAlignment="Center"
       Content="Middle"/>
</Border>

<Border Name="Bottom"
    BorderBrush="Green"
    BorderThickness="5"
    Height="100"
    RequestBringIntoView="Border_RequestBringIntoView">
<Label HorizontalAlignment="Center"
       VerticalAlignment="Center"
       Content="Bottom"/>
</Border>

As we are not creating a new scrollable layout control, we'll just change the user interface to show that we have captured the event correctly. Add the following code behind the window:

private void Border_RequestBringIntoView(object sender, RequestBringIntoViewEventArgs e)
{
    SetBackgroundForBringIntoView(Top, (Border)sender);
    SetBackgroundForBringIntoView(Middle, (Border)sender);
    SetBackgroundForBringIntoView(Bottom, (Border)sender);
}

private void SetBackgroundForBringIntoView(Border target, Border sender)
{
    target.Background = target == sender
        ? new SolidColorBrush(Colors.Yellow)
        : new SolidColorBrush(Colors.White);
}

Try running the program again and clicking the buttons. With each click you should see a change in colour of the Border that is brought into view.