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

celesta

Portal Member
February 7, 2011
46
2
1. Create a screen tag (this is always that):
Code:
[COLOR="SeaGreen"]<Screen xmlns="www.team-mediaportal.com/2008/mpf/directx" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
</Screen>[/COLOR]
2. The screen can only create one component, for example i use a DockPanel:
Code:
[COLOR="SeaGreen"]<Screen xmlns="www.team-mediaportal.com/2008/mpf/directx" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
	[COLOR="SandyBrown"]<DockPanel>
	</DockPanel>[/COLOR]
</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:
[COLOR="SeaGreen"]<Screen xmlns="www.team-mediaportal.com/2008/mpf/directx" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
	<DockPanel>
		[COLOR="SandyBrown"]<ListView Style="{ThemeResource ListViewStyle}">
			<ListViewItem> <Label Content="Choice 1"/> </ListViewItem>
			<ListViewItem> <Label Content="Choice 2"/> </ListViewItem>
			<ListViewItem> <Label Content="Choice 3"/> </ListViewItem>
		</ListView>[/COLOR]
	</DockPanel>
</Screen>[/COLOR]

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


4. Add Ressources

Code:
[COLOR="SeaGreen"]<Screen xmlns="www.team-mediaportal.com/2008/mpf/directx" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
	<DockPanel>
	
		[COLOR="SandyBrown"]<DockPanel.Resources>
			<DataTemplate x:Key="ItemDataTemplate">
				<Label x:Name="ItemDataLabel" Content="{Binding}" FontSize="{ThemeResource SmallFontSize}" Color="Blue"/>
			</DataTemplate>
			<Style x:Key="ListViewStyle" BasedOn="{ThemeResource DefaultListViewStyle}">
				<Setter Property="ItemTemplate" Value="{ThemeResource ItemDataTemplate}"/>
				<Setter Property="ItemContainerStyle" Value="{ThemeResource DefaultMenuItemContainerStyle}"/>
			</Style>
		</DockPanel.Resources>[/COLOR]
		
		<ListView Style="{ThemeResource ListViewStyle}">
			<ListViewItem> <Label Content="Choice 1"/> </ListViewItem>
			<ListViewItem> <Label Content="Choice 2"/> </ListViewItem>
			<ListViewItem> <Label Content="Choice 3"/> </ListViewItem>
		</ListView>
	</DockPanel>
</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 ?
 

Albert

MP2 Developer
  • Premium Supporter
  • February 18, 2008
    1,297
    1,130
    41
    Freiburg im Breisgau, Germany
    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.
     

    celesta

    Portal Member
    February 7, 2011
    46
    2
    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.
     

    Albert

    MP2 Developer
  • Premium Supporter
  • February 18, 2008
    1,297
    1,130
    41
    Freiburg im Breisgau, Germany
    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...
     

    celesta

    Portal Member
    February 7, 2011
    46
    2
    I don't have a software for Git, I download the zip file.

    I redownload today but it doesn't work
     

    Smeulf

    Retired Team Member
  • Premium Supporter
  • October 27, 2010
    672
    454
    France
    France France
    I don't have a software for Git, I download the zip file.

    I redownload today but it doesn't work
    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.
     

    celesta

    Portal Member
    February 7, 2011
    46
    2
    On github, I click "sources"
    then I have "Development of MediaPortal 2 " Downloads
     

    celesta

    Portal Member
    February 7, 2011
    46
    2
    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:
    <ListView Grid.Row="1" Grid.Column="1" Margin="0,20,20,20" >
    			<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>
     

    Users Who Are Viewing This Thread (Users: 0, Guests: 1)

    OP Similar threads Forum Replies Date
    C Problem playing videos created on IPhone X and Samsung S9 General Support 2
    G [fixed] No recorded video thumbnails created while recording. 2.2 Archive 2
    M [solved] MP2 v 2.2.1 Issue - Registry Key not created General 5
    uxDesign Can't play Blu Ray: VideoPlayer9: Exception while creating DShow graph 1.20 2
    R Exception while creating DShow graph Watch / Listen Media 12
    M Epg selection plugin? Feature Requests 2
    RoChess Weird GPU crash -- possible cause: resizing media MediaPortal 1 Talk 8
    J Navigating media drive General 4
    J Will Media Portal meet my requirements? General Support 4
    C Imported media doesn't show up immediately? General 1
    J Show media item location Feature Requests 4
    HTPCSourcer Media Accessor is flooding logs with files from attached monitor MediaPortal 2 9
    N [fixed] [MP2-822] Folder View is not displaying individual media share elements Submit: Bug Reports 4
    A MP2.2.2, understanding movies/videos/tv and WTV recordings. General 16
    T I cannot get a basic media import-what is the best configuration? General 10
    Rob Hexenmeister [solved] Latest Media Handler - skinning buttons Fanart Handler 19
    J MediaPortal TV Server and Kodi media source issues General 9
    D media portal 2.2 have movies shown on genre not name General 6
    M How to Watch my videos from my Media Portal to My TV without TV Tuner Newcomers Forum 1
    D Media Portal wake schedule General Support 29
    R Media portal resumes with wrong screen resolution General Support 3
    Rob Hexenmeister Latest Media Handler - facade properties - itemcount General Support 3
    P WMC on Windows 7 migrating to Media Portal on Windows 10 Newcomers Forum 5
    Rob Hexenmeister [solved] Latest media handler - time reported as date Fanart Handler 18
    Rob Hexenmeister Video Buttons / Latest Media MediaPortal 1 Skins 7
    Similar threads

























    Top Bottom