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

Discussion in 'Plugin Development' started by celesta, August 29, 2011.

  1. Albert
    • Team MediaPortal

    Albert MP2 Developer

    Joined:
    February 18, 2008
    Messages:
    1,297
    Likes Received:
    1,125
    Gender:
    Male
    Occupation:
    Dipl.-Inform.
    Location:
    Freiburg im Breisgau, Germany
    Ratings:
    +1,130 / 1
    Home Country:
    Germany Germany
    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.
     
  2. Google AdSense Guest Advertisement



    to hide all adverts.
  3. celesta

    celesta Portal Member

    Joined:
    February 7, 2011
    Messages:
    46
    Likes Received:
    2
    Ratings:
    +2 / 0
    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.
     
  4. Albert
    • Team MediaPortal

    Albert MP2 Developer

    Joined:
    February 18, 2008
    Messages:
    1,297
    Likes Received:
    1,125
    Gender:
    Male
    Occupation:
    Dipl.-Inform.
    Location:
    Freiburg im Breisgau, Germany
    Ratings:
    +1,130 / 1
    Home Country:
    Germany Germany
    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.
     
  5. celesta

    celesta Portal Member

    Joined:
    February 7, 2011
    Messages:
    46
    Likes Received:
    2
    Ratings:
    +2 / 0
    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 ...
     
  6. celesta

    celesta Portal Member

    Joined:
    February 7, 2011
    Messages:
    46
    Likes Received:
    2
    Ratings:
    +2 / 0
    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).
     
  7. Albert
    • Team MediaPortal

    Albert MP2 Developer

    Joined:
    February 18, 2008
    Messages:
    1,297
    Likes Received:
    1,125
    Gender:
    Male
    Occupation:
    Dipl.-Inform.
    Location:
    Freiburg im Breisgau, Germany
    Ratings:
    +1,130 / 1
    Home Country:
    Germany Germany
    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.
     
  8. celesta

    celesta Portal Member

    Joined:
    February 7, 2011
    Messages:
    46
    Likes Received:
    2
    Ratings:
    +2 / 0
    Based on the guitestplugin example (test-listview.xaml), I found that without using style it doesn't work.

    There is my working code:

    Code (Text):
    1.  
    2. <Screen xmlns="www.team-mediaportal.com/2008/mpf/directx" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    3.     <Grid>
    4. [COLOR="DarkOrange"]        <Grid.Resources>
    5.       <Style x:Key="ListViewStyle" BasedOn="{ThemeResource DefaultListViewStyle}">
    6.         <Setter Property="ItemContainerStyle" Value="{ThemeResource DefaultMenuItemContainerStyle}"/>
    7.       </Style>
    8.     </Grid.Resources>[/COLOR]
    9.    
    10.         <!-- Grid for positioning elements -->
    11.         <Grid.RowDefinitions>
    12.             <RowDefinition Height="60" />
    13.             <RowDefinition Height="*" />
    14.             <RowDefinition Height="40" />
    15.         </Grid.RowDefinitions>     
    16.         <Grid.ColumnDefinitions>
    17.             <ColumnDefinition Width="380" />
    18.             <ColumnDefinition Width="*" />
    19.         </Grid.ColumnDefinitions>
    20.  
    21.         <!-- Main List -->
    22.         <ListView Grid.Row="1" Grid.Column="1" Margin="0,20,20,20"[COLOR="DarkOrange"] Style="{ThemeResource ListViewStyle}[/COLOR]" >
    23.             <ListViewItem> <WrapPanel>
    24.                 <Image Margin="0,0,14,0" Source="viewed.png" />
    25.                 <Image VerticalAlignment="Bottom"  Margin="0,0,14,0" Source="divx.png" />
    26.                 <Label Content="Choix 1"/>
    27.             </WrapPanel></ListViewItem>
    28.             <ListViewItem> <WrapPanel>
    29.                 <Image Width="30" Margin="0,0,14,0" Source="inprogress.png" />
    30.                 <Image VerticalAlignment="Bottom"  Margin="0,0,14,0" Source="dvd.png" />
    31.                 <Label Content="Choix 1"/>
    32.             </WrapPanel></ListViewItem>
    33.         </ListView>
    34.    
    35.         <!-- Cover -->
    36.         <Image Grid.Row="1" Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Right" Source="cover.png" />
    37.        
    38.     </Grid>
    39. </Screen>
    40.  
     
  9. celesta

    celesta Portal Member

    Joined:
    February 7, 2011
    Messages:
    46
    Likes Received:
    2
    Ratings:
    +2 / 0
    Do you project to add this style to default Listviewstyle ?

    PHP:
    1.             <Style x:Key="ListViewStyle" BasedOn="{ThemeResource DefaultListViewStyle}">
    2.                 <Setter Property="ItemContainerStyle" Value="{ThemeResource DefaultMenuItemContainerStyle}"/>
    3.             </Style>
    Or it isn't a good idea
     
  10. Albert
    • Team MediaPortal

    Albert MP2 Developer

    Joined:
    February 18, 2008
    Messages:
    1,297
    Likes Received:
    1,125
    Gender:
    Male
    Occupation:
    Dipl.-Inform.
    Location:
    Freiburg im Breisgau, Germany
    Ratings:
    +1,130 / 1
    Home Country:
    Germany Germany
    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.
     
  11. celesta

    celesta Portal Member

    Joined:
    February 7, 2011
    Messages:
    46
    Likes Received:
    2
    Ratings:
    +2 / 0
    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}" >
     
Loading...

Users Viewing Thread (Users: 0, Guests: 0)

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice
  • About The Project

    The vision of the MediaPortal project is to create a free open source media centre application, which supports all advanced media centre functions, and is accessible to all Windows users.

    In reaching this goal we are working every day to make sure our software is one of the best.

             

  • Support MediaPortal!

    The team works very hard to make sure the community is running the best HTPC-software. We give away MediaPortal for free but hosting and software is not for us.

    Care to support our work with a few bucks? We'd really appreciate it!