HOW TO: Create a simple media list interface

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

  1. celesta

    celesta Portal Member

    Joined:
    February 7, 2011
    Messages:
    46
    Likes Received:
    2
    Ratings:
    +2 / 0
    1. Create a screen tag (this is always that):
    Code (Text):
    1. [COLOR="SeaGreen"]<Screen xmlns="www.team-mediaportal.com/2008/mpf/directx" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    2. </Screen>[/COLOR]
    2. The screen can only create one component, for example i use a DockPanel:
    Code (Text):
    1. [COLOR="SeaGreen"]<Screen xmlns="www.team-mediaportal.com/2008/mpf/directx" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    2.     [COLOR="SandyBrown"]<DockPanel>
    3.     </DockPanel>[/COLOR]
    4. </Screen>[/COLOR]
    3. Inside it use a ListViewItem:
    Style="{ThemeResource ListViewStyle}" must be used in ListView ? to use the display of the current theme ?

    Code (Text):
    1. [COLOR="SeaGreen"]<Screen xmlns="www.team-mediaportal.com/2008/mpf/directx" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    2.     <DockPanel>
    3.         [COLOR="SandyBrown"]<ListView Style="{ThemeResource ListViewStyle}">
    4.             <ListViewItem> <Label Content="Choice 1"/> </ListViewItem>
    5.             <ListViewItem> <Label Content="Choice 2"/> </ListViewItem>
    6.             <ListViewItem> <Label Content="Choice 3"/> </ListViewItem>
    7.         </ListView>[/COLOR]
    8.     </DockPanel>
    9. </Screen>[/COLOR]

    Now nothing work ... I think this is because you must "inherit" from skin stuff


    4. Add Ressources

    Code (Text):
    1. [COLOR="SeaGreen"]<Screen xmlns="www.team-mediaportal.com/2008/mpf/directx" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    2.     <DockPanel>
    3.    
    4.         [COLOR="SandyBrown"]<DockPanel.Resources>
    5.             <DataTemplate x:Key="ItemDataTemplate">
    6.                 <Label x:Name="ItemDataLabel" Content="{Binding}" FontSize="{ThemeResource SmallFontSize}" Color="Blue"/>
    7.             </DataTemplate>
    8.             <Style x:Key="ListViewStyle" BasedOn="{ThemeResource DefaultListViewStyle}">
    9.                 <Setter Property="ItemTemplate" Value="{ThemeResource ItemDataTemplate}"/>
    10.                 <Setter Property="ItemContainerStyle" Value="{ThemeResource DefaultMenuItemContainerStyle}"/>
    11.             </Style>
    12.         </DockPanel.Resources>[/COLOR]
    13.        
    14.         <ListView Style="{ThemeResource ListViewStyle}">
    15.             <ListViewItem> <Label Content="Choice 1"/> </ListViewItem>
    16.             <ListViewItem> <Label Content="Choice 2"/> </ListViewItem>
    17.             <ListViewItem> <Label Content="Choice 3"/> </ListViewItem>
    18.         </ListView>
    19.     </DockPanel>
    20. </Screen>[/COLOR]

    Wow! I can press up and down of the keyboard or use the mouse and if I create a lot of items, there is a scroolbar!
    I don't understand very well the Ressources process.
    Someone have any doc for this and why the ListView isn't display without style ?


     
  2. Google AdSense Guest Advertisement



    to hide all adverts.
  3. 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

    First, you're right, for ListView controls, there is currently no default style defined, that's why you have to set the Style attribute. I think I'll add a default style to the default skin for ListView to make ListView have a default view without explicit setting a Style.

    When you use {ThemeResource XXX}, XXX must be defined. In your example 3 from above, ListViewStyle is no defined resource in the default theme so your screen doesn't load (you should see an error when the screen is being loaded). Look into folder Source\UI\UiComponents\SkinBase\Skin\default\themes\default\styles, there you find the files defining the (default-) theme. Look into file OtherControls.xaml, search for the word "DefaultListViewStyle". That is the basic style for ListViews, but as the comment says, the properties ItemTemplate and ItemContainerStyle are not defined by that style yet. That's why more styles are defined: MainMenuListViewStyle, MenuListViewStyle, ContentsMenuListViewStyle, ...
    You can find out which theme elements are defined when you look into the files in that directory.
    Button styles are in Buttons.xaml, color definitions in Colors.xaml, constant values like font sizes etc. in Consts.xaml, graphic definitions like the play arrow are in Graphics.xaml and there are some more files for special styles.

    Typically, in screens styles should be used which are defined in a theme. Only in exceptional cases, an inline style should be defined like in your example 4.
    If there are not enough styles in the default skin, you can implement a theme extension by just creating a folder default\themes\default\styles in your skin folder, add a file with a name which doesn't exist yet and add your needed style. Take care with the file name because all plugins share the same namespace, so your filename should somehow contain your plugin name to make it unique.
     
    • Like Like x 1
  4. celesta

    celesta Portal Member

    Joined:
    February 7, 2011
    Messages:
    46
    Likes Received:
    2
    Ratings:
    +2 / 0
    Thanks a lot for time used to explain us how it work. Now I understand all better.
    For beginner, this is difficult because, the examples and source exist but I search what do what and the wiki MP2 plugin is not now the same as the wiki MP1 plugin.
    But there is a lot of work to do and you can't now fill the wiki. This is because I share my found to the forum and you correct it :)

    I think default style for all control will be easy for skin and plugin.

    Now I understand better a lot of thing and I see the power of MP2 concept.
     
  5. 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 just changed some names of styles.
    I also implemented the engine to assign default styles to all elements.
    Now it is possible to define an element without setting the Style attribute.

    I hope I didn't break anything...
     
  6. celesta

    celesta Portal Member

    Joined:
    February 7, 2011
    Messages:
    46
    Likes Received:
    2
    Ratings:
    +2 / 0
    I have remove style of my listview, but it didn't show (no error in log)
     
  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

    Did you do a "git pull"? :)
     
  8. celesta

    celesta Portal Member

    Joined:
    February 7, 2011
    Messages:
    46
    Likes Received:
    2
    Ratings:
    +2 / 0
    I don't have a software for Git, I download the zip file.

    I redownload today but it doesn't work
     
  9. Smeulf
    • Team MediaPortal

    Smeulf Test Group

    Joined:
    October 27, 2010
    Messages:
    672
    Likes Received:
    227
    Location:
    France
    Ratings:
    +228 / 0
    Home Country:
    France France
    Show System Specs
    Hi,

    May I ask where you downloaded a zip file ?

    And you really should get some git tools in order to keep your sources up to date :

    msysgit - Git for Windows - Google Project Hosting (prerequisite for TurtoiseGit)
    and tortoisegit - Porting TortoiseSVN to TortoiseGIT - Google Project Hosting (use a featured version, it's more stable believe me ;) )

    And please visit Git - MediaPortal Wiki to get the repository on your computer.

    Cheers.

    Smeulf.
     
  10. celesta

    celesta Portal Member

    Joined:
    February 7, 2011
    Messages:
    46
    Likes Received:
    2
    Ratings:
    +2 / 0
    On github, I click "sources"
    then I have "Development of MediaPortal 2 " Downloads
     
    • Like Like x 1
  11. celesta

    celesta Portal Member

    Joined:
    February 7, 2011
    Messages:
    46
    Likes Received:
    2
    Ratings:
    +2 / 0
    I have tried today with the new source code.
    The list view appear properly, but a cannot navigate (press keyboard down does anything).

    I just create this:
    Code (Text):
    1. <ListView Grid.Row="1" Grid.Column="1" Margin="0,20,20,20" >
    2.             <ListViewItem> <WrapPanel>
    3.                 <Image Margin="0,0,14,0" Source="viewed.png" />
    4.                 <Image VerticalAlignment="Bottom"  Margin="0,0,14,0" Source="divx.png" />
    5.                 <Label Content="Choix 1"/>
    6.             </WrapPanel></ListViewItem>
    7.             <ListViewItem> <WrapPanel>
    8.                 <Image Width="30" Margin="0,0,14,0" Source="inprogress.png" />
    9.                 <Image VerticalAlignment="Bottom"  Margin="0,0,14,0" Source="dvd.png" />
    10.                 <Label Content="Choix 1"/>
    11.             </WrapPanel></ListViewItem>
    12.         </ListView>
     
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!