Handling Content Overflow

Sometimes the built in panels can’t give best spaces to their children therefore children refuse to render completely within that smaller space. For examples some controls like ListBox having large number of items it can’t render within the containing window, some controls can’t fix their width given small space. In such cases, a content overflow problem exists.Clipping, Scrolling, Scaling, Wrapping, Trimming are different strategies for deal with this problem.

We have already discuss wrapping with wrap panel that is the only built-in way to get wraping. As for trimming, that refers to a more intelligent form of clipping. This is only supported for text by the TextBlock and AccessText controls.

Clipping

Clipping (that is, truncating or cropping) children is the default way that panels handle them when they are too large. All UIElements have a Boolean ClipToBounds property that controls whether child elements can be rendered outside of its bounds.

Controls can also control the clipping of their own content with ClipToBounds. For example, Button has ClipToBounds set to false by default.

Scrolling

For many applications, the ability to scroll through content that is too large to view all at once is critical. WPF makes this easy because all you need to do is wrap an element in a System.Windows.Controls.ScrollViewer control, and it instantly becomes scrollable. ScrollViewer makes use of ScrollBar controls, and hooks them up to your content automatically.

The ScrollBars respond to a variety of input, such as arrow keys for fine-grained scrolling, Page Up and Page Down for coarser scrolling, and Ctrl+Home or Ctrl+End to jump to the beginning or end, respectively.

And also the ScrollBars have several properties and methods for more advanced or programmatic manipulation of scrolling, but its two most important properties are VerticalScrollBarVisibility and HorizontalScrollBarVisibility. There are four distinct states specific to these two ScrollBars. They are Visible, Auto, Hidden and Dissabled. The default value for VerticalScrollBarVisibility is Visible, and the default value for HorizontalScrollBarVisibility is Auto, to match the scrolling behavior used by most applications.

Important New Concepts in WPF, revealed that the default visual tree for ListBox contains a ScrollViewer. You can set its VerticalScrollBarVisibility and HorizontalScrollBarVisibility properties as attached properties on the ListBox so the values get inherited by the implicit ScrollViewer.

Scaling

Dynamically shrinking or enlarging content to “just fit” in a given space is more appropriate for several scenarios. For an example, imagine that you want to create a card game. You’ll need some playing cards, and you’ll probably want them to scale proportionally with the game’s Window.

ScaleTransform can scale elements relative to their own size but it doesn’t provide a mechanism to scale elements relative to their available space without writing some custom code. Fortunately, System.Windows.Controls.Viewbox provides an easy mechanism to scale arbitrary content within a given space.

Viewbox is a type of class known as a decorator, a panel-like class that can only have one child element. It derives from System.Windows.Controls.Decorator, along with classes such as Border. By default, Viewbox stretches in both dimensions to fill the space given to it. But it also has a Stretch property to control how its single child gets scaled within its bounds and derived from System.Windows.Media.Stretch.

The second property of Viewbox controls whether you only want to use it to shrink content or enlarge content. This property is called StretchDirection, and derived from System.Windows.Controls.StretchDirection

Viewbox is very handy for many situations, but it’s not a good choice for content you’d normally like to wrap, such as a paragraph of text or any content in a WrapPanel. That’s because the content is given as much space as it needs in both directions before it is potentially scaled. We will discuss with code samples later.