Show Scrollbar when View is to large

Topics: UI Architecture
Aug 8, 2012 at 8:59 AM

Hi,

in my program i have a MainView and in this View i switch betwenn other Views. Sometimes the content of this Views is larger than the MainView, depending on the Size of my Monitor. Is it possible to show the scrollbars automatically?

In the MainView I use: <ContentControl x:Name="ActiveItem" /> for switching between the Views.

Thx

Aug 8, 2012 at 5:04 PM

Hi,

I'm still quite new to WPF so I may have misinterpreted your aim but I want to learn so I had a look at this.

So far I've created a simple test that doesn't use Caliburn Micro to see how it would work with just WPF.  I think what you want to is change this:

<ContentControl x:Name="ActiveItem" />

to something like this:

<ScrollViewer HorizontalScrollBarVisibility="Auto"
	      VerticalScrollBarVisibility="Auto">
	<ContentControl x:Name="ActiveItem" />
</ScrollViewer>

It seems to work on the sample I tried.  I've got my own website so I can post a code sample later.  I'm also going to try and do the same think with Caliburn Micro as well.

Another way to solve this, though I don't think it works for your situation is the ViewBox control.  This is what I had in mind first but I had mixed it up with the ScrollViewer Control.  The ViewBox scales content to fit in its fixed size.

Aug 8, 2012 at 11:17 PM

I've completed a test version using Caliburn Micro now.  I've uploaded that and the original test I did to my website here Quick testing with Caliburn Micro.

Aug 9, 2012 at 8:47 AM

Perfect, thank you very much! I found the solution yesterday too, by myself.

One thing to say is, if you want to show the Views in a HeaderedContentControl like:

<HeaderedContentControl Header="Test">
    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
          <ContentControl x:Name="ActiveItem"/>
    </ScrollViewer>
</HeaderedContentControl>

You have to add a Style in the Resources like:

<Style TargetType="{x:Type HeaderedContentControl}">
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type HeaderedContentControl}">
                <DockPanel>
                    <ContentPresenter DockPanel.Dock="Top" ContentSource="Header" />
                    <ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                </DockPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Otherwise the Scrollbars are not shown!