MouseOver visual state not working

6 posts, 0 answers
  1. Marco
    Marco avatar
    4 posts
    Member since:
    Apr 2013

    Posted 24 Apr 2013 Link to this post

    Hi,
    I'm migrating from ListBox to DataBoundListBox, it all works fine except for MouseOver visual state; here's my code:

    Style
    <Style TargetType="telerikPrimitives:RadDataBoundListBoxItem" x:Key="ItemContainerStyle">
    <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="Center"/>
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <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}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="0.95"
                                                     Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)"
                                                     Storyboard.TargetName="ContentContainer" d:IsOptimized="True"/>
                                    <DoubleAnimation Duration="0" To="0.95"
                                                     Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)"
                                                     Storyboard.TargetName="ContentContainer" d:IsOptimized="True"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentControl x:Name="ContentContainer"
                                  HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                  VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                  Margin="{TemplateBinding Padding}"
                                  Content="{TemplateBinding Content}"
                                  ContentTemplate="{TemplateBinding ContentTemplate}" RenderTransformOrigin="0.5,0.5"
                                  >
                        <ContentControl.RenderTransform>
                            <CompositeTransform/>
                        </ContentControl.RenderTransform>
                    </ContentControl>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    </Style>

    DataTemplate
    <DataTemplate x:Name="ListBoxItemTemplate">
        <StackPanel x:Name="stackPanel" Orientation="Horizontal" Height="170" Margin="-10,-10,-10,-10" Background="#00000000">
            <Grid VerticalAlignment="Top">
                <Grid.Resources>
                    <common:BooleanToVisibilityConverter x:Key="bool2VisConverter" />
                </Grid.Resources>
                <Rectangle Height="130" Width="94" Margin="10,10,8,10" Fill="#32000000" />
                <Image Source="{Binding Screenshot}" Height="130" Width="94" Margin="10,10,8,10" Stretch="Fill" Opacity="0" ImageOpened="Image_ImageOpened" />
                <Image Source="/images/new_movie.png" HorizontalAlignment="Left" Stretch="None" VerticalAlignment="Top" Margin="10,10,0,0"
                                    Visibility="{Binding IsNew, Converter={StaticResource bool2VisConverter}}"/>
            </Grid>
            <StackPanel Orientation="Vertical" HorizontalAlignment="Left" Width="350" VerticalAlignment="Top" >
                <TextBlock x:Name="textBlock" TextTrimming="WordEllipsis" Text="{Binding RegionTitle}" Margin="10,0,10,2" FontSize="28" VerticalAlignment="Center" Foreground="White" HorizontalAlignment="Stretch"></TextBlock>
                <TextBlock x:Name="textBlockGenres" TextTrimming="WordEllipsis" Text="{Binding Genres}" Margin="10,0,10,2" FontSize="22" HorizontalAlignment="Stretch"  VerticalAlignment="Center" Foreground="#FFF2AE26" />
                <TextBlock x:Name="textBlockReleaseDate" TextTrimming="WordEllipsis" Text="{Binding ReleaseDate}" Margin="10,0,10,2" FontSize="22" HorizontalAlignment="Stretch"  VerticalAlignment="Center" Foreground="#FFF2AE26" />
            </StackPanel>
        </StackPanel>
    </DataTemplate>

    control invocation
    <telerikPrimitives:RadDataBoundListBox Margin="14,0,0,0" HorizontalAlignment="Left" Name="listBox_newest"
                                           VerticalAlignment="Top" Width="440" ItemsSource="{Binding}"
                                           SelectionChanged="listBox_trailers_SelectionChanged"
                                           ItemContainerStyle="{StaticResource ItemContainerStyle}"
                                           ItemTemplate="{StaticResource ListBoxItemTemplate}" >
        <telerikPrimitives:RadDataBoundListBox.ListFooterContent>
            <Rectangle Height="120"></Rectangle>
        </telerikPrimitives:RadDataBoundListBox.ListFooterContent>
    </telerikPrimitives:RadDataBoundListBox>

    any suggestion would be appreciated
    Thanks
  2. Deyan
    Admin
    Deyan avatar
    2037 posts

    Posted 29 Apr 2013 Link to this post

    Hi Marco,

    The MouseOver visual state is currently not supported on Windows Phone as it does not conceptually fit into the touch experience. Can you please elaborate a but further what your scenario is why would you need such visual state?

    Greetings,
    Deyan
    the Telerik team
    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. Marco
    Marco avatar
    4 posts
    Member since:
    Apr 2013

    Posted 29 Apr 2013 Link to this post

    Hi Deyan,

    thanks for the reply.

    What I'm trying to do is give the user a visual feedback on listitem press. The style with MouseOver visual state works fine for TargetType="ListBoxItem", using a classic ListBox, but is not working for TargetType="
    telerikPrimitives:RadDataBoundListBoxItem" using a
    RadDataBoundListBox.

  5. Marco
    Marco avatar
    4 posts
    Member since:
    Apr 2013

    Posted 29 Apr 2013 Link to this post

    To be more precise, what I'm trying to achieve is the same effect on item click visible in your examples RadDataBoundListBox - CheckBoxes.
  6. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1511 posts

    Posted 02 May 2013 Link to this post

    Hello Marco,

    Please find attached all styles required for restyling RadDataBoundListBox. I'd advise you take a closer look at the CheckStates and play around with them. 
    Just wanted to let you know that this week we'll be working with limited capacity due to national holidays so we'd like to apologize for any delays in the support communication.

    Regards,
    Kiril Stanoev
    the Telerik team
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  7. Marco
    Marco avatar
    4 posts
    Member since:
    Apr 2013

    Posted 02 May 2013 Link to this post

    Hi Kiril,

    I solved using InteractionEffectManager and default TiltInteractionEffect.

    Thank you

Back to Top
DevCraft banner