Draft: Adding scroll indicators to Titanium home screen (1 Viewer)

[morpheus_xx]

Not "out of the box": the WrapPanel only shows items that fit completely on screen. While the style could be changed to use opacity gradients, the focus handling wouldn't match, you would be able to focus the faded buttons as well.
Also the look of the screen would be not so clean as it is now.

 

[morpheus_xx]

I've no problem designing something at all but i don't want to step on @joostzilla toes so how much input does he have into the mp2 version of his skin ?

I think it is ok for him, he didn't directly work on MP2 port. I mainly reused images and (some) ideas of Titan skin.

Hi @wizard123,

can you please help to design the scrollbar style for Titanium? It will not only be used in home but everywhere in scrollviewers. I came back to this thread because more new users fell into this usability gap...

Would be great!

 

[wizard123]

Did you have an idea of how you want it to look ?

 

[morpheus_xx]

Did you have an idea of how you want it to look ?

This is the default scrollviewer style: it shows a scrollbar on right. (Left margin is missing here)
Maybe keep this default and don't use vertical indicators?
View attachment 150310

Hmm...
I can only take this screenshot as example: I think the scrollbar should fit to different backgrounds (so it probably could be semi-transparent). If it uses colors, they would be defined in theme styles (I will take care of this part ).

To the style itself I have no real ideas: rounded or flat top/bottom endings? knob style?

 

[wizard123]

what about a more minimal look like this ? i used the first screenshot i could find.

 

[morpheus_xx]

Ok, I like and take it
Can you create xaml styles for this look?

Edit: the knob size in screenshot doesn't represent the real pos/count relation. MP2 uses a correct calculation (like in explorer), so "knob" would fill i.e. 90% of height

 

[wizard123]

I will have to do the xaml tomorrow as our vs2013 appears to have ran out ?

 

[wizard123]

Here is the xaml for the posted scrollbar

<Path x:Name="Shape_6" Data="F1M3,1C4.105,1 5,1.895 5,3 5,3 5,588 5,588 5,589.105 4.105,590 3,590 1.895,590 1,589.105 1,588 1,588 1,3 1,3 1,1.895 1.895,1 3,1z" Fill="#FF0189BF" Height="591" Canvas.Left="1869" Opacity="0.722" Canvas.Top="333" Width="6"/>
<Path x:Name="Shape_3" Data="F1M7.5,1C11.09,1 14,3.91 14,7.5 14,7.5 14,48.5 14,48.5 14,52.09 11.09,55 7.5,55 3.91,55 1,52.09 1,48.5 1,48.5 1,7.5 1,7.5 1,3.91 3.91,1 7.5,1z" Fill="#FFF6F6F6" Height="56" Canvas.Left="1864" Canvas.Top="480" Width="15"/>

The pill shape just needs to keep its current form except being longer without appearing stretched when it fills the calculation, does that make sense morpheus_xx ?

 

[morpheus_xx]

Here is an example result:

The left side uses a Path, right a Rectangle (with RadiusX/Y). The Paths will scale "completly", so radius is messed up.
The rectangle keeps its radius, thats why I prefer them always over paths and they are even easier to write, see code below. They also allow bindung Width/Height properties to ScrollViewer control.

I will try to adapt the default scrollviewer style to this template. Thank you!

 

[wizard123]

You got it, no problem