Question

My ScrollViewer is not working. I’ve created a UserControl to show arrow indicators that tell the user that the scroll viewer can be scrolled. So now, the content just overflows the ScrollViewer. Here is my XAML:

<UserControl x:Class="QCK.Common.ResourceLibrary.CustomControls.ArrowScrollViewer"
             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" 
             d:DesignHeight="300" d:DesignWidth="300"
             Name="UserControl">
    <UserControl.Resources>

        <Style x:Key="ScrollDownArror" TargetType="{x:Type Border}">
            <Setter Property="Margin" Value="2,0,18,0"/>
            <Setter Property="Visibility" Value="Visible"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=CanScrollDown}" Value="True">
                    <Setter Property="Visibility" Value="Visible"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="ScrollUpArror" TargetType="{x:Type Border}">
            <Setter Property="Margin" Value="2,0,18,0"/>
            <Setter Property="Visibility" Value="Visible"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=CanScrollUp}" Value="True">
                    <Setter Property="Visibility" Value="Visible"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>

    </UserControl.Resources>
    <Grid>
        <ScrollViewer Name="scrollViewer" VerticalScrollBarVisibility="Visible">
            <ContentPresenter VerticalAlignment="Top"/>
        </ScrollViewer>

        <Border Style="{StaticResource ScrollUpArror}"  DataContext="{Binding ElementName=c_list}"
                                IsHitTestVisible="false"
                                VerticalAlignment="Top">
            <Image Margin="15" Height="20">
                <Image.Source>
                    <DrawingImage>
                        <DrawingImage.Drawing>
                            <GeometryDrawing Brush="DarkGray" Geometry="M  0, 10 L 50, 30 L 100, 10 Z">
                                <GeometryDrawing.Pen>
                                    <Pen Brush="DimGray" />
                                </GeometryDrawing.Pen>
                            </GeometryDrawing>
                        </DrawingImage.Drawing>
                    </DrawingImage>
                </Image.Source>
            </Image>
        </Border>

        <Border Style="{StaticResource ScrollDownArror}"  DataContext="{Binding ElementName=c_list}"
                                IsHitTestVisible="false"
                                VerticalAlignment="Bottom">
            <Image Margin="15" Height="20">
                <Image.Source>
                    <DrawingImage>
                        <DrawingImage.Drawing>
                            <GeometryDrawing Brush="DarkGray" Geometry="M  0, 30 L 50, 10 L 100, 30 Z">
                                <GeometryDrawing.Pen>
                                    <Pen Brush="DimGray" />
                                </GeometryDrawing.Pen>
                            </GeometryDrawing>
                        </DrawingImage.Drawing>
                    </DrawingImage>
                </Image.Source>
            </Image>
        </Border>
    </Grid>
</UserControl>

The contents just overflow inside the control not showing a scroll bar or allowing mouse wheel scrolling or anything.

Answer 1

I’m not 100% sure how you want this UserControl to work so I might be of target here. The way I understand it, you want to be able to do something like this

<local:ArrowScrollViewer x:Name="userControl11">
    <TextBox Text="Test" AcceptsReturn="True"/>
</local:ArrowScrollViewer>

And the TextBox will end up between the Arrow Indicators. In that case I think you’ll need to edit the Template of the UserControl instead. Try it like this

<UserControl.Resources>
    <Style x:Key="ScrollDownArror" TargetType="{x:Type Border}">
        <Setter Property="Margin" Value="2,0,18,0"/>
        <Setter Property="Visibility" Value="Visible"/>
        <Style.Triggers>
            <DataTrigger Binding="{Binding Path=CanScrollDown}" Value="True">
                <Setter Property="Visibility" Value="Visible"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>

    <Style x:Key="ScrollUpArror" TargetType="{x:Type Border}">
        <Setter Property="Margin" Value="2,0,18,0"/>
        <Setter Property="Visibility" Value="Visible"/>
        <Style.Triggers>
            <DataTrigger Binding="{Binding Path=CanScrollUp}" Value="True">
                <Setter Property="Visibility" Value="Visible"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</UserControl.Resources>
<UserControl.Template>
    <ControlTemplate TargetType="{x:Type UserControl}">
        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Border Grid.Row="0" Style="{StaticResource ScrollUpArror}"  DataContext="{Binding ElementName=c_list}"
                                    IsHitTestVisible="false"
                                    VerticalAlignment="Top">
                    <Image Margin="15" Height="20">
                        <Image.Source>
                            <DrawingImage>
                                <DrawingImage.Drawing>
                                    <GeometryDrawing Brush="DarkGray" Geometry="M  0, 10 L 50, 30 L 100, 10 Z">
                                        <GeometryDrawing.Pen>
                                            <Pen Brush="DimGray" />
                                        </GeometryDrawing.Pen>
                                    </GeometryDrawing>
                                </DrawingImage.Drawing>
                            </DrawingImage>
                        </Image.Source>
                    </Image>
                </Border>
                <ScrollViewer Grid.Row="1" Name="scrollViewer" VerticalScrollBarVisibility="Visible">
                    <ContentPresenter Grid.Row="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </ScrollViewer>
                <Border Grid.Row="2" Style="{StaticResource ScrollDownArror}"  DataContext="{Binding ElementName=c_list}"
                                    IsHitTestVisible="false"
                                    VerticalAlignment="Bottom">
                    <Image Margin="15" Height="20">
                        <Image.Source>
                            <DrawingImage>
                                <DrawingImage.Drawing>
                                    <GeometryDrawing Brush="DarkGray" Geometry="M  0, 30 L 50, 10 L 100, 30 Z">
                                        <GeometryDrawing.Pen>
                                            <Pen Brush="DimGray" />
                                        </GeometryDrawing.Pen>
                                    </GeometryDrawing>
                                </DrawingImage.Drawing>
                            </DrawingImage>
                        </Image.Source>
                    </Image>
                </Border>
            </Grid>                
        </Border>
    </ControlTemplate>
</UserControl.Template>

Update

There are several ways which you can access the ScrollViewer in the Template from code behind. Here’s three ways that comes to mind

• Add an event handler for the Loaded event of the ScrollViewer
• Use Template.FindName in code behind
• Traverse the Visual Tree

Here’s an example using the Loaded event

<ScrollViewer Loaded="scrollViewer_Loaded"
              Grid.Row="1"
              ...>

Code behind

private ScrollViewer m_scrollViewer;
private void scrollViewer_Loaded(object sender, RoutedEventArgs e)
{
    m_scrollViewer = sender as ScrollViewer;
}

And if you like to use FindName

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
    m_scrollViewer = this.Template.FindName("scrollViewer", this) as ScrollViewer;
}