尝试在WPF应用程序中将网格线设置为屏幕上的动画，并检测一次可以在屏幕上显示的数量

Question

I am creating a food menu that displays on a TV screen in a restaurant. There will be no interaction of the menu itmes, so I need to automatically display the items and rotate through them when all the items do not fit on the screen at one time.

I have all of the components of the project built, even the administration of what the menu items are and which day to display them. Now, I need to finish the display of the items for the TV screen(s).

I am new to WPF, so I'm trying to figure out the best way to do this:

1. Menu items are listed with the name of the item along with calories, protein, fat, and cholesterol. Because of this, they need to be displayed in a grid.
2. There is no user interaction with the menu, so I need to make sure that I can properly break up the list of items into "pages" that animate on and off the screen after displaying for several seconds. The way I was thinking of doing this was to add each item on the view and evaluate how much space is available beneath it. If the space is less than a certain height, the rest of the menu items are queued for display on the next "page". It would be nice to have each line item rapidly slide in from the left, having all of them appear on the screen within 1-2 seconds.
3. What is the best control to display them with? An ItemsControl, perhaps?

Any great ideas you guys have that can point me in the right direction will be greatly appreciated!

Update: Here's a very rough mockup of what I'm talking about:

Answer 1

You can probably get away with using a Grid or StackPanel and animate the margin value of your elements (use negative margins to slide items in). You need to ensure that the parent element has ClipToBounds set to false so that items can be drawn outside of its bounds.

To measure an element's height, just use the Measure method on the row element to figure out how much space it needs vertically. Based on that, you can determine how many elements you can fit in one page.

Answer 2

There's too much work to build everything, however the following should lead you to your goal :

Inherit from Listview add create a 'PartialListView' , with added dependencies properties StartIndex and ItemHeight. It should build a listview of the right height showing items from StartIndex to StartIndex+ItemHeight. (scroller not shown. Use FindDescendant (of type scrollviewer) to find the scrollViewer after listView is loaded, and set its VerticalOffset)

Create a UserControl with two dependency properties :
1) bind to an ObservableCollection of MenuItems (Item, Calories, ...)
2) an ItemHeight (integer property).

Then on each collection change you modify IndexList, an Observable collection of numbers {1, 6, 11 }, which are the first indexes of each menu.

The control code will look like :

            <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>

switching 'screen' will be done by changing the HorizontalOffset of the PageScroller ScrollViewer.