The Media Center Sandbox

So I've looked at the various Marquee samples in the SDK but I'm still at a loss of getting this to work.

Assume I have a panel which takes up 25% of the screenwidth, in this panel I have a Scroller/Repeater containing, let's say 22 textbuttons. These buttons are the width of the parent (ie. 25%). The text inside these buttons can vary from 3 to 30 characters. Obviously 30 characters does not fit inside the 25% of screen realestate so the text is 'clipped' (in want of a better word) on some of the buttons.

Ok, so I figure this is easy, I'll scroll the text back and forth (sorta like what happens in a dialogbox button if the text is to long), problem solved. Alas, I can't get this to work.

The problem, I think, is one; how to determine if the text is longer than the button and needs to scroll (ie. I only want the text to move if it has to), and two; how to scroll the text inside the button of undefined width (sure, it's 25%, but 25% of what? - 4:3/16:9 etc).

Any of you done this previously?

Hi,

I've played around with this a little in the past - and I think the easiest working solution I ended up with was to have 2 x FormLayouts (one that specified a Left + Top offset,  and another that specified a Right + Top offset) - and then use a current->final Position Animation.  The concept then was to initially assign the Left anchored Layoutinput - and then assign the right hand one (and the animation would smoothly animate it between the two - with no visible animation occuring if it the text wasn't longer.   The downside of this technique was that you couldn't easily change the speed of this scrolling (longer text would scroll faster) - however if you only have the scroll effect shown per selected button - this won't be so much of a problem.

If you want some better control over the speed etc (but having exact width) - you could alternatively use some background GDI+ code - which provides methods like MeasureString() - that can give you the 'rendered' width of a sentance with specified font/size/style.

Niall

Not sure if anyone needs this anymore but I have played around with text that scrolls up and down automatically.  Did it with a timer and calling the scroll function.  Thought I would post it.  I am working on getting it to clip to a certain box.

<UI Name="PropertiesDisplay">

<Properties>

<cor:String Name="Label" cor:String="$Required" />

</Properties>

<Locals>

<!-- The index of the last choice to be made. Allows the correct animation to be played -->

<cor:Int32 Name="LastChoice" cor:Int32="1"/>

<ScrollingHandler Name="ScrollHandler" HandleDirectionalKeys="false" HandleHomeEndKeys="false" HandleMouseWheel="false" HandlePageCommands="false" HandlerStage="Bubbled"/>

<ScrollingData Name="ScrollData" ScrollStep="1"/>

<Timer Name="Timer" AutoRepeat="true" Interval="100" Enabled="true"/>

<BooleanChoice Name="ScrollDown" Value="true" />

</Locals>

<Rules>

<Default Target="[ScrollHandler.ScrollingData]" Value="[ScrollData]" />

<Changed Source="[ScrollData.CanScrollDown]">

<Conditions>

<Equality Source="[ScrollData.CanScrollDown]" Value="false" />

</Conditions>

<Actions>

<Set Target="[ScrollDown.ChosenIndex]" Value="0" />

<DebugTrace Message="Can scroll down changed!" />

</Actions>

</Changed>

<Changed Source="[ScrollData.CanScrollUp]">

<Conditions>

<Equality Source="[ScrollData.CanScrollUp]" Value="false" />

</Conditions>

<Actions>

<Set Target="[ScrollDown.ChosenIndex]" Value="1" />

<DebugTrace Message="Can scroll up changed!" />

</Actions>

</Changed>

<Changed Source="[Label]" InitialEvaluate="true">

<Actions>

<Set Target="[TextOutput.Content]" Value="[Label]" />

</Actions>

</Changed>

<Changed Source="[Timer.Tick]">

<Conditions>

<Equality Source="[ScrollDown.ChosenIndex]" Value="1" />

</Conditions>

<Actions>

<Invoke Target="[ScrollData.ScrollDown]" />

</Actions>

</Changed>

<Changed Source="[Timer.Tick]">

<Conditions>

<Equality Source="[ScrollDown.ChosenIndex]" Value="0" />

</Conditions>

<Actions>

<Invoke Target="[ScrollData.ScrollUp]" />

</Actions>

</Changed>

</Rules>

<Content>

<Clip Name="TextClip" FadeAmount="0" Orientation="Vertical" MaximumSize="0,200" DebugOutline="Yellow">

<Children>

<Scroller Name="DescriptionScroller" Orientation="Vertical" ScrollingData="[ScrollData]" DebugOutline="Purple" MouseInteractive="false">

<Children>

<Text Name="TextOutput" Content="[Label]" Color="White" Font="Segeo,14" WordWrap="true" DebugOutline="Red">

<LayoutInput>

<AnchorLayoutInput ContributesToHeight="true" ContributesToWidth="true"/>

</LayoutInput>

</Text>

</Children>

</Scroller>

</Children>

</Clip>

</Content>

</UI>