HOW TO: Create a simple media list interface (1 Viewer)

[Albert]

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.

 

[celesta]

No, I add Focusable="True" in listview and listviewitem and it didn't work with the keyboard and the mouse.

Before the modification of the default style for listview, with my same code it worked.

 

[Albert]

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:

<Screen
    xmlns="www.team-mediaportal.com/2008/mpf/directx"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <DockPanel LastChildFill="False">
    <ListView Background="Yellow" Width="300" Height="300" DockPanel.Dock="Center"
        HorizontalAlignment="Center" VerticalAlignment="Center">
      <ListViewItem Focusable="True">
        <WrapPanel> 
          <Image Margin="0,0,14,0" Source="viewed.png" />
          <Image VerticalAlignment="Bottom"  Margin="0,0,14,0" Source="divx.png" /> 
          <Label Content="Choix 1"/> 
        </WrapPanel>
      </ListViewItem>
      <ListViewItem Focusable="True">
        <WrapPanel> 
          <Image Width="30" Margin="0,0,14,0" Source="inprogress.png" />
          <Image VerticalAlignment="Bottom"  Margin="0,0,14,0" Source="dvd.png" /> 
          <Label Content="Choix 1"/> 
        </WrapPanel>
      </ListViewItem>
    </ListView>
  </DockPanel>
</Screen>

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.

 

[celesta]

Thx for time spending for me.

I used your code and I cannot use the keyboard and the mouse.
Perharps I have another problem.

I'm searching ...

 

[celesta]

It's very strange, because, if I go to the weather plugin and only modify the weather.xml file (erase all and copy/paste your example above) it doesn't work (keybord and mouse).

 

[Albert]

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.

 

[celesta]

Based on the guitestplugin example (test-listview.xaml), I found that without using style it doesn't work.

There is my working code:

<Screen xmlns="www.team-mediaportal.com/2008/mpf/directx" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
	<Grid>
[COLOR="DarkOrange"]	    <Grid.Resources>
      <Style x:Key="ListViewStyle" BasedOn="{ThemeResource DefaultListViewStyle}">
        <Setter Property="ItemContainerStyle" Value="{ThemeResource DefaultMenuItemContainerStyle}"/>
      </Style>
    </Grid.Resources>[/COLOR]
	
		<!-- Grid for positioning elements -->
		<Grid.RowDefinitions>
			<RowDefinition Height="60" />
			<RowDefinition Height="*" />
			<RowDefinition Height="40" />
		</Grid.RowDefinitions>		
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="380" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>

		<!-- Main List -->
		<ListView Grid.Row="1" Grid.Column="1" Margin="0,20,20,20"[COLOR="DarkOrange"] Style="{ThemeResource ListViewStyle}[/COLOR]" >
			<ListViewItem> <WrapPanel> 
				<Image Margin="0,0,14,0" Source="viewed.png" />
				<Image VerticalAlignment="Bottom"  Margin="0,0,14,0" Source="divx.png" /> 
				<Label Content="Choix 1"/> 
			</WrapPanel></ListViewItem>
			<ListViewItem> <WrapPanel> 
				<Image Width="30" Margin="0,0,14,0" Source="inprogress.png" />
				<Image VerticalAlignment="Bottom"  Margin="0,0,14,0" Source="dvd.png" /> 
				<Label Content="Choix 1"/> 
			</WrapPanel></ListViewItem>
		</ListView>
	
		<!-- Cover -->
		<Image Grid.Row="1" Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Right" Source="cover.png" />
		
	</Grid>
</Screen>

 

[celesta]

Do you project to add this style to default Listviewstyle ?

			<Style x:Key="ListViewStyle" BasedOn="{ThemeResource DefaultListViewStyle}">
				<Setter Property="ItemContainerStyle" Value="{ThemeResource DefaultMenuItemContainerStyle}"/>
			</Style>

Or it isn't a good idea

 

[Albert]

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.

 

[celesta]

Re: AW: HOW TO: Create a simple media list interface

I don't know why it doesn't work for me but if I didn't add what for my Listview I never can navigate into my listview.

<Grid.Resources>
<Style x:Key="ListViewStyle" BasedOn="{ThemeResource DefaultListViewStyle}">
<Setter Property="ItemContainerStyle" Value="{ThemeResource DefaultMenuItemContainerStyle}"/>
</Style>
</Grid.Resources>

...

<ListView Grid.Row="1" Grid.Column="1" Margin="0,20,20,20" Style="{ThemeResource ListViewStyle}" >