WPF DataGrid设计效果

Question

我的应用程序中有一个WPF DataGrid，我希望添加一个点击效果来生成更多数据并滑入网格。

所以这是我的DataGrid：

你可以看到我想要发生的事情是点击箭头以获取滑动信息并被其替换：

我想知道这可能吗？

Answer 1

我会将UI元素分组为＆＃34;选择剧集＆＃34;和＆＃34;选择章节＆＃34;使用动画将显示从一个组更改为另一个组。

我不能给你一个完整的代码示例，但我会尝试这个：

• 创建一个包含两列一行的Grid控件
• 获取现有的UI元素并将其放在左栏
中
• 放置用于在Grid
右栏中显示剧集详情（章节）的UI元素
• 最初左列的宽度为100％，右列的宽度为0％
• 假设＆＃34;箭头＆＃34;从第一张图片开始就是一集＆＃34;剧集细节＆＃34;按钮：为按钮添加事件触发器（请参阅下面的示例代码）
• 在事件触发器内：使用BeginStoryboard启动anmimation，在短时间内更改两列的宽度。 DoubleAnimation应该做。在StoryBoard中，您需要解决要更改的目标元素（Grid的列宽）
• 向您的视图模型添加新属性SelectedEpisode，其中包含章节列表
• 单击“剧集详细信息”按钮时：在视图模型中设置SelectedEpisode属性
• 在右栏中：将用于显示章节的UI元素绑定到视图模型中SelectedEpisode属性的子属性

如果两列的视觉效果看起来不太好，或许另一个想法是使用动画来改变两组元素的x坐标并结合Canvas。

以下是带有Button的{​​{1}}和动画的虚拟代码的示例：

EventTrigger