Background color of a selected item in the RadDataBoundListBox

[alessandro]

Hi, I'm using the RadSlideHubTile control which presents items in a RadDataBoundListBox. I have noticed that if I do not set the Background property of the RadSlideHubTile, it uses the color of the currently selected theme on the Phone, and this is what I actually need.

Now, I would like to see a different background color when the user selects an item, still using the currently selected theme on the phone, which is exactly what you get when you use the built-in ListBox control.

I know I can style the control, but this requires providing fixed values whereas I want users to see the same colors they have based on the phone theme.

Any suggestions about this?
Thanks in advance

[Victor]

Hi Alessandro,

Thanks for writing.
I am afraid I am not sure what is causing you trouble. Restyling does not involve setting fixed colors. The colors and brushes change when the phone theme changes. You can access these theme resources with the {StaticResouce} markup extension. {StaticResource PhoneBackgroundBrush} returns a brush that depends on the currently selected theme. Can you please explain exactly what colors you need for your hub tiles when they are selected and when they are not? In the most extreme case you can use a template selector and use a custom template for the selected tiles.

I am looking forward to your reply.

Regards,
Victor
Telerik

[alessandro]

Hi Victor, thanks for your reply. I will try to explain differently what I need. Consider this first screenshot in the attached files.
You will see a standard ListBox containing two items, one is selected and is highlighted in red as per the phone current theme.

In the second screenshot attached, you can see a RadDataBoundListBox with two RadHubTiles. The same item is selected but the user cannot see the selection, so I would need to highlight the selected item in a different color.

How can I do this? thanks!

[Victor]

Hello Alessandro,

