StockTrader: Action-Region and Scrollbar

Topics: Prism v4 - WPF 4
Apr 7, 2012 at 3:01 PM

Hi Commuity,

I saw in the StockTrader demo app that the Action-Region will get a scrollbar if I insert more usercontrols.

XAML shows me that a ContentControl is used which normally only displays one view but it seams in the StockTrader that I can insert more than one control.

I cant find the method in the StockTrader app to insert more then one usercontrol and showing the scrollbar.

Can somebody help me? Is it possible to insert different usercontrols in a ContentControl?


Apr 9, 2012 at 3:23 PM


As you mentioned, if the host control of your region is a ContentControl you can display only a single object. To display multiple items you should use a different host control for your region (e.g. an ItemsControl).

The StockTrader RI, implements both the single view and the multiple views layout approaches, particularly, the shell's ActionRegion contains an OrdersView which also contains an OrdersRegion. The OrdersRegion is attached to a ListBox control which displays multiple OrderCompositeViews. This way by using nested regions, when the application is buying or selling a stock the Buy/Sell area is a list-style region that shows multiple buy/sell views (OrderCompositeView) as part of its list.

You could find more information about this in the following chapter of the Prism documentation at MSDN:

I hope you find this useful,

Agustin Adami

May 8, 2012 at 12:10 PM

Hi aadami,

I build my own shell which works well. Thanx for your help... and sorry for my delay to answer. Prism is very helpful. :-)

My only question for now belongs to the MainRegion. The ContentGrid expands if the DetailGrid is collapsed. I cant recognize, why the ContentGrid expands automatically.

How does it works? Could you help me???

May 8, 2012 at 7:19 PM


In order to understand how the aforementioned Grid controls are sized automatically, we first need to look at the top level Grid that contains them. This Grid defines 3 rows:

    <RowDefinition Height="124"/>
    <RowDefinition Height="4*" />
    <RowDefinition Height="{Binding Visibility, ElementName=ActionContent, Converter={StaticResource VisibilityToStarHeightConverter}, ConverterParameter=5}" />

The second row contains the ContentGrid and the third one contains the DetailGrid. As you can see, the last row's Height has a data binding to the ActionContent control (which is the "ActionContent" region inside the DetailsGrid.) The ActionContent control also has a trigger which changes its Visibility property to "Collapsed" if the controls has no content:

<Trigger Property="HasContent" Value="false">
    <Setter Property="Visibility" Value="Collapsed" />

Therefore, when a view is added / removed from the region, the ActionContent is shown / hidden by changing its Visibility property and as a result the Height of the row containing the DetailGrid control is also changed through a Value Converter:

  • If the Visibility property is set to "Collapsed" the Height of the row is: 0*
  • If the Visibility property is different from "Collapsed" the Height of the row is: 5*

As the Height of the row containing the ContentGrid is 4*, this row will adapt its Height automatically to use all available space when the last row's Height is 0* and will use 4/9 parts of the available space when the last row's Height is 5*.

I hope you find this useful,

Damian Cherubini

May 8, 2012 at 10:21 PM

Hey Damian,

many many thanx for your explanation.

I implement it in my shell and it works well. :-)))