Background color of a selected item in the RadDataBoundListBox

5 posts, 0 answers
  1. alessandro
    alessandro avatar
    8 posts
    Member since:
    Aug 2008

    Posted 15 Jun 2013 Link to this post

    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
  2. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 17 Jun 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  3. DevCraft banner
  4. alessandro
    alessandro avatar
    8 posts
    Member since:
    Aug 2008

    Posted 17 Jun 2013 Link to this post

    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!

  5. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 19 Jun 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  6. alessandro
    alessandro avatar
    8 posts
    Member since:
    Aug 2008

    Posted 19 Jun 2013 Link to this post

    This is exactly what I needed. Thank you so much, appreciated.
Back to Top
DevCraft banner