复杂纸牌游戏的WPF布局

Question

作为我的第一个WPF项目，我正在尝试构建一个类似于Magic the Gathering的纸牌游戏应用程序。我不清楚如何布置主要游乐区。您可以通过查看example 1或example 2查看与我尝试的内容类似的一些示例。右侧的聊天/信息区域将是单独的用户控件。

卡片必须保持其宽高比，每个游戏区域将以10列和2行卡片开头。随着更多卡的播放，列和/或行的数量可能会改变。每个玩家区域可以具有不同数量的列和/或行。卡可以重叠，并且可以侧向放置（轻拍）。所有区域的卡片尺寸应相同（尽管在某些区域可能会被裁剪）。卡片不需要完全位于网格上（它们不一定是对齐网格）。

当用户将鼠标悬停在卡片上时，它应该使用动画扩展到更大的尺寸。一个玩家区域中的牌可能会在展开时溢出到其他玩家的区域（但只有鼠标悬停时才会这样。）

鉴于这些要求，我很想使用一个从Canvas派生的大型用户控件，每个卡都有图像对象（以及描绘区域的其他形状）。这意味着我将在OnRenderSizeChanged事件中做很多工作来将子项定位在画布中（手动布局）。

由于自由格式放置和重叠，使用网格对我来说似乎不可行。

将游戏区域分解为较小的用户控件将利用WPF布局功能，但似乎分解会阻止卡片在鼠标悬停期间扩展到相邻的用户控件，因此这似乎也不可行。

对于一个基于画布的大型控件是否有更好的替代方案？在WPF中进行手动布局似乎是错误的，但我看不到替代方案。

Answer 1

对于复合应用程序ala Prism来说，这听起来很棒。它为实现区域，模块，在模块之间发送消息等提供了坚实的框架......从查看屏幕截图，开发具有不同区域的shell并将模块放入其中可能会大大有利于您的布局。至于卡片本身，也许它们也可以是模块？

退房： http://msdn.microsoft.com/en-us/library/ff649780.aspx

下载包中包含一个类似应用程序和事件聚合器示例的股票市场，这是一个很好的例子。

Answer 2

你说：

  

将游戏区域分解为较小的用户控件将利用WPF布局功能，但似乎分解会阻止卡片在鼠标悬停期间扩展到相邻的用户控件，因此这似乎也不可行。

但这不正确。分解绝对是正确的方法，这不会阻止卡扩展到相邻的用户控件。原因是您可以使用RenderTransform而不是LayoutTransform。请参阅this example，Charles Petzold或this article，以查看差异。由于在布局完成后应用了RenderTransform，因此您的卡片可以扩展到其范围之外。

鉴于分解是正确的方法，我会将您的各种卡片集合安排到Grid，每个集合都是ItemsControl。 ItemsControl应将其ItemsSource属性绑定到某个集合，然后您可以提供显示图像和任何其他信息的自定义ItemTemplate。我会犹豫使用Canvas，因为这会限制你对卡的位置进行硬编码（对于一个可以更优雅地解决的问题，这是一个类似WinForms的解决方案）。利用WPF的精彩布局引擎，并使用嵌套网格和项控件来创建动态布局。这将确保您的游戏板在任何分辨率和拉伸到各种尺寸时看起来都很好。

Answer 3

我建议你看看this guys project。在java中我知道，但如果我要去建立纸牌游戏的路线。那就是我想要的。

Answer 4

网格内的很多画布都可以帮助你，画布将允许内容在其边界之外渲染，只要你将ClipToBounds转为false，你就可以更好地控制卡比其他方案。您还将获得网格控件的强大功能，允许您根据需要添加和删除列和行（尽管您还必须动态添加和删除画布，但这并不太难。

如果您担心重新调整复选框时“卡片”的内容会四处移动，请将其环绕在视图框中。它将为您管理所有缩放，并确保您的卡使用尽可能多的房地产。或者你可以使用RenderTransform，但是很多这些可能会减慢程序的速度（专家：视图框是否使用RenderTransforms进行操作？如果是这样，这一点就没有意义了）

为了确保卡片保持其宽高比，请确保每个Image的Stretch属性都设置为“Uniform”，通过指定主卡并将所有后续卡的高度和宽度绑定到所有大小，可以使它们保持相同的大小。这张原始卡，虽然有点乱，但不允许卡片扩展。另一种解决方案是手动为每张卡设置单个尺寸，当您想要扩展或缩小时为其设置动画。