在C#Windows窗体应用程序中滑动图像(Tinder滑动)

Question

我真的需要在我自己的应用程序中添加刷图片的可能性，比如在约会应用程序中(可能是Tinder)。如果图像向左滑动，则应为变量指定一个特定值(例如，+1)。如果向右，则不应发生任何更改(变量为+0)。滑动图像后，下一个图像应该平滑浮动(从前面、从下面，这无关紧要)。

我试着自己做，但不知道怎么做。我知道在Windows窗体上这样做比在WPF上更困难。我最近才开始对WPF感兴趣，所以在WPF上解决这个问题也很有用，但Windows窗体仍然是一个优先事项。请帮我解决这个问题。

Answer 1

您忘记定义"滑动"；。Winforms没有手指输入的概念，只有鼠标拖动的概念。

如果操作员向左拖动鼠标，图像是否会随之移动？小的拖动是否足够，或者操作员应该将图像完全拖动到窗口之外？

如果操作员拖动一个小部件，但停止拖动，会发生什么情况？图像是否应该像没有拖动一样向后移动？还是应该将图像拖到一半？

型号

你使用了"图像"一词，但事实上，图像代表的是更多的东西：在Tinder中，它代表图像背后的人、姓名、出生日期、描述和其他部分，其中包括图像。

让我们称之为Profile：每个配置文件都有几个属性，其中包括一个Image。

class Profile
{
public Image Image {get; set;}
...
}

在您的模型中，您将需要一个FIFO序列"；要显示的轮廓"；，拒绝的配置文件的集合和接受的配置文件集合。你没有说你想对被拒绝和被接受的配置文件做什么，所以我所做的只是把被拒绝的配置文件放在一个存储库中，而被接受的则放在另一个存储库里。

存储库中发生的事情对于模型是隐藏的。可能是删除了所有内容，或者将其保存在文件或数据库中，或者其他什么，模型不必知道。它所需要知道的是，两个存储库都需要有一个接口来将配置文件放入：

interface IProfileRepository
{
void Add (Profile profile);
}

带有被拒绝图像的存储库可能只会丢弃概要文件，而另一个存储库可能会做一些事情，比如通知概要文件的所有者他已经被接受。

我们还需要一些输入配置文件。我也不知道它们来自哪里：

interface IProfileSource
{
Profile GetProfile(); // returns the next Profile
}

实际的ProfileSource可能从XML文件、互联网或其他任何地方读取数据，这是不可能的。

因此，在你的程序中，你会有以下内容：

class ProfileModel
{
private IProfileSource ProfileSource {get;} = new ...;
private IProfileRepository AcceptedProfiles {get;} = new ...;
private IProfileRepository RejectedProfiles {get;} = new ...;
public Profile GetNextProfile()
{
return ProfileSource.GetProfile();
}
public void AcceptProfile(Profile profile)
{
AcceptedProfiles.Add(profile);
}
public void RejectProfile(Profile profile)
{
RejectedProfiles.Add(profile);
}

查看

将显示配置文件图像的窗体将需要显示配置文件的UserControl。它隐藏了配置文件中显示的内容。您可能只显示图像，但如果您愿意，您可以让它显示人员的年龄、姓名、位置等。您的程序所知道的就是，您可以要求ProfileControl显示配置文件，显示什么以及如何显示，这取决于ProfileControl。

使用visualstudio创建一个名为ProfileControl的新UserControl。使用Visual Studio设计器在控件上绘制需要显示配置文件时要显示的内容。如果您只想显示图像，请将PictureBox添加到ProfileControl并使其停靠。如果您还想显示名称，请添加标签等

class ProfileControl : UserControl
{
private Profile profile;
public ProfileControl()
{
InitializeComponents();
}
public Profile Profile
{
get => this.profile;
set
{
if (this.Profile != value)
{
this.profile = value;
this.pictureBox1.Image = this.profile.Image;
}
}
}
}

考虑添加一个事件ProfileChanged和一个受保护的方法OnProfileChanged，以通知其他人此ProfileControl显示了一个新映像。

您将需要另一个UserControl来执行ProfileControl的拖动。它将有两个ProfileControl：当前的和下一个。鼠标拖动后，当前ProfileControl和下一个ProfileControl的位置将发生更改。下一个ProfileControl将与当前ProfileControl相邻，具体取决于拖动的方向。

此SwipeControl隐藏了如何进行滑动。SwipeControl(=软件，而非操作员)的用户将只设置当前和下一个配置文件，并且无论何时通过事件接受或拒绝当前配置文件，都会收到通知。该事件将自动设置下一个配置文件(如果有)

使用visual studio设计器为SwipeControl提供两个ProfileControl。为事件添加事件处理程序：

• 鼠标向下：记住当前鼠标位置为DragStartPosition。给CurrentProfileControl和NextProfileControl SwipeControl的ClientArea的大小。将CurrentProfileControl的Location设置为(0，0)，使其位于SwipeControl的ClientArea的左上角。NextProfileControl仍然不可见，我们不知道操作员是向左还是向右滑动
• 鼠标移动：鼠标移动的水平距离=当前鼠标位置X-拖动开始位置X。用移动的距离移动X位置CurrentProfileControl。决定NextProfileControl应该在CurrentProfileControl的左侧还是右侧。计算位置。使NextProfileControl可见
• 鼠标向上移动：如果移动的距离超过某个最小值，则设置滑动完成，否则撤消：固定当前并使下一个不可见

SwipeComplete：如果已接受提升事件ProfileAccepted，如果已拒绝提升事件ProfileRecjected。NextProfileControl中的Profile设置为CurrentProfileControl。获取NextProfile并将其放入NextProfileControl

class SwipeControl : CustomControl
{
public Profile CurrentProfile
{
get => this.CurrentProfileControl.Profile;
set => this.CurrentProfileControl.Profile = value;
}
public Profile NextProfile
{
get => this.NextProfileControl.Profile;
set => this.NextProfileControl.Profile = value;
}
public event EventHandler ProfileAccepted;
public event EventHandler ProfileRejected;
protected virtual void OnProfileAccepted()
{
// raise event ProfileAccepted
this.ProfileAccepted?.Invoke(this, EventArgs.Empty);
}

使用visualstudio设计器添加事件处理程序并按照编写的方式实现代码。

##SwipeForm##

使用visual studio设计器将SwipeControl添加到SwipeForm。同时添加模型。

订阅SwipeControl的接受/拒绝事件。

加载表单后：从模型中获取第一个和下一个Profile，并将它们放入SwipeControl

一旦事件ProfileAccepted：从SwipeControl获取CurrentProfile，并将其作为Accepted放入模型中。下一个配置文件将是当前配置文件。从模型中获取下一个，并在SwipeControl中将其设置为下一个配置文件。

对事件ProfileRecjected 执行类似操作