WPF ScrollViewer:点击=单击，点击并按住/拖动=滚动.如何实现这一目标? [英] WPF ScrollViewer: tap=click, tap-and-hold/drag=scroll. How to achieve this?

问题描述

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

I'm developping a WPF touch application. I have a scrollviewer containing buttons. I want to scroll the display when I touch-drag the buttons, and call the button's command when I tap. Here's some code to get started:

<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. 当用户点击一个按钮时，会出现一个消息框，上面写着Button clicked!"==> 好的

1. when the user taps a button, a message box appears with the text "Button clicked!" ==> OK

当用户按下按钮并移动手指(不松开)时，按钮会上下滚动 ==> NOK

when the user presses a button and moves his finger (without releasing), the buttons scroll up and down ==> NOK

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

How can I achieve scrolling in a ScrollViewer that contains buttons?

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

I'm developping on Visual Studio 2013 on Windows 7, and I'm targeting a Windows 7 desktop and a Windows 8 tablet with the same codebase. Framework 4.0. If it's really necessary, I can upgrade to 4.5.2 (we have many users, so it's not trivial to upgrade).

推荐答案

嗯，这个简单到我都不好意思早点发现了.我必须在 ScrollViewer 上设置 PanningMode 属性.

Well, this is so simple that I feel embarrassed that I didn't find it earlier. I had to set the PanningMode property on the ScrollViewer.

像这样:

<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>

视图模型不会改变

这篇关于WPF ScrollViewer:点击=单击，点击并按住/拖动=滚动.如何实现这一目标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！