wpfscrollbarnavigationwindow

WPF NavigationWindow scrollbar


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.


Solution

  • 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 :)