You can do this with the ItemContainerStyle property. Basically, you have to copy the default list box item style and modify it to suit your application. Here is a slightly modified style that you can directly use:

                <Style TargetType="telerikPrimitives:RadDataBoundListBoxItem">

                    <Setter Property="Background" Value="Transparent"/>

                    <Setter Property="BorderThickness" Value="0" />

                    <Setter Property="BorderBrush" Value="Transparent" />

                    <Setter Property="Padding" Value="0" />

                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>

                    <Setter Property="VerticalContentAlignment" Value="Stretch"/>

                    <Setter Property="CacheMode" Value="BitmapCache"/>

                    <Setter Property="Template">

                        <Setter.Value>

                            <ControlTemplate TargetType="telerikPrimitives:RadDataBoundListBoxItem">

                                <Border x:Name="LayoutRoot"

                            Background="{TemplateBinding Background}"

                            HorizontalAlignment="{TemplateBinding HorizontalAlignment}"

                            VerticalAlignment="{TemplateBinding VerticalAlignment}"

                            BorderBrush="{TemplateBinding BorderBrush}"

                            BorderThickness="{TemplateBinding BorderThickness}"

                            RenderTransformOrigin="0.5, 0.5">

                                    <Border.RenderTransform>

                                        <ScaleTransform x:Name="RootScale"/>

                                    </Border.RenderTransform>

                                    <VisualStateManager.VisualStateGroups>

                                        <VisualStateGroup x:Name="CommonStates">

                                            <VisualState x:Name="Normal"/>

                                            <VisualState x:Name="MouseOver" />

                                            <VisualState x:Name="Disabled">

                                                <Storyboard>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Background">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <DoubleAnimation Storyboard.TargetName="PART_ContainerHolder" Storyboard.TargetProperty="Opacity" Duration="0" To=".5" />

                                                </Storyboard>

                                            </VisualState>

                                        </VisualStateGroup>

                                        <VisualStateGroup x:Name="SelectionStates">

                                            <VisualState x:Name="Unselected"/>

                                            <VisualState x:Name="Selected">

                                                <Storyboard>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContainerHolder" Storyboard.TargetProperty="Foreground">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>

                                                    </ObjectAnimationUsingKeyFrames>

 

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContainerLayout" Storyboard.TargetProperty="Background">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Blue"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                </Storyboard>

                                            </VisualState>

                                        </VisualStateGroup>

                                        <VisualStateGroup x:Name="CheckBoxStates">

                                            <VisualState x:Name="CheckBoxNotVisibleVertical">

                                                <Storyboard>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CheckBoxLayout" Storyboard.TargetProperty="Visibility">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CheckBoxLayout" Storyboard.TargetProperty="Margin">

                                                        <DiscreteObjectKeyFrame KeyTime="0">

                                                            <DiscreteObjectKeyFrame.Value>

                                                                <Thickness>0, 0, 0, 0</Thickness>

                                                            </DiscreteObjectKeyFrame.Value>

                                                        </DiscreteObjectKeyFrame>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContainerLayout" Storyboard.TargetProperty="Margin">

                                                        <DiscreteObjectKeyFrame KeyTime="0">

                                                            <DiscreteObjectKeyFrame.Value>

                                                                <Thickness>0, 0, 0, 0</Thickness>

                                                            </DiscreteObjectKeyFrame.Value>

                                                        </DiscreteObjectKeyFrame>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CheckBoxLayout" Storyboard.TargetProperty="(Grid.Row)">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CheckBoxLayout" Storyboard.TargetProperty="(Grid.Column)">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContainerLayout" Storyboard.TargetProperty="(Grid.Row)">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContainerLayout" Storyboard.TargetProperty="(Grid.Column)">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                </Storyboard>

                                            </VisualState>

                                            <VisualState x:Name="CheckBoxNotVisibleHorizontal">

                                                <Storyboard>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CheckBoxLayout" Storyboard.TargetProperty="Visibility">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CheckBoxLayout" Storyboard.TargetProperty="Margin">

                                                        <DiscreteObjectKeyFrame KeyTime="0">

                                                            <DiscreteObjectKeyFrame.Value>

                                                                <Thickness>0, 0, 0, 0</Thickness>

                                                            </DiscreteObjectKeyFrame.Value>

                                                        </DiscreteObjectKeyFrame>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContainerLayout" Storyboard.TargetProperty="Margin">

                                                        <DiscreteObjectKeyFrame KeyTime="0">

                                                            <DiscreteObjectKeyFrame.Value>

                                                                <Thickness>0, 0, 0, 0</Thickness>

                                                            </DiscreteObjectKeyFrame.Value>

                                                        </DiscreteObjectKeyFrame>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CheckBoxLayout" Storyboard.TargetProperty="(Grid.Row)">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CheckBoxLayout" Storyboard.TargetProperty="(Grid.Column)">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContainerLayout" Storyboard.TargetProperty="(Grid.Row)">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContainerLayout" Storyboard.TargetProperty="(Grid.Column)">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                </Storyboard>

                                            </VisualState>

                                            <VisualState x:Name="CheckBoxNotVisibleVerticalSpace">

                                                <Storyboard>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CheckBoxLayout" Storyboard.TargetProperty="Visibility">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CheckBoxLayout" Storyboard.TargetProperty="Margin">

                                                        <DiscreteObjectKeyFrame KeyTime="0">

                                                            <DiscreteObjectKeyFrame.Value>

                                                                <Thickness>0, 0, 0, 0</Thickness>

                                                            </DiscreteObjectKeyFrame.Value>

                                                        </DiscreteObjectKeyFrame>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContainerLayout" Storyboard.TargetProperty="Margin">

                                                        <DiscreteObjectKeyFrame KeyTime="0">

                                                            <DiscreteObjectKeyFrame.Value>

                                                                <Thickness>24, 0, 0, 0</Thickness>

                                                            </DiscreteObjectKeyFrame.Value>

                                                        </DiscreteObjectKeyFrame>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CheckBoxLayout" Storyboard.TargetProperty="(Grid.Row)">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CheckBoxLayout" Storyboard.TargetProperty="(Grid.Column)">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContainerLayout" Storyboard.TargetProperty="(Grid.Row)">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContainerLayout" Storyboard.TargetProperty="(Grid.Column)">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                </Storyboard>

                                            </VisualState>

                                            <VisualState x:Name="CheckBoxNotVisibleHorizontalSpace">

                                                <Storyboard>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CheckBoxLayout" Storyboard.TargetProperty="Visibility">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CheckBoxLayout" Storyboard.TargetProperty="Margin">

                                                        <DiscreteObjectKeyFrame KeyTime="0">

                                                            <DiscreteObjectKeyFrame.Value>

                                                                <Thickness>0, 0, 0, 0</Thickness>

                                                            </DiscreteObjectKeyFrame.Value>

                                                        </DiscreteObjectKeyFrame>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContainerLayout" Storyboard.TargetProperty="Margin">

                                                        <DiscreteObjectKeyFrame KeyTime="0">

                                                            <DiscreteObjectKeyFrame.Value>

                                                                <Thickness>0, 24, 0, 0</Thickness>

                                                            </DiscreteObjectKeyFrame.Value>

                                                        </DiscreteObjectKeyFrame>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CheckBoxLayout" Storyboard.TargetProperty="(Grid.Row)">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CheckBoxLayout" Storyboard.TargetProperty="(Grid.Column)">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContainerLayout" Storyboard.TargetProperty="(Grid.Row)">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContainerLayout" Storyboard.TargetProperty="(Grid.Column)">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                </Storyboard>

                                            </VisualState>

                                            <VisualState x:Name="CheckBoxVisibleVertical">

                                                <Storyboard>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CheckBoxLayout" Storyboard.TargetProperty="Visibility">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CheckBoxLayout" Storyboard.TargetProperty="Margin">

                                                        <DiscreteObjectKeyFrame KeyTime="0">

                                                            <DiscreteObjectKeyFrame.Value>

                                                                <Thickness>24, 0, 24, 0</Thickness>

                                                            </DiscreteObjectKeyFrame.Value>

                                                        </DiscreteObjectKeyFrame>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CheckBoxLayout" Storyboard.TargetProperty="(Grid.Row)">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CheckBoxLayout" Storyboard.TargetProperty="(Grid.Column)">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContainerLayout" Storyboard.TargetProperty="(Grid.Row)">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContainerLayout" Storyboard.TargetProperty="(Grid.Column)">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContainerLayout" Storyboard.TargetProperty="Margin">

                                                        <DiscreteObjectKeyFrame KeyTime="0">

                                                            <DiscreteObjectKeyFrame.Value>

                                                                <Thickness>0, 0, 0, 0</Thickness>

                                                            </DiscreteObjectKeyFrame.Value>

                                                        </DiscreteObjectKeyFrame>

                                                    </ObjectAnimationUsingKeyFrames>

                                                </Storyboard>

                                            </VisualState>

                                            <VisualState x:Name="CheckBoxVisibleHorizontal">

                                                <Storyboard>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CheckBoxLayout" Storyboard.TargetProperty="Visibility">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CheckBoxLayout" Storyboard.TargetProperty="Margin">

                                                        <DiscreteObjectKeyFrame KeyTime="0">

                                                            <DiscreteObjectKeyFrame.Value>

                                                                <Thickness>0, 24, 0, 24</Thickness>

                                                            </DiscreteObjectKeyFrame.Value>

                                                        </DiscreteObjectKeyFrame>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CheckBoxLayout" Storyboard.TargetProperty="(Grid.Row)">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CheckBoxLayout" Storyboard.TargetProperty="(Grid.Column)">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContainerLayout" Storyboard.TargetProperty="(Grid.Row)">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContainerLayout" Storyboard.TargetProperty="(Grid.Column)">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContainerLayout" Storyboard.TargetProperty="Margin">

                                                        <DiscreteObjectKeyFrame KeyTime="0">

                                                            <DiscreteObjectKeyFrame.Value>

                                                                <Thickness>0, 0, 0, 0</Thickness>

                                                            </DiscreteObjectKeyFrame.Value>

                                                        </DiscreteObjectKeyFrame>

                                                    </ObjectAnimationUsingKeyFrames>

                                                </Storyboard>

                                            </VisualState>

                                            <VisualState x:Name="CheckBoxVisibleOverlay">

                                                <Storyboard>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CheckBoxLayout" Storyboard.TargetProperty="Visibility">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CheckBoxLayout" Storyboard.TargetProperty="(Grid.Row)">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_CheckBoxLayout" Storyboard.TargetProperty="(Grid.Column)">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContainerLayout" Storyboard.TargetProperty="(Grid.Row)">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContainerLayout" Storyboard.TargetProperty="(Grid.Column)">

                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

                                                    </ObjectAnimationUsingKeyFrames>

                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ContainerLayout" Storyboard.TargetProperty="Margin">

                                                        <DiscreteObjectKeyFrame KeyTime="0">

                                                            <DiscreteObjectKeyFrame.Value>

                                                                <Thickness>0, 0, 0, 0</Thickness>

                                                            </DiscreteObjectKeyFrame.Value>

                                                        </DiscreteObjectKeyFrame>

                                                    </ObjectAnimationUsingKeyFrames>

                                                </Storyboard>

                                            </VisualState>

                                        </VisualStateGroup>

                                        <VisualStateGroup x:Name="ItemReorderStates">

                                            <VisualState x:Name="ItemNotOrdered">

                                                <Storyboard>

                                                    <DoubleAnimation

                                            Storyboard.TargetName="LayoutRoot"

                                            Storyboard.TargetProperty="Opacity"

                                            To="1">

                                                        <DoubleAnimation.EasingFunction>

                                                            <CubicEase EasingMode="EaseOut"/>

                                                        </DoubleAnimation.EasingFunction>

                                                    </DoubleAnimation>

                                                    <DoubleAnimation Storyboard.TargetName="RootScale" Storyboard.TargetProperty="ScaleX" To="1">

                                                        <DoubleAnimation.EasingFunction>

                                                            <CubicEase EasingMode="EaseOut"/>

                                                        </DoubleAnimation.EasingFunction>

                                                    </DoubleAnimation>

                                                    <DoubleAnimation Storyboard.TargetName="RootScale" Storyboard.TargetProperty="ScaleY" To="1">

                                                        <DoubleAnimation.EasingFunction>

                                                            <CubicEase EasingMode="EaseOut"/>

                                                        </DoubleAnimation.EasingFunction>

                                                    </DoubleAnimation>

                                                </Storyboard>

                                            </VisualState>

                                            <VisualState x:Name="ItemOrdered">

                                                <Storyboard Duration="0:0:1">

                                                    <DoubleAnimation

                                            Storyboard.TargetName="LayoutRoot"

                                            Storyboard.TargetProperty="Opacity"

                                            To="0.45" >

                                                        <DoubleAnimation.EasingFunction>

                                                            <CubicEase EasingMode="EaseOut"/>

                                                        </DoubleAnimation.EasingFunction>

                                                    </DoubleAnimation>

                                                    <DoubleAnimation Storyboard.TargetName="RootScale" Storyboard.TargetProperty="ScaleX" To="0.92">

                                                        <DoubleAnimation.EasingFunction>

                                                            <CubicEase EasingMode="EaseOut"/>

                                                        </DoubleAnimation.EasingFunction>

                                                    </DoubleAnimation>

                                                    <DoubleAnimation Storyboard.TargetName="RootScale" Storyboard.TargetProperty="ScaleY" To="0.92">

                                                        <DoubleAnimation.EasingFunction>

                                                            <CubicEase EasingMode="EaseOut"/>

                                                        </DoubleAnimation.EasingFunction>

                                                    </DoubleAnimation>

                                                </Storyboard>

                                            </VisualState>

                                        </VisualStateGroup>

                                    </VisualStateManager.VisualStateGroups>

                                    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" x:Name="PART_ContainerCheckBoxLayout">

                                        <Grid.RowDefinitions>

                                            <RowDefinition Height="Auto"/>

                                            <RowDefinition/>

                                        </Grid.RowDefinitions>

                                        <Grid.ColumnDefinitions>

                                            <ColumnDefinition Width="Auto"/>

                                            <ColumnDefinition/>

                                        </Grid.ColumnDefinitions>

                                        <Grid x:Name="PART_ContainerLayout"

                                              Grid.Column="1"

                                              Background="{StaticResource PhoneAccentBrush}">

                                            <ContentControl x:Name="PART_ContainerHolder"

                                                            HorizontalAlignment="Stretch"

                                                            VerticalAlignment="Stretch"

                                                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"

                                                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"

                                                            Margin="{TemplateBinding Padding}"

                                                            Content="{TemplateBinding Content}"

                                                            ContentTemplate="{TemplateBinding ContentTemplate}"/>

                                        </Grid>

                                        <Grid

                                Visibility="Collapsed"

                                x:Name="PART_CheckBoxLayout"

                                Grid.Column="0">

                                            <telerikPrimitives:ItemCheckBox

                                    IsHitTestVisible="False"

                                    x:Name="PART_CheckBox"/>

                                        </Grid>

                                    </Grid>

                                </Border>

                            </ControlTemplate>

                        </Setter.Value>

                    </Setter>

                </Style>

In order to set the selected color, you have to modify the Selected visual state. Finally, make sure to set the Background of the hub tile in your item template to transparent, since the item container will be managing the background of your items.

I hope this helps.

Regards,
Victor
Telerik

[alessandro]

This is exactly what I needed. Thank you so much, appreciated.