Question

I have seen a few posts here that ask about WPF scrollbars and the answer is usually to use a ScrollViewer. The problem with this is, I can only get it to work with a statically sized window. If the window is resized, the scrollviewer gets cut off.

I would like for the NavigationWindow scrollbars to appear, any tips? I’m writing an application that needs to work on a variety of display resolutions.

Answer 1

It turns out that if you set the size of a Page control, then a scrollviewer will not resize with the window as it’s resized. If you have the following code, your scrollviewers will not work right:

<Page x:Class="SomeNamespace.SamplePage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  mc:Ignorable="d" Title="SamplePage" Height="400" Width="400">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <ScrollViewer HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalScrollBarVisibility="Auto">
        <Border x:Name="BigBadBorder" Height="1000" Width="2000" Background="HotPink" Margin="5">
            <TextBlock Text="Waldo" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Border>
    </ScrollViewer>
</Grid>
</Page>

If you simply leave out the page height and width properties as follows, it will work fine:

<Page x:Class="SomeNamespace.SamplePage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  mc:Ignorable="d" Title="SamplePage">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <ScrollViewer HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalScrollBarVisibility="Auto">
        <Border x:Name="BigBadBorder" Height="1000" Width="2000" Background="HotPink" Margin="5">
            <TextBlock Text="Waldo" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Border>
    </ScrollViewer>
</Grid>
</Page>

Simple solution in the end 🙂