WPF 流体布局和列表框
我正在研究如何对我的 WPF 4.0 应用程序产生影响，其中我有一个列表框，可以通过动画从列表视图（即我自己的项目的垂直堆栈）切换到网格视图（从左到右平铺列表）（不是跳跃来回）。
我一直在研究 Blend 4 中的流体布局，并进行了一些尝试，但运气不佳。
有谁知道我如何创建一个视觉状态，将列表框的布局更改为网格（还将项目模板更改为较小的缩略图版本）并带有漂亮的动画？
我知道这听起来很多，但这在我的应用程序中会产生很大的效果！
非常感谢您提供的任何帮助，如果我找到任何东西，我也会回复:)
马克
Im looking into how to make an effect on my WPF 4.0 application where I have a listbox that can switch from list view (i.e. a vertical stack of my own items) to a grid view (tiled list from left to right) via an animation (not a jump to and from).
I have been looking into Fluid Layout in Blend 4, and messing around with it, but not having much luck.
Does anyone have any ideas as to how I might create a visual state, which changes the layout of the listbox to a grid (also changing the items template to be smaller thumbnails versions) with a nice animation?
I know it sounds like a lot, but it would be a great effect in my app!
Thanks a lot for any help you can give, Ill post back if I find anything as well :)
Mark
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我上传了一个简单的版本，您可以在这里下载：
链接文本
这显示了带有转换的两个自定义状态。以下是我所做操作的概述：
创建两个 ListBox 控件并将它们绑定到同一数据源。您可以为每个模板创建所需的任何数据模板，我的示例只是一个图像列表。
为了使其成为网格视图效果，我使用自定义模板覆盖了 GridList 的 ItemsPanel。我所做的只是用 UniformGrid 替换 StackPanel。
转到“状态”面板并创建一个新的自定义状态组。在其中创建两个自定义状态：
A. VerticalState - 此状态将网格面板的宽度设置为 0，将垂直列表的宽度设置为 175。
B. GridState - 此状态相反，并将“网格”面板的宽度设置为 300，将“列表”设置为 0。
要提供动画效果，请设置默认的过渡时间。我使用了 2 秒，这样您就可以真正看到它的发生。
为了触发状态，我只使用了 ToggleButton 和 GoToState 行为。当选中该按钮时，我将转到 GridState，当取消选中该按钮时，我将转到 VerticalState。
一旦我在状态之间进行了转换，我将 GridPanel 的默认宽度设置为 0（完成此操作后，我必须在 GridState 中重置它的宽度）
这是一个简单的示例，所以一如既往，YMMV。您需要调整大小和其他属性才能获得最终效果。当然，您可以为过渡添加缓动。
不幸的是，查看完整的解决方案并不能真正向您展示如何在 Blend 中执行此操作。查看几周后推出的Blend-O-Rama，我会尝试的显示类似的东西。现在，这希望能让你走得更远。
I've uploaded a simple version, which you can download here:
link text
This shows the two custom states with a transition. Here is an outline of what I did:
Create the two ListBox controls and bind them to the same data source. You can create whatever Data Templates you need for each one, my sample is just a list of images.
To make this a grid view effect, I overrode the ItemsPanel of the GridList with a custom template. All I did was replace the StackPanel with UniformGrid.
Go to the States panel and create a new custom state group. Inside it, create the two custom states:
A. VerticalState - this state sets the width of the Grid panel to 0 and the width of the Vertical list to 175.
B. GridState - this state reverses that and sets the width of the Grid panel to 300 and the List to 0.
To provide the animation effect, set a default Transition time. I used 2 seconds just so you can really see it happening.
To fire the states, I just used a ToggleButton and the GoToState behavior. When the button is checked, I go to the GridState, and when unchecked I go to the VerticalState.
Once I had the transition between states working, I set the default width of the GridPanel to 0 (I had to reset the width of it in the GridState after I did that)
This is a simple example, so as always, YMMV. You will need to play with the sizes and other properties to get the final effect. And of course, you can add easings to your transitions.
Unfortunately, reviewing a completed Solution doesn't really show you how to do this in Blend. Check out Blend-O-Rama coming up in a couple of weeks, I'll try to show something similar. For now, this will hopefully get you further along.
创建您想要的两种视觉状态，并使用 Width=0 之类的内容来“隐藏”您不想在给定状态下显示的列表框或网格。然后只需向您的状态添加一个过渡，这应该会给它一个相当流畅的动画。您可能还需要尝试其他尺寸和位置选项。在这种情况下，透视是一个很好的可能性。
Create the two visual states you want and use something like Width=0 to "hide" the ListBox or Grid that you don't want to show in the given state. Then just add a Transition to your States, that should give it a fairly fluid animation. You may need to play around with other sizing and location options as well. Perspectives would be a good possibility in this case.