Germany
- Thread starter
- #41
My Music
Or how to skin the first façade control. OK, to be honest, I was overwhelmed by the number of possible tags for the façade & its subcontrols. I just could not understand what it meant. So I started real slow, I created an empty page for mymusicsongs.xml (the file/folder view of mymusic) and set it to the default layout I created (header, footer, some background based on fanart/standard). Then I imported a non existing file named mymusic.common.facade.xml (yes, I delegated a problem ;-)
But still no contents. So I had a look at DefaultWide. It has a file called common.facade.music.xml (I changed the order as I want all music related stuff to be close together in a directory). From that I thought I could start with the simplest view, the listview. And yes, DefaultWide only contained the following info on the list view:
Yes, that gave me a list control, but it looked ugly. So I had to dive into the references.xml and define my default list control. With a lot of tweaking I came to the following default:
That was a start. Now I wanted a hidden menu. It should look a bit like the win 8 "charms bar", but be text based. I like to have headers in there and I wanted to have a very smooth transition moving the menu items separately with a little delay (to see this you need to test later on). After quite some fiddling with the ActionGroup (this could use some more documentation. More? It could use documentation). I found a solution. Still, my StackLayout did not move the items after invisible items up (even though I told it to do so, existing bug), but well, you can not have everything. Still sometimes the transition away from the menu halts in the middle (I have a half transparent menu) and only continues if I move the focus again (another bug?).
After that I wanted some nice thumbpanel and while I was at it, lets add spinning CD and ClearArt support. Again I felt something missing (I had this before): I would like to have an animation trigger that triggers on change of focus (any focus change) or change of selection in the façade. I would like the spinning CD to come out of the cover if I keep an item selected for a second or so. Right now I am not even capable of animating if the CD is there or not (control.hasthumb does not work, control.hastext does not work what to do?). At least it rotates. So here is my current result:
The empty hover pane is a placeholder for now playing. Another idea I have, that is not possible at the moment - Enlarge the façade / listview if nothing is playing and reduce it if something plays (and we need to show the Now Playing overlay). Not possible with the current skin engine.
Or how to skin the first façade control. OK, to be honest, I was overwhelmed by the number of possible tags for the façade & its subcontrols. I just could not understand what it meant. So I started real slow, I created an empty page for mymusicsongs.xml (the file/folder view of mymusic) and set it to the default layout I created (header, footer, some background based on fanart/standard). Then I imported a non existing file named mymusic.common.facade.xml (yes, I delegated a problem ;-)
But still no contents. So I had a look at DefaultWide. It has a file called common.facade.music.xml (I changed the order as I want all music related stuff to be close together in a directory). From that I thought I could start with the simplest view, the listview. And yes, DefaultWide only contained the following info on the list view:
Code:
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<window>
<controls>
<control>
<description>group element</description>
<type>group</type>
<visible>!Control.HasFocus(50)</visible>
<animation effect="fade" start="0" end="100" time="200">WindowOpen</animation>
<animation effect="fade" start="100" end="0" time="200">WindowClose</animation>
<control>
<description>composite control consisting of a list control and a thumbnail panel</description>
<type>facadeview</type>
<id>50</id>
<control style="NoShadow">
<description>listcontrol</description>
<type>listcontrol</type>
<id>50</id>
</control>
</control>
</controls>
</window>Yes, that gave me a list control, but it looked ugly. So I had to dive into the references.xml and define my default list control. With a lot of tweaking I came to the following default:
Code:
<control>
<description>default listcontrol</description>
<type>listcontrol</type>
<id>0</id>
<posX>0</posX>
<posY>130</posY>
<width>1240</width>
<height>672</height>
<textureFocus>hiddenMenu_overlay.png</textureFocus>
<textureNoFocus></textureNoFocus>
<textureHeight>52</textureHeight>
<IconXOff>10</IconXOff>
<IconYOff>8</IconYOff>
<itemWidth>40</itemWidth>
<itemHeight>40</itemHeight>
<font>largeFont</font>
<font2>largeFont</font2>
<font3>labelFont</font3>
<textcolor>FFB75700</textcolor>
<textcolor2>FF297BFD</textcolor2>
<textcolor3>FFB75700</textcolor3>
<textcolorNoFocus>FFFFFFFF</textcolorNoFocus>
<textcolorNoFocus2>FFFFFFFF</textcolorNoFocus2>
<textcolorNoFocus3>FFFFFFFF</textcolorNoFocus3>
<selectedColor>AAAAAAAA</selectedColor>
<selectedColor2>AAAAAAAA</selectedColor2>
<selectedColor3>AAAAAAAA</selectedColor3>
<textXOff>15</textXOff>
<textYOff>2</textYOff>
<textXOff2>1210</textXOff2>
<textYOff2>2</textYOff2>
<textXOff3>1240</textXOff3>
<textYOff3>2</textYOff3>
<textalign>left</textalign>
<textalign2>right</textalign2>
<textalign3>right</textalign3>
<textvisible1>True</textvisible1>
<textvisible2>True</textvisible2>
<textvisible3>False</textvisible3>
<shadedColor>AAffffff</shadedColor>
<remoteColor>FFFC7B19</remoteColor>
<downloadColor>fffc7b19</downloadColor>
<playedColor>FF00B7FF</playedColor>
<colordiffuse>ffffffff</colordiffuse>
<spaceBetweenItems>2</spaceBetweenItems>
<unfocusedAlpha applyToAll="true">255</unfocusedAlpha>
<scrollOffset>1</scrollOffset>
<scrollStartDelaySec>2</scrollStartDelaySec>
<loopDelay>5</loopDelay>
<suffix>|</suffix>
<folderPrefix />
<folderSuffix />
<spinCanFocus>False</spinCanFocus>
<spinUp>spin_up.png</spinUp>
<spinUpFocus>spin_up_focus.png</spinUpFocus>
<spinDown>spin_down.png</spinDown>
<spinDownFocus>spin_down_focus.png</spinDownFocus>
<spinWidth>40</spinWidth>
<spinHeight>40</spinHeight>
<spinPosX>1050</spinPosX>
<spinPosY>740</spinPosY>
<spinAlign>right</spinAlign>
<spinColor>00000000</spinColor>
<explicitlyEnableScrollLabel>yes</explicitlyEnableScrollLabel>
<dimColor>FFFFFFFF</dimColor>
<onleft>2</onleft>
</control>That was a start. Now I wanted a hidden menu. It should look a bit like the win 8 "charms bar", but be text based. I like to have headers in there and I wanted to have a very smooth transition moving the menu items separately with a little delay (to see this you need to test later on). After quite some fiddling with the ActionGroup (this could use some more documentation. More? It could use documentation). I found a solution. Still, my StackLayout did not move the items after invisible items up (even though I told it to do so, existing bug), but well, you can not have everything. Still sometimes the transition away from the menu halts in the middle (I have a half transparent menu) and only continues if I move the focus again (another bug?).
After that I wanted some nice thumbpanel and while I was at it, lets add spinning CD and ClearArt support. Again I felt something missing (I had this before): I would like to have an animation trigger that triggers on change of focus (any focus change) or change of selection in the façade. I would like the spinning CD to come out of the cover if I keep an item selected for a second or so. Right now I am not even capable of animating if the CD is there or not (control.hasthumb does not work, control.hastext does not work what to do?). At least it rotates. So here is my current result:
The empty hover pane is a placeholder for now playing. Another idea I have, that is not possible at the moment - Enlarge the façade / listview if nothing is playing and reduce it if something plays (and we need to show the Now Playing overlay). Not possible with the current skin engine.
