[Solved] Metro: small bug in ControlTemplate for ListBoxItem

[Marc]

MouseOver and Selected state change the background of the same border element. This means, if you hover over a selected item the selection color is removed. To fix this you should probably duplicate the border.

[Vanya Pavlova]

Hello Stephan,

 


Thank you for sharing this information with us! I have tried to replicate the behavior you described but I was not able to. I have just checked the style for ListBoxItem in Telerik Metro theme. In these states we are animating two different visual elements:

<!-- normal-->
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}"
        BorderThickness="{TemplateBinding BorderThickness}"
        Background="{TemplateBinding Background}" />

<!-- Selected -->
<Border x:Name="SelectedState" Opacity="0" Background="{StaticResource BasicBrush}" />

<VisualState x:Name="MouseOver">
                                   <Storyboard>
                                       <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="Border" Storyboard.TargetProperty="Background" >
                                           <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource BasicBrush}" />
                                       </ObjectAnimationUsingKeyFrames>
                                   </Storyboard>
                               </VisualState>
                               <VisualState x:Name="Disabled">
                                 .........
                               </VisualState>
                           </VisualStateGroup>
                           <VisualStateGroup x:Name="SelectionStates">
                               <VisualState x:Name="Unselected"/>
                               <VisualState x:Name="Selected">
                                   <Storyboard>
                                       <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity"
                                                        Storyboard.TargetName="SelectedState"/>
                                   </Storyboard>
                               </VisualState>
                           </VisualStateGroup>

Can you post more info about the version you are currently using? 
Will you verify that the behavior is the same using our latest version Q1 2012? 

Greetings,
Vanya Pavlova
the Telerik team

[Marc]

hmm, the version i am using is: 2011_3_1220

and here's an excerpt from your Metro sources

<!-- style for ListBoxItem -->
    <Style  TargetType="ListBoxItem">
        <Setter Property="Padding" Value="3" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Top" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Foreground" Value="{StaticResource MarkerBrush}"/>

        <Setter Property="TabNavigation" Value="Local" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Grid>

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="Border" Storyboard.TargetProperty="Background" >
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource BasicBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="0.3" Storyboard.TargetProperty="Opacity"
                                                         Storyboard.TargetName="contentPresenter"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected"/>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetName="Border" Storyboard.TargetProperty="Background" >
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource BasicBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="0.2" Storyboard.TargetProperty="Opacity"
                                                         Storyboard.TargetName="FocusVisual"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>


                        <!-- normal-->
                        <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="{TemplateBinding Background}" />

                        <ContentControl x:Name="contentPresenter" Margin="{TemplateBinding Padding}"
                                        Foreground="{TemplateBinding Foreground}"
                                        ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"
                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

                        <!-- Focus -->
                        <Border x:Name="FocusVisual" Opacity="0" Margin="1"
                                    BorderThickness="1" BorderBrush="{StaticResource MarkerBrush}"  />

                    </Grid>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

[Vanya Pavlova]

Hello Stephan,

 


Indeed the behavior is different in this version. Rather fortunately this has been already fixed and you may try it with a recent version or even with our latest official release Q1 2012. Furthermore you may check the latest features of RadControls/Silverlight and our online demos for further reference. 

Regards,
Vanya Pavlova
the Telerik team