This is a migrated thread and some comments may be shown as answers.

[Solved] MouseOver visual state not working

5 Answers 508 Views

DataBoundListBox

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Marco asked on 24 Apr 2013, 10:28 AM

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>

</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

5 Answers, 1 is accepted

answered on 02 May 2013, 09:27 AM

DataBoundListBox.zip

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.