Skinning contest: One month to go (2 Viewers)

[Albert]

Hi guys and gals,
about one month ago, I announced our skinning contest. In the meantime, I got many requests about how to find documentation and there were some good ideas in the Wiki. Now, that the contest only runs one more month, it would be nice if people could present a short intermediate state.
Are there results already? Problems? Comments?

Cheers,
Daniel

 

[Albert]

AW: Skinning contest: One month to go

Ok, noone?
Then I guess we need more donations to do everything by ourselves.

 

[pilehave]

Albert...in the original skinning contest thread, I expressed my worries about just dropping a half-baked product into the skinning bowl, and adding a reference to a lot of pretty technical Wiki-pages and a "go look it up at Microsoft" link.

First; I appreciate all the work you and everyone else has done on MP2. MP1 was pretty simple to skin. Just copy Blue 3 Wide skin-folder and edit PNG's and XML. Basic stuff...

I have spend 3-4 whole nights on trying to figure out how to change something as simple as a label in MP2. How do you expect us (well, me at least) to understand this (example):

<?xml version="1.0" encoding="utf-8"?>
<Include
    xmlns="www.team-mediaportal.com/2008/mpf/directx"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Source="screens\master.xaml"
    >
  <Include.Resources>

    <!-- Header -->
    <ResourceWrapper x:Key="Header_Text" Resource="[SharesConfig.RemoveShares]"/>

    <!-- Shares configuration model -->
    <Model x:Key="Model" Id="1768FC91-86B9-4f78-8A4C-E204F0D51502"/>

    <!-- Contents -->
    <ResourceWrapper x:Key="Client_Element">
      <Grid DataContext="{Binding Source={StaticResource Model}}"
          HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10">
        <Grid.RowDefinitions>
          <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Label Grid.Row="0" Grid.Column="0" IsVisible="{Binding !AnyShareAvailable}"
            HorizontalAlignment="Center" VerticalAlignment="Center"
            Content="[SharesConfig.NoSharesAvailable]"/>
        <Grid Grid.Row="0" Grid.Column="0" IsVisible="{Binding AnyShareAvailable}"
            HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
          </Grid.RowDefinitions>
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
          </Grid.ColumnDefinitions>
          <Label Grid.Row="0" Content="[SharesConfig.ChooseSharesToBeRemoved]" Wrap="True"/>
          <UniformGrid Grid.Row="1" Columns="1">
            <Grid x:Name="GlobalSharesPanel" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                IsVisible="{Binding IsHomeServerConnected}">
              <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
              </Grid.RowDefinitions>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
              </Grid.ColumnDefinitions>
              <Label Margin="10" Grid.Row="0" Grid.Column="0" Content="[SharesConfig.GlobalShares]"/>
              <ListView Margin="10" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                  Style="{ThemeResource MultiMarkableSharesListViewStyle}"
                  ItemsSource="{Binding Path=ServerSharesList,Mode=OneTime}"/>
            </Grid>
            <Grid x:Name="LocalSharesPanel" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                IsVisible="{Binding ShowLocalShares}">
              <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
              </Grid.RowDefinitions>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
              </Grid.ColumnDefinitions>
              <Label Margin="10" Grid.Row="0" Grid.Column="0" Content="[SharesConfig.LocalShares]"/>
              <ListView Margin="10" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                  Style="{ThemeResource MultiMarkableSharesListViewStyle}"
                  ItemsSource="{Binding Path=LocalSharesList,Mode=OneTime}"/>
            </Grid>
          </UniformGrid>
          <Grid Grid.Row="2" Margin="10,10,10,0">
            <Grid.RowDefinitions>
              <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*"/>
              <ColumnDefinition Width="10"/>
              <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="RemoveButton" Grid.Column="2" Style="{ThemeResource WizardButtonStyle}"
                Content="[System.Finish]" IsEnabled="{Binding IsSharesSelected}"
                Command="{Command Source={StaticResource Model},Path=RemoveSelectedSharesAndFinish}"/>
          </Grid>
        </Grid>
      </Grid>
    </ResourceWrapper>

  </Include.Resources>
