3

我正在创建一个显示在餐厅电视屏幕上的食物菜单。菜单项将没有交互，因此当所有项目一次都无法在屏幕上显示时，我需要自动显示项目并旋转它们。

我已经构建了项目的所有组件，甚至管理菜单项是什么以及显示它们的日期。现在，我需要完成电视屏幕项目的显示。

我是 WPF 的新手，所以我试图找出最好的方法来做到这一点：

  1. 菜单项与项目名称以及卡路里、蛋白质、脂肪和胆固醇一起列出。因此，它们需要显示在网格中。
  2. 菜单没有用户交互，所以我需要确保我可以正确地将项目列表分解为“页面”，这些页面在显示几秒钟后会在屏幕上和屏幕外显示动画。我正在考虑这样做的方式是在视图上添加每个项目并评估其下方有多少可用空间。如果空间小于某个高度，则其余菜单项将排队等待在下一个“页面”上显示。最好让每个行项目从左侧快速滑入，并在 1-2 秒内全部出现在屏幕上。
  3. 显示它们的最佳控件是什么？也许是一个 ItemsControl？

你们有任何可以为我指明正确方向的好主意，我们将不胜感激！

更新：这是我所说的一个非常粗略的模型：在此处输入图像描述

4

2 回答 2

0

您可能可以使用 Grid 或 StackPanel 并为元素的边距值设置动画（使用负边距将项目滑入）。您需要确保父元素的 ClipToBounds 设置为 false，以便可以在其边界之外绘制项目。

要测量一个元素的高度，只需在行元素上使用 Measure 方法来计算它垂直需要多少空间。基于此，您可以确定一页可以容纳多少元素。

于 2013-08-08T19:10:44.230 回答
0

构建所有东西的工作量太大，但是以下内容应该可以引导您实现目标：

从 Listview 继承添加创建一个 'PartialListView' ，添加依赖属性 StartIndex 和 ItemHeight。它应该构建一个正确高度的列表视图，显示从 StartIndex 到 StartIndex+ItemHeight 的项目。(scroller 未显示。在 listView 加载后使用 FindDescendant (scrollviewer 类型) 找到 scrollViewer，并设置它的 VerticalOffset)

创建具有两个依赖属性的 UserControl：
1) 绑定到 MenuItems (Item, Calories, ...) 的 ObservableCollection
2) ItemHeight (整数属性)。

然后在每次集合更改时修改 IndexList，这是一个数字 {1,6,11} 的 Observable 集合，它们是每个菜单的第一个索引。

控制代码将如下所示：

            <ListBox ItemsSource="{Binding IndexList, ElementName = mycontrolname}">
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <ScrollViewer x:Name="PageScroller"  ... set to horizontal only, not
                                 showing any bar > 
                        <StackPanel Orientation="Horizontal" />
                        </ScrollViewer> 
                   </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                    <ListBox.ItemTemplate>
                <DataTemplate>
                   <app:PartialListView   StartIndex="{Binding }"  
                                 IndexCount  = "{Binding IndexCount, ElementName = mycontrolname}"
                                 ItemsSource = "{Binding MenuItems , ElementName = mycontrolname}"
                   />
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

切换“屏幕”将通过更改 PageScroller ScrollViewer 的 Horizo​​ntalOffset 来完成。

于 2013-08-08T23:48:44.733 回答