Metro: small bug in ControlTemplate for ListBoxItem

4 posts, 0 answers
  1. Marc
    Marc avatar
    88 posts
    Member since:
    Jul 2011

    Posted 14 Feb 2012 Link to this post

    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.
  2. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 16 Feb 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. Marc
    Marc avatar
    88 posts
    Member since:
    Jul 2011

    Posted 16 Feb 2012 Link to this post

    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>
  4. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 16 Feb 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top