2011-07-14 104 views
3

我想在鼠标进入和离开时为边界的背景设置动画。WPF边框元素背景动画

这里是我的代码

 <Style TargetType="{x:Type Border}"> 
     <Style.Triggers> 
      <EventTrigger RoutedEvent="Border.MouseEnter"> 
       <EventTrigger.Actions> 
        <BeginStoryboard> 
         <Storyboard> 
          <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" To="#6990EE90" Duration="0:0:0.3" /> 
         </Storyboard> 
        </BeginStoryboard> 
       </EventTrigger.Actions> 
      </EventTrigger> 
      <EventTrigger RoutedEvent="Border.MouseLeave"> 
       <EventTrigger.Actions> 
        <BeginStoryboard> 
         <Storyboard> 
          <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" To="Transparent" Duration="0:0:3" /> 
         </Storyboard> 
        </BeginStoryboard> 
       </EventTrigger.Actions> 
      </EventTrigger> 
     </Style.Triggers> 
    </Style> 

... 

    <ListBox Height="158" Name="lstStats" Width="Auto" HorizontalAlignment="Stretch" Margin="0" ItemsSource="{Binding ApplicationStatsValues}" Background="Transparent" BorderThickness="0"> 
     <ListBox.ItemTemplate> 
      <DataTemplate> 
       <Border Name="lulu" BorderThickness="1" Opacity="0.8" BorderBrush="LightGreen" CornerRadius="3" Margin="0,0,0,2"> 
       <Border.Background> 
        <SolidColorBrush /> 
       </Border.Background> 
       <DockPanel Height="60" Width="284" HorizontalAlignment="Stretch" VerticalAlignment="Top"> 
        <TextBlock DockPanel.Dock="Bottom" Text="{Binding Description}" Height="30" Width="Auto" VerticalAlignment="Center" /> 
        <TextBlock DockPanel.Dock="Left" Text="{Binding Title}" Height="30" Width="220" VerticalAlignment="Center" /> 
        <TextBlock DockPanel.Dock="Right" Text="{Binding Value}" Height="30" Width="80" VerticalAlignment="Center" /> 
       </DockPanel> 
       </Border> 
      </DataTemplate> 
     </ListBox.ItemTemplate> 
    </ListBox> 

的问题是,我总是得到这个错误:

'背景' 属性不指向的DependencyObject路径“(背景)(0)。 ”。

这与<Style Targetype="ListBoxItem">完美的作品,但我不希望列表项的背景改变,它看起来很丑。我希望边框背景因圆边框而改变。

所以问题是:那些DependencyObject是如何工作的?我怎样才能确定哪一个是给定对象的正确的一个,并且任何人都可以使这个工作?

感谢您的帮助!

回答

6

我终于找到了一个解决方案,通过将触发器放入ItemTemplate本身内部来实现它。

任何解释为什么它不能通过使用外部样式来定位类型将会非常受欢迎。

<ListBox Height="158" Name="lstStats" Width="Auto" HorizontalAlignment="Stretch" Margin="0" ItemsSource="{Binding ApplicationStatsValues}" Background="Transparent" BorderThickness="0"> 
     <ListBox.ItemTemplate> 
      <DataTemplate> 
       <Border BorderThickness="1" Opacity="0.8" BorderBrush="LightGreen" CornerRadius="3" Margin="0,0,0,2"> 
       <Border.Background> 
        <SolidColorBrush /> 
       </Border.Background> 
       <Border.Triggers> 
        <EventTrigger RoutedEvent="Border.MouseEnter"> 
         <EventTrigger.Actions> 
          <BeginStoryboard> 
           <Storyboard> 
            <ColorAnimation Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="#6990EE90" Duration="0:0:0.3" /> 
           </Storyboard> 
          </BeginStoryboard> 
         </EventTrigger.Actions> 
        </EventTrigger> 
        <EventTrigger RoutedEvent="Border.MouseLeave"> 
         <EventTrigger.Actions> 
          <BeginStoryboard> 
           <Storyboard> 
            <ColorAnimation Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Transparent" Duration="0:0:3" /> 
           </Storyboard> 
          </BeginStoryboard> 
         </EventTrigger.Actions> 
        </EventTrigger> 
       </Border.Triggers> 

        <DockPanel Height="60" Width="284" HorizontalAlignment="Stretch" VerticalAlignment="Top"> 
        <TextBlock DockPanel.Dock="Bottom" Text="{Binding Description}" Height="30" Width="Auto" VerticalAlignment="Center" /> 
        <TextBlock DockPanel.Dock="Left" Text="{Binding Title}" Height="30" Width="220" VerticalAlignment="Center" /> 
        <TextBlock DockPanel.Dock="Right" Text="{Binding Value}" Height="30" Width="80" VerticalAlignment="Center" /> 
       </DockPanel> 
       </Border> 
      </DataTemplate> 
     </ListBox.ItemTemplate> 
    </ListBox>