</Include>

 

[Albert]

AW: Skinning contest: One month to go

Please ask, if there are questions!

And yes, the structure with those "Include" elements is not described in the Wiki yet. It is one of those TODOs there. I know, we need much more documentation to make skinning for MP2 really easy. In the current state, you have to be patient and understand some concepts

Start taking your first steps using a screen like this:

<?xml version="1.0" encoding="utf-8"?>
<Grid
    xmlns="www.team-mediaportal.com/2008/mpf/directx"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    >
  <Grid.RowDefinitions>
    <RowDefinition Height="*"/>
    <RowDefinition Height="*"/>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>
  <Label Grid.Row="0" Grid.Column="1"
      HorizontalAlignment="Center" VerticalAlignment="Center"
      Content="First row"/>
  <Button Grid.Row="1" Grid.Column="1" Style="{ThemeResource ButtonWideStyle}"
      HorizontalAlignment="Center" VerticalAlignment="Center"
      Content="Second row"/>
  <CheckBox Grid.Row="2" Grid.Column="1" Style="{ThemeResource CheckBoxStyle}"
      HorizontalAlignment="Center" VerticalAlignment="Center"
      Content="Third row"/>
</Grid>

Are you able to compile MediaPortal 2? If not, tell me, then I'll give you a runnable copy.
If yes, add the HelloWorld plugin from the Resources folder to the solution and run it. You'll see an additional "Hello world" menu entry which brings you to a simple screen.

You can use the file from above as replacement for the screen in the HelloWorld plugin.

While just trying out several things, you can just exchange the screen file (folder Plugins\HelloWorld\Skin\default\screens) while running MP2. the file will load every time again when you switch into the screen. So you can just press ESC to leave the screen and then use the "Hello world" menu button again.

When you read the MSDN docs about WPF, you should already got a good understanding of how XAML and MPF work.
Perhaps you can share your first tries here.

Have fun!

 

[bodiroga]

Re: AW: Skinning contest: One month to go

Hi Albert!

Can I make you some simple questions?

If yes, add the HelloWorld plugin from the Resources folder to the solution and run it. You'll see an additional "Hello world" menu entry which brings you to a simple screen.

Ok, I understand that I have to move the folder MediaPortal\Resources\Examples\HelloWorldExamplePlugin, but where exactly? To MediaPortal\Source and then again compile the program? Or just move the folder HelloWorldExamplePlugin to MediaPortal\Bin\MP2-Client\bin\x86\Release\Plugins after compiling the program?

I have done the last option (I can see now the folder HelloWorld in MediaPortal\Bin\MP2-Client\bin\x86\Release\Plugins) but nothing changes when I open MP2-Client.exe file. I can't see any new option in "basichome". Note: I have watched the log file and I can see the following error:

2010-10-27 01:24:54.690003 [Error][Main Thread]: Error parsing plugin descriptor file 'C:\Users\Aitor\Mediaportal 2\MediaPortal\Bin\MP2-Client\bin\x86\Release\Plugins\HelloWorld\plugin.xml'
Exception: System.ArgumentException: Plugin 'HelloWorld': Assembly DLL file 'C:\Users\Aitor\Mediaportal 2\MediaPortal\Bin\MP2-Client\bin\x86\Release\Plugins\HelloWorld\HelloWorld.dll' does not exist
   en MediaPortal.Core.Services.PluginManager.PluginDirectoryDescriptor.ParseRuntimeElement(XPathNavigator runtimeNavigator, String pluginDirectory) en c:\Users\Aitor\Mediaportal 2\MediaPortal\Source\System\MediaPortal.Core\Services\PluginManager\PluginDirectoryDescriptor.cs:línea 204
   en MediaPortal.Core.Services.PluginManager.PluginDirectoryDescriptor.Load(String pluginDirectoryPath) en c:\Users\Aitor\Mediaportal 2\MediaPortal\Source\System\MediaPortal.Core\Services\PluginManager\PluginDirectoryDescriptor.cs:línea 152
  Message: Plugin 'HelloWorld': Assembly DLL file 'C:\Users\Aitor\Mediaportal 2\MediaPortal\Bin\MP2-Client\bin\x86\Release\Plugins\HelloWorld\HelloWorld.dll' does not exist
  Site   : Void ParseRuntimeElement(System.Xml.XPath.XPathNavigator, System.String)
  Source : MediaPortal.Core
