为什么我的 ScrollViewer 不滚动？

Question

我的 ScrollViewer 无法正常工作。我创建了一个 UserControl 来显示箭头指示器，告诉用户滚动查看器可以滚动。所以现在，内容刚刚溢出了 ScrollViewer。这是我的 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>

内容只是在控件内溢出，不显示滚动条或允许鼠标滚轮滚动或任何其他内容。

Answer 1

我不是 100% 确定您希望这个 UserControl 如何工作，所以我可能是这里的目标。按照我的理解，您希望能够执行这样的操作

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

并且 TextBox 将最终位于箭头指示器之间。在这种情况下，我认为您需要编辑 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>
<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>

更新

您可以通过多种方式从代码隐藏中访问模板中的 ScrollViewer。想到的三种方法

• 为 ScrollViewer 的 Loaded 事件添加事件处理程序
• 在后面的代码中使用 Template.FindName 遍历
• 可视化树

下面是使用 Loaded 事件的示例

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

代码隐藏

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

如果您喜欢使用 FindName

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