Question

我使用ScrollViewer作为Silverlight应用程序的一部分。它有一个水平方向，我希望它看起来只有滚动按钮出现，而不是滚动条本身。像这样粗糙的ASCII渲染：

------------------------------------------------------
|   |                                            |   |
| < |                Content Here                | > |
|   |                                            |   |
------------------------------------------------------

我知道我可以使用模板功能，但我看到的所有样本只会改变所有元素的外观，而不是它们的原始定位，或者它们是否出现。是否可以这样做，有人可以提供模板外观的大纲吗？

Answer 1

我做了类似的事情，我发现这样做的最好方法是将您的内容放在滚动查看器中，然后关闭滚动条。然后编码按钮以滚动滚动查看器。

修改：回复关于无法处理尺寸问题的评论。

首先，您将此控件构建为ContentControl。它应该有一个在generic.xaml中定义的模板，它有你的按钮控件和滚动查看器。类似的东西：

<Canvas x:Name="root">
  <Button x:Name="left" Content="<"/>
  <Button x:Name="right" Content=">"/>
  <ScrollViewer x:Name="viewer" BorderThickness="0" VerticalScrollBarVisibility="Hidden">
    <ContentPresenter />
  </ScrollViewer>
</Canvas>

然后在你的控件中你需要覆盖OnApplyTemplate：

public override void OnApplyTemplate()
{
  base.OnApplyTemplate();

  left = GetTemplateChild("left") as Button;
  left.Click += new RoutedEvent(YourHandler);
  right = GetTemplateChild("right") as Button;
  right.Click += new RoutedEvent(YourHandler);
  // position your scroll buttons here, not writing that code
  scroll = GetTemplateChild("viewer") as ScrollViewer;
  root = GetTemplateChild("root") as Canvas;

  var fe = this.Content as FrameworkElement;
  if (fe != null)
  {
    fe.SizeChanged += new SizeChangedEventHandler(fe_SizeChanged);
  }
}

void  fe_SizeChanged(object sender, SizeChangedEventArgs e)
{
  this.InvalidateMeasure();
}

protected override Size ArrangeOverride(Size finalSize)
{
  if (!double.IsInfinity(scroll.ViewportHeight))
  {
     left.Visibility = (scroll.HorizontalOffset > 0);
     right.Visibility = (scroll.HorizontalOffset < ScrollableHeight);
  }
  return base.ArrangeOverride(finalSize);
}

protected override Size MeasureOverride(Size availableSize)
{
  scroll.Measure(availableSize);
  return scroll.DesiredSize;
}

在按钮单击处理程序中，您需要（1）滚动查看器和（2）检查HorizontalOffset的新值，以查看是否需要隐藏或显示任一按钮。

免责声明：此代码可能无法正常工作，因为它是手工编写并基于不同的示例。

Answer 2

这是另一种选择。覆盖SCrollviewer的默认模板，并将按钮作为PageUp / PageDown处理。我下面的例子是一个垂直滚动的scrollviewer。您可以轻松切换到水平滚动并将处理程序从PageUp / PageDown更改为左右处理程序。

<ControlTemplate TargetType="{x:Type ScrollViewer}" x:Key="ButtonOnlyScrollViewer">
        <ControlTemplate.Resources>
            <!-- Add style here for repeat button seen below -->
        </ControlTemplate.Resources>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <RepeatButton Grid.Row="0"
                          Foreground="White" 
                          Background="Yellow" 
                          HorizontalAlignment="Stretch" 
                          Command="ScrollBar.PageUpCommand"
                          Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}">
            </RepeatButton>

            <ScrollContentPresenter
                CanContentScroll="{TemplateBinding CanContentScroll}"
                Grid.Row="1" 
                Content="{TemplateBinding Content}"  
                Width="{TemplateBinding Width}"
                Height="{TemplateBinding Height}" 
                Margin="{TemplateBinding Margin}"/>

            <RepeatButton Grid.Row="2" Background="Black" Foreground="White" Command="ScrollBar.PageDownCommand">
            </RepeatButton>
        </Grid>
    </ControlTemplate>

Answer 3

我在这里找到了解决方案：）

http://weblogs.asp.net/fredriknormen/archive/2009/09/18/create-an-automatic-scrollable-image-slider-in-silverlight.aspx

这是使用DispatcherTimer进行的，非常好的例子：）

Answer 4

我一直在寻找工作解决方案很长一段时间。基于路易斯的解决方案，我设法让它发挥作用。（在WPF中）

此解决方案适用于水平滚动。

首先，添加ListView：

    <ListView ItemsSource="{Binding Items}">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListView.Template>
            <ControlTemplate>
                <ScrollViewer Template="{StaticResource ButtonOnlyScrollViewer}">
                    <ItemsPresenter />
                </ScrollViewer>
            </ControlTemplate>
        </ListView.Template>
    </ListView>

来自Louis的水平滚动答案的修改模板：

    <ControlTemplate TargetType="{x:Type ScrollViewer}" x:Key="ButtonOnlyScrollViewer">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <RepeatButton Content="&lt;"
                          Grid.Column="0"
                          Command="ScrollBar.LineLeftCommand"
                          Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>

            <ScrollContentPresenter
                CanContentScroll="{TemplateBinding CanContentScroll}"
                Grid.Column="1" 
                Content="{TemplateBinding Content}"  
                Width="{TemplateBinding Width}"
                Height="{TemplateBinding Height}" 
                Margin="{TemplateBinding Margin}"/>

            <RepeatButton Content="&gt;"
                          Grid.Column="2" 
                          Command="ScrollBar.LineRightCommand"
                          Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
        </Grid>
    </ControlTemplate>

只有按钮的Silverlight Scrollviewer

4 个答案: