HOW TO: Create a simple media list interface | Page 2

AW: HOW TO: Create a simple media list interface

Scrolling in MP2 works differently from that in WPF. Scrolling in MP2 via keyboard only works if your control has the keyboard focus, which makes it listen to keyboard events. It could work if you set the attribute Focusable="True" at the ListView. You could also put some focusable controls inside the list, then the focus will automatically move around those controls.



But scrolling via the mouse wheel should work even without the keyboard focus.

 

AW: HOW TO: Create a simple media list interface

Now I got time to test it.

If you use mouse scrolling, it works in any case.
If you want to use keyboard scrolling, you need to set Focusable="True" at the ListViewitems or at the ItemsHost panel (not at the ListView, sorry, that was wrong).

I use this screen for the test:

Code (Text):

1.  
2. <Screen
3.     xmlns="www.team-mediaportal.com/2008/mpf/directx"
4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
5.   <DockPanel LastChildFill="False">
6.     <ListView Background="Yellow" Width="300" Height="300" DockPanel.Dock="Center"
7.         HorizontalAlignment="Center" VerticalAlignment="Center">
8.       <ListViewItem Focusable="True">
9.         <WrapPanel>
10.           <Image Margin="0,0,14,0" Source="viewed.png" />
11.           <Image VerticalAlignment="Bottom"  Margin="0,0,14,0" Source="divx.png" />
12.           <Label Content="Choix 1"/>
13.         </WrapPanel>
14.       </ListViewItem>
15.       <ListViewItem Focusable="True">
16.         <WrapPanel>
17.           <Image Width="30" Margin="0,0,14,0" Source="inprogress.png" />
18.           <Image VerticalAlignment="Bottom"  Margin="0,0,14,0" Source="dvd.png" />
19.           <Label Content="Choix 1"/>
20.         </WrapPanel>
21.       </ListViewItem>
22.     </ListView>
23.   </DockPanel>
24. </Screen>
25.  

Note that the size of the ListViewItems in relation to the ItemsHost panel of the ListView is important: The ListViewItems are contained in the ItemsHost panel, which is a StackPanel in the default ListView style. StackPanels cannot show items which are bigger than their own size in MP2. That's due to our limitation we cannot clip the children to the StackPanel's bounds. If we would show elements inside a StackPanel which are bigger than the panel, the elements would take more space than the StackPanel.

So take care that in every scroll position, at least one complete ListViewItem can be shown by the StackPanel.

Alternatively to show ListViewItems which are bigger than your ListView, you can set CanContentScroll="False" on the ScrollViewer which is used in the ListView style. But to do that, you need to set a custom style.

The reason why the scrolling is so difficult in MP2 is because when you don't use a mouse, the only means to trigger the scrolling is the keyboard arrows. And those keys only can work on a control which has keyboard focus. If the ScrollViewer wouldn't check the keyboard focus and you had more than one ScrollViewer in your screen, all ScrollViewers would scroll at the same time.

 

AW: HOW TO: Create a simple media list interface

Oh, I just saw that my last focus improvement introduced a bug which could make the screen not get the keyboard focus back if you use the mouse. It could occur in rare cases. After my fix the keyboard focus should work right.
But the mouse focus (using the mouse wheel) works well. It should scrol the list if the mouse is above it.
But, off course, you must have elements which are bigger then the available space. In the example above, I use icons which are 128x128 pixels big to make the ListViewItems bigger than the ListView.

 

AW: HOW TO: Create a simple media list interface

I don't understand what you mean. The DefaultListViewStyle HAS an ItemContainerStyle. It's the DefaultItemContainerStyle. Do you think the DefaultMenuItemContainerStyle would be better? Why?
Currently, I don't have an MP2 here, but my last test showed that the scrolling works with the Default style.