Apollo One (2 Viewers)

[morpheus_xx]

Here are the tiles again without shadows.

Sorry if I wasn't precise enough, but I only need raw images also without black bar overlay. The bar is added as styleable rectangle by xaml (think about possible color themes that could override the color)

 

[wizard123]

Omg you mean you want me to export them again lol

 

[wizard123]

Here's the tiles again

 

[morpheus_xx]

Thanks for your patience
But: There are still rounded cornerns. I wrote "raw", and meant it exactly this way. No rounded corners, nothing...
If I make the weather tile non square (remember: layout, position and size are user configurable!), the rounded corners are gone for Stretch=Fill. If want to have rounded corners later, we will use a vector based rectangle with radius for corners: those rectangles keep their edges/radius matching for all aspect ratios.

This remembers me that there is probably an issue with controls as opacity mask.

 

[wizard123]

But if you make the tiles re-sizable you will lose the aspect ratio of the image anyway and will look very odd.
I won't create a preview for what the tiles should look like next time i will just pass you the image it's easier lol.

 

[morpheus_xx]

I know about the limitations about image resizing modes and aspect ratio (see http://msdn.microsoft.com/en-us/library/system.windows.media.stretch(v=vs.110).aspx)
I think the best input for me would be one arranged screen as you would do it and the raw images.

 

[wizard123]

If i want to make changes to how the main menu across the top looks where do i find the relevant code ? It all feels so messy and confusing with all the theme styles etc, am i more confused because you are reusing titanium base files and changing the code when required ?

 

[morpheus_xx]

I will link to the relevant parts later when I am at conference.

ApolloOne does not depend on Titanium, I started from empty skin. This was required to get rid of some copy & paste I done before ;-)

If you check out the ApolloOne branch, you will only find very few styles included: only the ones that are different than the "default" base skin. But MP2 is completely usable though.

 

[morpheus_xx]

I will guide you step-by-step:

1. What screen we want to change? Looking into existing screens first: https://github.com/MediaPortal/Medi...al/Incubator/ApolloOne/Skin/ApolloOne/screens. List is short, name "home.xaml" sounds reasonable.
2. 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: https://github.com/MediaPortal/Medi...ApolloOne/Skin/ApolloOne/screens/home.xaml#L5.
3. The referenced file has a ListView thats creates the navigation buttons (group view headers): https://github.com/MediaPortal/Medi...in/ApolloOne/screens/master_homemenu.xaml#L20. 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}
4. 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: https://github.com/MediaPortal/Medi...fault/styles/OtherControlsOverrides.xaml#L143.
   
5. The ListView style defines so called ItemTemplate and ItemContainerStyle: https://github.com/MediaPortal/Medi...fault/styles/OtherControlsOverrides.xaml#L151
6. Both things are defined above: https://github.com/MediaPortal/Medi...fault/styles/OtherControlsOverrides.xaml#L136 and https://github.com/MediaPortal/Medi...fault/styles/OtherControlsOverrides.xaml#L117.
   1. points of interest: font color for non-focused: https://github.com/MediaPortal/Medi...fault/styles/OtherControlsOverrides.xaml#L139
   2. Focused color is set by a trigger: https://github.com/MediaPortal/Medi...fault/styles/OtherControlsOverrides.xaml#L126
   3. The item (each group name) is actually a Button: https://github.com/MediaPortal/Medi...fault/styles/OtherControlsOverrides.xaml#L121
7. This button style is different to default ones as I want to make them different, no background but a highlight of selected item: https://github.com/MediaPortal/Medi...mes/default/styles/ButtonsOverrides.xaml#L285
8. The selection highlight I've done as border with a gradient: https://github.com/MediaPortal/Medi...mes/default/styles/ButtonsOverrides.xaml#L301. 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.

This might be complicated first, but once understood you know where to look into, it's quite straight forward:

• colors in colors.xaml
• buttons in buttons.xaml
• ListViews, ContainerStyles,... in OtherControlOverrides.xaml

 

[morpheus_xx]

Was the description how to find the involved parts understandable?

@wizard123 can you please attach the raw images. I will include them as they are and will also test how they look like in different sizes.