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
Apollo One
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="morpheus_xx" data-source="post: 1111165" data-attributes="member: 48495"><p>I will guide you step-by-step:</p><ol> <li data-xf-list-type="ol">What screen we want to change? Looking into existing screens first: <a href="https://github.com/MediaPortal/MediaPortal-2/tree/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/screens" target="_blank">https://github.com/MediaPortal/MediaPortal-2/tree/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/screens</a>. List is short, name "home.xaml" sounds reasonable.</li> <li data-xf-list-type="ol">Opening the file in editor doesnt show much content. Why? We are using few so called master pages that contain elememts that should be visible in all dependent subscreens. Examples are the PlayerControls or breadcrumb nav bar. This master page gets included: <a href="https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/screens/home.xaml#L5" target="_blank">https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/screens/home.xaml#L5</a>.</li> <li data-xf-list-type="ol">The referenced file has a ListView thats creates the navigation buttons (group view headers): <a href="https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/screens/master_homemenu.xaml#L20" target="_blank">https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/screens/master_homemenu.xaml#L20</a>. Although it would be possible to place all style into this control directly, we go for styles. This allows us to modify styles with themes and have no need to change the screen at all. This is the main principle that makes it possible to use all screens from default skin and overriding only styles we like to change. The used style is: {ThemeResource HomeGroupListViewStyle}</li> <li data-xf-list-type="ol">Where to find the style? Inside VisualStudio I using "find in project". If this leads to a result, there is an own style defined. If not, the definition from SkinBase plugin's styles are applied (see wiki about resource lookup chain). The result is: <a href="https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/themes/default/styles/OtherControlsOverrides.xaml#L143" target="_blank">https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/themes/default/styles/OtherControlsOverrides.xaml#L143</a>. <br /> </li> <li data-xf-list-type="ol">The ListView style defines so called ItemTemplate and ItemContainerStyle: <a href="https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/themes/default/styles/OtherControlsOverrides.xaml#L151" target="_blank">https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/themes/default/styles/OtherControlsOverrides.xaml#L151</a></li> <li data-xf-list-type="ol">Both things are defined above: <a href="https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/themes/default/styles/OtherControlsOverrides.xaml#L136" target="_blank">https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/themes/default/styles/OtherControlsOverrides.xaml#L136</a> and <a href="https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/themes/default/styles/OtherControlsOverrides.xaml#L117" target="_blank">https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/themes/default/styles/OtherControlsOverrides.xaml#L117</a>.<ol> <li data-xf-list-type="ol">points of interest: font color for non-focused: <a href="https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/themes/default/styles/OtherControlsOverrides.xaml#L139" target="_blank">https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/themes/default/styles/OtherControlsOverrides.xaml#L139</a></li> <li data-xf-list-type="ol">Focused color is set by a trigger: <a href="https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/themes/default/styles/OtherControlsOverrides.xaml#L126" target="_blank">https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/themes/default/styles/OtherControlsOverrides.xaml#L126</a></li> <li data-xf-list-type="ol">The item (each group name) is actually a Button: <a href="https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/themes/default/styles/OtherControlsOverrides.xaml#L121" target="_blank">https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/themes/default/styles/OtherControlsOverrides.xaml#L121</a></li> </ol></li> <li data-xf-list-type="ol">This button style is different to default ones as I want to make them different, no background but a highlight of selected item: <a href="https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/themes/default/styles/ButtonsOverrides.xaml#L285" target="_blank">https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/themes/default/styles/ButtonsOverrides.xaml#L285</a></li> <li data-xf-list-type="ol">The selection highlight I've done as border with a gradient: <a href="https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/themes/default/styles/ButtonsOverrides.xaml#L301" target="_blank">https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/themes/default/styles/ButtonsOverrides.xaml#L301</a>. I made a small trick to get only top and bottom line by starting/ending the gradient with fully transparent colors. Btw, the gradient could be animated, changing color or growing/shrinking the border.</li> </ol><p>This might be complicated first, but once understood you know where to look into, it's quite straight forward:</p><ul> <li data-xf-list-type="ul">colors in colors.xaml</li> <li data-xf-list-type="ul">buttons in buttons.xaml</li> <li data-xf-list-type="ul">ListViews, ContainerStyles,... in OtherControlOverrides.xaml</li> </ul></blockquote><p></p>
[QUOTE="morpheus_xx, post: 1111165, member: 48495"] I will guide you step-by-step: [LIST=1] [*]What screen we want to change? Looking into existing screens first: [url]https://github.com/MediaPortal/MediaPortal-2/tree/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/screens[/url]. List is short, name "home.xaml" sounds reasonable. [*]Opening the file in editor doesnt show much content. Why? We are using few so called master pages that contain elememts that should be visible in all dependent subscreens. Examples are the PlayerControls or breadcrumb nav bar. This master page gets included: [url]https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/screens/home.xaml#L5[/url]. [*]The referenced file has a ListView thats creates the navigation buttons (group view headers): [url]https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/screens/master_homemenu.xaml#L20[/url]. Although it would be possible to place all style into this control directly, we go for styles. This allows us to modify styles with themes and have no need to change the screen at all. This is the main principle that makes it possible to use all screens from default skin and overriding only styles we like to change. The used style is: {ThemeResource HomeGroupListViewStyle} [*]Where to find the style? Inside VisualStudio I using "find in project". If this leads to a result, there is an own style defined. If not, the definition from SkinBase plugin's styles are applied (see wiki about resource lookup chain). The result is: [url]https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/themes/default/styles/OtherControlsOverrides.xaml#L143[/url]. [*]The ListView style defines so called ItemTemplate and ItemContainerStyle: [url]https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/themes/default/styles/OtherControlsOverrides.xaml#L151[/url] [*]Both things are defined above: [url]https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/themes/default/styles/OtherControlsOverrides.xaml#L136[/url] and [url]https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/themes/default/styles/OtherControlsOverrides.xaml#L117[/url]. [LIST=1] [*]points of interest: font color for non-focused: [url]https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/themes/default/styles/OtherControlsOverrides.xaml#L139[/url] [*]Focused color is set by a trigger: [url]https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/themes/default/styles/OtherControlsOverrides.xaml#L126[/url] [*]The item (each group name) is actually a Button: [url]https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/themes/default/styles/OtherControlsOverrides.xaml#L121[/url] [/LIST] [*]This button style is different to default ones as I want to make them different, no background but a highlight of selected item: [url]https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/themes/default/styles/ButtonsOverrides.xaml#L285[/url] [*]The selection highlight I've done as border with a gradient: [url]https://github.com/MediaPortal/MediaPortal-2/blob/FEAT_ApolloOne/MediaPortal/Incubator/ApolloOne/Skin/ApolloOne/themes/default/styles/ButtonsOverrides.xaml#L301[/url]. I made a small trick to get only top and bottom line by starting/ending the gradient with fully transparent colors. Btw, the gradient could be animated, changing color or growing/shrinking the border. [/LIST] This might be complicated first, but once understood you know where to look into, it's quite straight forward: [LIST] [*]colors in colors.xaml [*]buttons in buttons.xaml [*]ListViews, ContainerStyles,... in OtherControlOverrides.xaml [/LIST] [/QUOTE]
Insert quotes…
Verification
Post reply
Forums
MediaPortal 2
Skins and Design
Apollo One
Contact us
RSS
Top
Bottom
