WPF ScrollViewer:点击=点击,点击并按住/拖动=滚动.怎么做到这一点？

Question

我正在开发一个WPF触摸应用程序.我有一个包含按钮的滚动查看器.我想触摸拖动按钮时滚动显示,并在点击时调用按钮的命令.以下是一些入门代码:

<Window x:Class="wpf_Button_Scroll.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:my="clr-namespace:wpf_Button_Scroll"
    Title="MainWindow" Height="350" Width="200">
<Window.DataContext>
    <my:MyViewModel />
</Window.DataContext>

<Grid>
    <ScrollViewer>
        <ListView ItemsSource="{Binding MyData}" HorizontalAlignment="Stretch">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Button Content="{Binding}" 
                            Command="{Binding DataContext.MyCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}" 
                            CommandParameter="{Binding}"
                            Margin="5 2" Width="150" Height="50"
                            FontSize="30" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ScrollViewer>
</Grid>
</Window>

和视图模型:

namespace wpf_Button_Scroll
{
class MyViewModel
{
    public MyViewModel()
    {
        MyCommand = new ICommandImplementation();
    }

    public string[] MyData
    {
        get
        {
            return new string[]{
                "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", 
                "eleven", "twelve", "thirteen", "fourteen", "fifteen", "sixteen", "seventeen", "eighteen", "nineteen", "twenty"
            };
        }
    }

    public ICommand MyCommand { get; private set; }

    private class ICommandImplementation : ICommand
    {
        public bool CanExecute(object parameter) { return true; }
        public event EventHandler CanExecuteChanged;
        public void Execute(object parameter) { System.Windows.MessageBox.Show("Button clicked! " + (parameter ?? "").ToString()); }
    }
}
}

预期行为:

1. 当用户点击按钮时,会出现一个消息框,其中包含"单击按钮!"文本.==>好的

2. 当用户按下按钮并移动他的手指(不释放)时,按钮上下滚动==> NOK

如何在包含按钮的ScrollViewer中实现滚动？

我正在开发Windows 7上的Visual Studio 2013,我的目标是Windows 7桌面和具有相同代码库的Windows 8平板电脑.框架4.0.如果真的有必要,我可以升级到4.5.2(我们有很多用户,所以升级并不容易).

Answer 1

嗯，这么简单，我都为自己没有早点发现而感到不好意思。我必须在 ScrollViewer 上设置 PanningMode 属性。

像这样：

<ScrollViewer PanningMode="VerticalOnly">

最终代码：

<Window x:Class="wpf_Button_Scroll.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:my="clr-namespace:wpf_Button_Scroll"
    Title="MainWindow" Height="350" Width="200">
<Window.DataContext>
    <my:MyViewModel />
</Window.DataContext>

<Grid>
    <ScrollViewer PanningMode="VerticalOnly">
        <ListView ItemsSource="{Binding MyData}" HorizontalAlignment="Stretch">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Button Content="{Binding}" 
                            Command="{Binding DataContext.MyCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}" 
                            CommandParameter="{Binding}"
                            Margin="5 2" Width="150" Height="50"
                            FontSize="30" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ScrollViewer>
</Grid>
</Window>

视图模型没有改变