Skinning Noob needs help... (2 Viewers)

[MJGraf]

Hi everybody,

I may be a bad coder, but my XAML/WPF/MPF knowledge is even worse. I'm trying hard, but I need your help. I started with the screen in the HelloWorldExample. I modified it a bit, added some labels, progress bars and a picture, which worked perfectly. Then I wanted to add a listview (code below) - since I didn't find an easier example, I took the one from the GuiTestPlugin. There is no dynamic content, yet, I just wanted to add some static ListViewItems to get a feeling how it looks like, but I cannot get a single item to show up. The ListView is just empty and I had to add a "Background" to see that it is actually there. I'm using the Reflexion Skin, but using the default one doesn't help either...

I'd really be grateful if someone could give me a hint - I may make a very stupid mistake here, but since I really have no clue of XAML, I just don't know where to start...

Thanks,
Michael

<Include
xmlns="www.team-mediaportal.com/2008/mpf/directx"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Source="screens\master_menu.xaml"
>
<Include.Resources>
<!-- Header -->
<ResourceWrapper x:Key="Header_Text" Resource="[MPMBCDRipper.ScreenTitle]"/>
<!-- Contents -->
<ControlTemplate x:Key="Contents_Template">
<DockPanel Context="{Model Id=2F7131D3-D12B-43e2-B5CF-E966D1E5AA50}" LastChildFill="True">

<StackPanel DockPanel.Dock="Left" Orientation="Vertical" HorizontalAlignment="Left" VerticalAlignment="Top">
<Image Margin="10,30,10,10" Width="500" Stretch="Uniform" Source="folder.jpg" />
<Label Content="Track Progress" Color="{ThemeResource TextColor}" Margin="10,20,10,5" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<ProgressBar Margin="10,5,10,10" Name="TrackPBar" Width="500" Height="30" Value="100" />
<Label Content="CD Progress" Color="{ThemeResource TextColor}" Margin="10,10,10,5" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<ProgressBar Margin="10,5,10,10" Name="CDPBar" Width="500" Height="30" Value="30"/>
<Button Content="[MPMBCDRipper.StartRippingButtonText]" Style="{ThemeResource ButtonWideStyle}" Margin="10,20,10,10"
HorizontalAlignment="Left" VerticalAlignment="Center" Width="500" HorizontalContentAlignment="Center"
Command="{Command StartRipping}"/>
</StackPanel>
<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}"/>
<Setter Property="Background" Value="{ThemeResource ItemsControlShadowBackgroundColor}"/>
</Style>
</DockPanel.Resources>
<ListView Margin="30,30,10,10" DockPanel.Dock="Center" Style="{ThemeResource ListViewStyle}">
<ListViewItem>
Simple string inside a ListViewItem - Should be styled with the container style
</ListViewItem>
</ListView>

</DockPanel>
</ControlTemplate>
</Include.Resources>
</Include>

 

[MJGraf]

Oh boy - MPF drives me crazy, but I won't give up

I still don't know, why it doesn't work with static ListView items as in the code above. However, I've managed to bring the ListView to live. What I learned is that I need an ItemsList in the Model. That ItemsList needs to have several ListItems in it. And each ListItem needs to have a label with the name "Name" and the value that should be displayed in the ListView.

Well, and this is the current result:



