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
    45
    Freiburg im Breisgau, Germany
    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.
     

    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
    45
    Freiburg im Breisgau, Germany
    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...
     

    Smeulf

    Retired Team Member
  • Premium Supporter
  • October 27, 2010
    672
    454
    France
    Home Country
    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
    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

    Top Bottom