2011-07-14 133 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>