It's easy to spot that there isn't any logic behind it, yet (no, I'm not a particular fan of Zucchero and no, although I'm a fan of Slowhand, I don't own discs with 20 identical tracks of him ). But I think you can see where this shall end

Michael

 

[chefkoch]

Oh boy - MPF drives me crazy, but I won't give up

I still don't know, why it doesn't work with static ListView items as in the code above. However, I've managed to bring the ListView to live. What I learned is that I need an ItemsList in the Model. That ItemsList needs to have several ListItems in it. And each ListItem needs to have a label with the name "Name" and the value that should be displayed in the ListView.

Well, and this is the current result:

View attachment 105603

It's easy to spot that there isn't any logic behind it, yet (no, I'm not a particular fan of Zucchero and no, although I'm a fan of Slowhand, I don't own discs with 20 identical tracks of him ). But I think you can see where this shall end

Michael

Thanks for sharing your results. Please keep posting any progress you made and the problems you had and how you fixed them. That might help also others when to get used to MP2 architecture.

 

[MJGraf]

tommy: Yep, that was excatly my intention. 5 Days ago I didn't know anything about XAML - except for the name - but after only some days it is really amazing, what an absolute skinning newby like me can do with this thing... Let's go on and please, if anyone from the experts reads this and finds something wrong, please correct me - this is just a collection of what I think could be the case after a lot of try and error...

I didn't like the progress bars. In particular the color of it. So I stepped a little bit deeper into Themes. I found out that there is a DefaultProgressBarStyle. I copied it into my xaml file, gave it the name "TrackProgressBarStyle", removed the Rectangle in the background and changed the color of the actual progress bar to a transparent green. Furthermore, I rounded the edges a bit (RadiusX and RadiusY) so that it fits better the button style. Since it seems that you can't just add a style without telling the engline where that style should live, I learned that every item in a xaml-skin has a Resources-Property and this is the place where you can add styles. Again it seems that you should add the styles to the resources of the parent item to make sure that all child-items can use it. Here all the controls are within a DockPanel, so I added the style for the ProgressBar to DockPanel.Resources. The whole thing looks as follows:

<DockPanel.Resources>
<Style x:Key="TrackProgressBarStyle" TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid x:Name="ProgressBarGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Rectangle x:Name="ProgressBarIndicator" Width="{TemplateBinding PartIndicatorWidth}"
RadiusX="4" RadiusY="4" HorizontalAlignment="Left" Fill="#4001DF01"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DockPanel.Resources>

Now we can easily add a half transparent ProgressBar like this:

<ProgressBar HorizontalAlignment="Left" VerticalAlignment="Center"
Style="{StaticResource TrackProgressBarStyle}" Value="50"/>

The I asked myself: Why not use the ListViewItems themselves as ProgressBars? And here the real beauty of this skinning engine was visible to me.
The ListView also has a Style. I used the "ContentsMenuListViewStyle". I decided to create a new Style called "TrackListViewStyle". This thing looks as follows:

<Style x:Key="TrackListViewStyle" BasedOn="{ThemeResource ContentsMenuListViewStyle}">
<Setter Property="ItemTemplate" Value="{StaticResource TrackItemDataTemplate}"/>
</Style>

It is based on ContentsMenuListViewStyle and the only change to that one is that I changed the "ItemTemplate" to "TranckItemdDataTemplate". Why did I do this? well, the ItemTemplate defines how the content of each ListViewItem is displayed. Of course I had to define this Template and for me it looks like:

<DataTemplate x:Key="TrackItemDataTemplate">
<Grid x:Name="ItemControl">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ProgressBar HorizontalAlignment="Left" VerticalAlignment="Center"
Style="{StaticResource TrackProgressBarStyle}"
Width="{Binding ElementName=ItemControl, Path=ActualWidth}" Height="{Binding ElementName=ItemControl, Path=ActualHeight}"
Value="{Binding [Progress]}"/>
<Label x:Name="ItemLabel" Content="{Binding [Name]}"
HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="{ThemeResource SmallFontSize}" Color="{ThemeResource TextColor}"/>
</Grid>
</DataTemplate>

As you can see, this template contains the Label, which shows each ListViewItem's name. But then it also contains one of "my" ProgressBars. The result is amazing - now we have a ListView that shows a ProgressBar for each ListViewItem:


So when this thing finally works and you're ripping a CD, you can see the progress of the ripping directly in the ListView with all the tracks

What's next:
First I want to make the CD cover a button. The reason is simple, If you click it, you should be presented with a lot of covers that were found for your CD in the internet and you may chose another one.
Next thing is that I want to make use of the menu area on the left. Therefore I understand that my model has to implement IWorkflowModel. Again, at first glance this seems a little bit complicated, but I think I can already see the power behind it...


/Michael

 

[chefkoch]

The listviewitems as progress bars look amazing Good work!

 

[MJGraf]

Thanks

Well, the cover-button-thing was easy:

                    <Button Style="{ThemeResource DefaultButtonStyle}" Margin="10,20,10,10" Height="500" Width="500">
                      <Image Margin="10" Stretch="Uniform" Source="folder.jpg" />
                    </Button>

And now we have this:


Let's see whether I can cope with IWorkFlowModel

 

[superted125]

Thanks for posting all this info. I'm about to embark on the same task : making my first skin! I'm planning on starting with basic elements to get my head around XAML etc! If you have any other tips youve learnt , please share!

 

[MJGraf]

Hi superted125,

that's my intention. We currently have a brilliant code base, but the documentation in particular for people like me, who are only "hobby-programmers" is not as good as it could be. This is mainly due to the fact that there are not really many people working on MP2 (yet), but they are doing a really great job on programming, which doesn't let them too much time to write docs. What I'm trying to do is to read as much code as possible (which by the way is documented very good) and thereby get an overview what is possible and how. Unfortunately my time is also very limited at the moment due to real live, so if you want to share something you learned about MP2 skinning or programming, please feel free to post it here. What we need is MP2 knowledge shared for others to make it easier to jump over to MP2. Ideally, this knowledge should be in the wiki - but to be honest, my knowledge is by far not as "structured", yet, so that I would feel comfortable with writing wiki guides. I'll report back here as soon as I have some hours to dive into the code again

Michael

 

[chefkoch]

Ideally, this knowledge should be in the wiki - but to be honest, my knowledge is by far not as "structured", yet, so that I would feel comfortable with writing wiki guides. I'll report back here as soon as I have some hours to dive into the code again

Maybe a complete-guide is not needed. Even a single task and how you solve it might be worth for a wiki page.
This way it is easier for others to write a similar one and if there are several single-task-guides, somebody else might pick them up to make a complete one out of it.