home
products
contribute
download
documentation
forum
Home
Forums
New posts
Search forums
What's new
New posts
All posts
Latest activity
Members
Registered members
Current visitors
Donate
Log in
Register
What's new
Search
Search
Search titles only
By:
New posts
Search forums
Search titles only
By:
Menu
Log in
Register
Navigation
Install the app
Install
More options
Contact us
Close Menu
Forums
MediaPortal 2
Skins and Design
Skinning Noob needs help...
Contact us
RSS
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Reply to thread
Message
<blockquote data-quote="MJGraf" data-source="post: 875133" data-attributes="member: 17886"><p><a href="https://forum.team-mediaportal.com/members/tommy.27565/" target="_blank">tommy</a>: 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...</p><p> </p><p>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:</p><p>[CODE]<DockPanel.Resources></p><p><Style x:Key="TrackProgressBarStyle" TargetType="{x:Type ProgressBar}"></p><p><Setter Property="Template"></p><p><Setter.Value></p><p><ControlTemplate TargetType="{x:Type ProgressBar}"></p><p><Grid x:Name="ProgressBarGrid"></p><p><Grid.ColumnDefinitions></p><p><ColumnDefinition Width="*"/></p><p></Grid.ColumnDefinitions></p><p><Grid.RowDefinitions></p><p><RowDefinition Height="*"/></p><p></Grid.RowDefinitions></p><p><Rectangle x:Name="ProgressBarIndicator" Width="{TemplateBinding PartIndicatorWidth}"</p><p>RadiusX="4" RadiusY="4" HorizontalAlignment="Left" Fill="#4001DF01"/></p><p></Grid></p><p></ControlTemplate></p><p></Setter.Value></p><p></Setter></p><p></Style></p><p></DockPanel.Resources>[/CODE]</p><p> </p><p>Now we can easily add a half transparent ProgressBar like this:</p><p>[CODE]<ProgressBar HorizontalAlignment="Left" VerticalAlignment="Center"</p><p>Style="{StaticResource TrackProgressBarStyle}" Value="50"/>[/CODE]</p><p> </p><p>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.</p><p>The ListView also has a Style. I used the "ContentsMenuListViewStyle". I decided to create a new Style called "TrackListViewStyle". This thing looks as follows:</p><p>[CODE]<Style x:Key="TrackListViewStyle" BasedOn="{ThemeResource ContentsMenuListViewStyle}"></p><p><Setter Property="ItemTemplate" Value="{StaticResource TrackItemDataTemplate}"/></p><p></Style>[/CODE]</p><p> </p><p>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:</p><p>[CODE]<DataTemplate x:Key="TrackItemDataTemplate"></p><p><Grid x:Name="ItemControl"></p><p><Grid.ColumnDefinitions></p><p><ColumnDefinition Width="*"/></p><p></Grid.ColumnDefinitions></p><p><Grid.RowDefinitions></p><p><RowDefinition Height="*"/></p><p></Grid.RowDefinitions></p><p><ProgressBar HorizontalAlignment="Left" VerticalAlignment="Center"</p><p>Style="{StaticResource TrackProgressBarStyle}"</p><p>Width="{Binding ElementName=ItemControl, Path=ActualWidth}" Height="{Binding ElementName=ItemControl, Path=ActualHeight}"</p><p>Value="{Binding [Progress]}"/></p><p><Label x:Name="ItemLabel" Content="{Binding [Name]}"</p><p>HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="{ThemeResource SmallFontSize}" Color="{ThemeResource TextColor}"/></p><p></Grid></p><p></DataTemplate>[/CODE]</p><p> </p><p>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:</p><p>[ATTACH]105706[/ATTACH]</p><p> </p><p>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 <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite8" alt=":D" title="Big Grin :D" loading="lazy" data-shortname=":D" /></p><p> </p><p>What's next:</p><p>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.</p><p>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...</p><p> </p><p> </p><p><span style="font-size: 10px"><span style="font-family: 'Consolas'"><span style="color: #2b91af"><span style="font-size: 10px"><span style="font-family: 'Consolas'"><span style="color: #2b91af"><span style="font-size: 10px"><span style="font-family: 'Consolas'"><span style="color: #2b91af"><span style="font-size: 10px"><span style="font-family: 'Consolas'"><span style="color: #2b91af"><span style="font-family: 'Segoe UI'"><span style="color: #000000">/Michael</span></span></span></span></span></span></span></span></span></span></span></span></span></span></p></blockquote><p></p>
[QUOTE="MJGraf, post: 875133, member: 17886"] [URL='https://forum.team-mediaportal.com/members/tommy.27565/']tommy[/URL]: 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: [CODE]<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>[/CODE] Now we can easily add a half transparent ProgressBar like this: [CODE]<ProgressBar HorizontalAlignment="Left" VerticalAlignment="Center" Style="{StaticResource TrackProgressBarStyle}" Value="50"/>[/CODE] 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: [CODE]<Style x:Key="TrackListViewStyle" BasedOn="{ThemeResource ContentsMenuListViewStyle}"> <Setter Property="ItemTemplate" Value="{StaticResource TrackItemDataTemplate}"/> </Style>[/CODE] 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: [CODE]<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>[/CODE] 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: [ATTACH]105706[/ATTACH] 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 :D 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... [SIZE=2][FONT=Consolas][COLOR=#2b91af][SIZE=2][FONT=Consolas][COLOR=#2b91af][SIZE=2][FONT=Consolas][COLOR=#2b91af][SIZE=2][FONT=Consolas][COLOR=#2b91af][FONT=Segoe UI][COLOR=#000000]/Michael[/COLOR][/FONT][/COLOR][/FONT][/SIZE][/COLOR][/FONT][/SIZE][/COLOR][/FONT][/SIZE][/COLOR][/FONT][/SIZE] [/QUOTE]
Insert quotes…
Verification
Post reply
Forums
MediaPortal 2
Skins and Design
Skinning Noob needs help...
Contact us
RSS
Top
Bottom