Stack Trace:
   en MediaPortal.Core.Services.PluginManager.PluginDirectoryDescriptor.ParseRuntimeElement(XPathNavigator runtimeNavigator, String pluginDirectory) en c:\Users\Aitor\Mediaportal 2\MediaPortal\Source\System\MediaPortal.Core\Services\PluginManager\PluginDirectoryDescriptor.cs:línea 204
   en MediaPortal.Core.Services.PluginManager.PluginDirectoryDescriptor.Load(String pluginDirectoryPath) en c:\Users\Aitor\Mediaportal 2\MediaPortal\Source\System\MediaPortal.Core\Services\PluginManager\PluginDirectoryDescriptor.cs:línea 152
2010-10-27 01:24:54.718005 [Error][Main Thread]: Error loading plugin in directory 'C:\Users\Aitor\Mediaportal 2\MediaPortal\Bin\MP2-Client\bin\x86\Release\Plugins\HelloWorld'
Exception: System.ArgumentException: Directory 'C:\Users\Aitor\Mediaportal 2\MediaPortal\Bin\MP2-Client\bin\x86\Release\Plugins\HelloWorld' doesn't contain a valid plugin descriptor file
   en MediaPortal.Core.Services.PluginManager.PluginDirectoryDescriptor..ctor(String pluginDirectoryPath) en c:\Users\Aitor\Mediaportal 2\MediaPortal\Source\System\MediaPortal.Core\Services\PluginManager\PluginDirectoryDescriptor.cs:línea 74
   en MediaPortal.Core.Services.PluginManager.PluginManager.LoadPluginsData() en c:\Users\Aitor\Mediaportal 2\MediaPortal\Source\System\MediaPortal.Core\Services\PluginManager\PluginManager.cs:línea 1061
  Message: Directory 'C:\Users\Aitor\Mediaportal 2\MediaPortal\Bin\MP2-Client\bin\x86\Release\Plugins\HelloWorld' doesn't contain a valid plugin descriptor file
  Site   : Void .ctor(System.String)
  Source : MediaPortal.Core
Stack Trace:
   en MediaPortal.Core.Services.PluginManager.PluginDirectoryDescriptor..ctor(String pluginDirectoryPath) en c:\Users\Aitor\Mediaportal 2\MediaPortal\Source\System\MediaPortal.Core\Services\PluginManager\PluginDirectoryDescriptor.cs:línea 74
   en MediaPortal.Core.Services.PluginManager.PluginManager.LoadPluginsData() en c:\

Where can I find that HelloWorld.dll file?

And an even stupidest a question... how can I close MP2-Client.exe from inside Mediaportal??? I can't see any Exit button or something like that, now I'm closing the program using alt+f4. Is there any other option to do this?

Many thanks for your work with MP2 and keep up with the good job, I'm sure that MP2 would be awesome!

Best regards,

Aitor

 

[Albert]

AW: Re: AW: Skinning contest: One month to go

If yes, add the HelloWorld plugin from the Resources folder to the solution and run it. You'll see an additional "Hello world" menu entry which brings you to a simple screen.

Ok, I understand that I have to move the folder MediaPortal\Resources\Examples\HelloWorldExamplePlugin, but where exactly? To MediaPortal\Source and then again compile the program? Or just move the folder HelloWorldExamplePlugin to MediaPortal\Bin\MP2-Client\bin\x86\Release\Plugins after compiling the program?

No, that was not what I meant. The right way is to add the project to the solution in VisualStudio. That's why I asked if he is able to use VisualStudio.
In VS, you right-click in the solution explorer on the root node (MP2-Client), choose "Add project" and navigate to the hello world plugin directory (in the Resources/Examples folder). Inside the plugin's folder, there is the project file (HelloWorld.csproj). Choose that file.
After doing that, the plugin was added to the solution.
Now, you can compile and run it.

