How to make the focus-rectangle slide from one item to the next in a list

When you move the input-focus from one item to the next in a Media Center list, the focus-rectangle slides along in a really neat way. In this post I will try to explain how you can reproduce this behaviour in your own application.

The key to solving this issue is using the ‘Focus’-anchor in a Form- or AnchorLayout.

First of all, create a Panel that contains both a Scroller, containing the list, and a container for the focus-image. Place the focus-image code above the Scroller code, making the focus-image appear on top of the scroller-content.
Then apply the appropriate Layout and LayoutInputs as shown in de code below. Note the bold line, this is the code that essentially makes the focus-image move along with the input-focus. The animation takes care of the slide-effect.

<Panel Name=”GalleryContainer” Layout=”Form”>
<Children>
<Panel Name=”ButtonFocusContainer”>
<Layout>
<AnchorLayout SizeToHorizontalChildren=”true” SizeToVerticalChildren=”true”/>
</Layout>
<LayoutInput>
<FormLayoutInput Left=”Focus,0″ Top=”Focus,0″/>
</LayoutInput>
<Children>
<Graphic Content=”image://styles:ButtonFocus”/>
</Children>
<Animations>
<Animation Type=”Move”>
<Keyframes>
<PositionKeyframe Time=”0″ RelativeTo=”Current” Interpolation=”Exp”/>
<PositionKeyframe Time=”0.2″ RelativeTo=”Final”/>
</Keyframes>
</Animation>
</Animations>
</Panel>
<Scroller Name=”GalleryScroller” >
<LayoutInput>
<FormLayoutInput Top=”Parent,0″ Left=”Parent,0″/>
</LayoutInput>
<Children>
<Repeater Name=”GalleryRepeater”>
</Children>
</Scroller>
</Children>
</Panel>