locked
Storyboard cannot resolve target name RRS feed

  • Question

  •  I added an ListBox to my Silverlight project.
    Now I want to create an animation that changes the opacity when I hover over an ListBoxItem.

    This is the XAML:

    1    <UserControl.Resources>
    2
    3 <Storyboard x:Name="OpacityStoryboard">
    4 <DoubleAnimation
    5 Storyboard.TargetProperty="Background.Opacity"
    6 Storyboard.TargetName="ListBoxBorder"
    7 From="1" To="0" Duration="0:0:1">
    8 </DoubleAnimation>
    9 </Storyboard>
    10
    11 <DataTemplate x:Key="ClubDataTemplate">
    12 <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch">
    13 <TextBlock Text="{Binding Path=Naam}" Foreground="White" HorizontalAlignment="Stretch" />
    14 <StackPanel Orientation="Horizontal">
    15 <TextBlock Text="Tel: " Foreground="White" />
    16 <TextBlock Text="{Binding Path=Telefoonnummer}" Foreground="White" />
    17 </StackPanel>
    18 </StackPanel>
    19 </DataTemplate>
    20
    21 <Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
    22 <Setter Property="Padding" Value="3"/>
    23 <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    24 <Setter Property="VerticalContentAlignment" Value="Top"/>
    25 <Setter Property="Background" Value="Transparent"/>
    26 <Setter Property="Foreground" Value="White"/>
    27 <Setter Property="BorderThickness" Value="1"/>
    28 <Setter Property="Content" Value=""/>
    29 <Setter Property="Margin" Value="2,2,2,2"/>
    30 <Setter Property="Template">
    31 <Setter.Value>
    32 <ControlTemplate TargetType="ListBoxItem">
    33 <Border Padding="5" CornerRadius="5" x:Name="ListBoxBorder"
    34 MouseEnter="ListBoxItem_MouseEnter"
    35 MouseLeave="ListBoxItem_MouseLeave">
    36 <ContentPresenter />
    37 </Border>
    38 </ControlTemplate>
    39 </Setter.Value>
    40 </Setter>
    41 </Style>
    42 </UserControl.Resources>
    And my code behind:
     private void ListBoxItem_MouseEnter(object sender, MouseEventArgs e)
    {
    OpacityStoryboard.Begin();
    }  
    So it crashes when OpacityStoryboard.Begin() is called (Cannot resolve TargetName ListBoxBorder)
    I dont see what im doing wrong.. 
    Hope someone can help me.
     
    Tnx 
     
    Friday, March 27, 2009 6:52 AM

Answers

  • You just have to put the <vsm:VisualStateManager.VisualStateGroups /> element into your border (the VisualStateManager.VisualStateGroups must be set on the root UIElement of the ControlTemplate and not directly on the ControlTemplate itself).

    Friday, March 27, 2009 12:09 PM

All replies

  • Hi,

    You could try changing:

    Storyboard.TargetProperty="Background.Opacity"

    to:

    Storyboard.TargetProperty="Opacity"
    Friday, March 27, 2009 10:51 AM
  • Hi Dan,

     I tried changing the TargetProperty, but the outcome is the same.

    Friday, March 27, 2009 11:03 AM
  • Your storyboard is not on the same NameScope as the control you want to animate. In order to do that, you must put the Storyboard into the same template, and use the FindName method on your control to get a reference to it.

    By the way, I think it is not the good way to achieve this : You should prefer using VisualStates and transitions in pure xaml instead of relying on code behind.

    Friday, March 27, 2009 11:18 AM
  •  Thanks Simon for you awnser.

     I tried to implement the VisualStates as you suggested.
    This is the result.

     

    1    <Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
    2                <Setter Property="Padding" Value="3"/>
    3                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    4                <Setter Property="VerticalContentAlignment" Value="Top"/>
    5                <Setter Property="Background" Value="Transparent"/>
    6                <Setter Property="Foreground" Value="White"/>
    7                <Setter Property="BorderThickness" Value="1"/>
    8                <Setter Property="Content" Value=""/>
    9                <Setter Property="Margin" Value="2,2,2,2"/>
    10               <Setter Property="Template">
    11                   <Setter.Value>
    12                       <ControlTemplate TargetType="ListBoxItem">
    13   
    14   
    15                           <vsm:VisualStateManager.VisualStateGroups>
    16                               <vsm:VisualStateGroup x:Name="CommonStates">
    17                                   <vsm:VisualState x:Name="Normal"/>
    18                                   <vsm:VisualState x:Name="MouseOver">
    19                                       <Storyboard x:Name="OpacityStoryboard">
    20                                           <DoubleAnimation 
    21                                               Storyboard.TargetProperty="Opacity" 
    22                                               Storyboard.TargetName="ListBoxBorder" 
    23                                               From="1" To="0" Duration="0:0:1" />
    24                                       </Storyboard>
    25   
    26                                   </vsm:VisualState>
    27                               </vsm:VisualStateGroup>
    28                           </vsm:VisualStateManager.VisualStateGroups>
    29   
    30                           <Border Padding="5" CornerRadius="5" x:Name="ListBoxBorder"
    31                                   MouseEnter="ListBoxItem_MouseEnter"
    32                                   MouseLeave="ListBoxItem_MouseLeave">
    33                               <ContentPresenter />
    34                           </Border>
    35                       </ControlTemplate>
    36                   </Setter.Value>
    37               </Setter>
    38           </Style>
    

     Now I get a AG_E_PARSER_BAD_PROPERTY_VALUE on line 27. I dont get where this is comming from.

    Friday, March 27, 2009 12:00 PM
  • You just have to put the <vsm:VisualStateManager.VisualStateGroups /> element into your border (the VisualStateManager.VisualStateGroups must be set on the root UIElement of the ControlTemplate and not directly on the ControlTemplate itself).

    Friday, March 27, 2009 12:09 PM
  • Thanks!

    Friday, March 27, 2009 12:22 PM