Cheers,
Albert

 

[bodiroga]

Re: AW: Re: AW: Skinning contest: One month to go

If yes, add the HelloWorld plugin from the Resources folder to the solution and run it. You'll see an additional "Hello world" menu entry which brings you to a simple screen.

Ok, I understand that I have to move the folder MediaPortal\Resources\Examples\HelloWorldExamplePlugin, but where exactly? To MediaPortal\Source and then again compile the program? Or just move the folder HelloWorldExamplePlugin to MediaPortal\Bin\MP2-Client\bin\x86\Release\Plugins after compiling the program?

No, that was not what I meant. The right way is to add the project to the solution in VisualStudio. That's why I asked if he is able to use VisualStudio.
In VS, you right-click in the solution explorer on the root node (MP2-Client), choose "Add project" and navigate to the hello world plugin directory (in the Resources/Examples folder). Inside the plugin's folder, there is the project file (HelloWorld.csproj). Choose that file.
After doing that, the plugin was added to the solution.
Now, you can compile and run it.

Cheers,
Albert

Ok, sorry for the mistake then. I will try to compile the program again adding the plugin and see what happens

Any answer to the "How to Exit" question Albert?

Thanks for your hard work and best regards,

Aitor

 

[Albert]

AW: Skinning contest: One month to go

Hehe, yes, you're right: There isn't any exit option yet. We're currently always working with MP2 in windowed mode and use the close button, but we also need a means to close it from inside the GUI, yes.

 

[bodiroga]

Hi Albert!

Many thanks for answering to my questions

I'm trying to open the MP2-Client solution but I'm having problems with it I'm opening it with Visual Studio C# 2008 Express, but I get the following error:

"The solution folders aren't compatible with the this version of the application.

The solution folder "Media" will be shown as not available."

After pressing OK, the same error appears for "System", "UI", "Main", "MetadataExtractors", "MediaProviders", "UiComponents" and "Players" solution folders.

Is this normal? Should I use Vistual Studio C# 2010 Express?

Thanks and best regards,

Aitor

 

[mackey]

Hi Albert

14-15 months ago I made a small plugin which consisted of a couple of screens and a single model class which simulated the MP1 MyLyrics plugin. In the work, I got some experience with the architecture of MP2 and its conceptional use of workflow, the screen engine, skins, themes and screens etc. However there I realized that the skinengine needed a whole lot of work to use the brushes and content panels among others as intended, and it was not possible for me to make anything fancy, that I would believe could attract skilled designers to contribute to MP2.

When the skin contest was announced, I once again gained interest in MP2, and I decided to try to make a new skin. I made a copy of the existing and began my work on the skin. My first project was to create a button style in the Button.xaml file that should be assigned to all basics button on the screens. It should be quite easy. I started out and could easily get the most common setters to work. However, as I tried to make a bit fancier buttons nothing seemed to work out as intended. When working with grids and rectangle controls (an inner and outer to get a control with depth) in the template nothing turned out quite right. I'm sure that the xaml is correct as everythings turns out great in a regular WPF project. Off course, there are some differencies between WPF and MPF, but as I am informed they are more related to resources and events than the basic contruct and design of controls, and I belive that these wasn't the problem. I spend hours trying to arrange the rectangles, but no matter what, I could not seem to see more than a single rectangle dispite the changes I made. I could not make sense of whether I had made some bad xaml code or the skinengine wasn't mature to display the rather simple controls that I tried to make.

Also, when my latest change to a style hold an syntax or context error, then the complete skin was deselected, and I had to fix the issues, before I could even select the skin from the Settings screens within the client. And from the thrown exceptions I could hardly ever directly see what the problem with the change was. If only I somehow could realize what the issues where and why the seemingly proper MPF controls aren't shown as I expect, then I could report the problems in the skin engine or even fix them my self. But I'm rather clueless about the causes which make me decide that either MP2 skinning aren't ready for me or I'm not ready for MP2 skinning.

Is there a MPF expert among us that I can contatct to look into the xaml that teases me? And also consult for some tips when skinning MP2?

thanks