स्टोरीबोर्ड कई तत्वों पर लागू होता है

Question

मेरे पास मेरे डब्ल्यूपीएफ एप्लिकेशन में दो आयताकार हैं। जब मैं किसी तत्व पर क्लिक करता हूं तो मैं एनीमेशन खेलना चाहता हूं। एनीमेशन केवल क्लिक किए गए आयत पर लागू किया जाना चाहिए। नीचे दिए गए कोड के साथ, जब मैं एक आयताकार पर क्लिक करता हूं, तो सभी आकार एनिमेटेड होते हैं।

मुझे क्या करना चाहिए ??

Window.Resources> 
    <ResourceDictionary> 

      <LinearGradientBrush x:Key="ExecutionInitialization" EndPoint="0.5,1" StartPoint="0.5,0"> 
       <GradientStop Color="#FFC0FBBA"/> 
       <GradientStop Color="#FF0FA000" Offset="1"/> 
       <GradientStop Color="#FF0FA000"/> 
      </LinearGradientBrush> 

     <Storyboard x:Key="OnMouseLeftButtonDown1" RepeatBehavior="Forever"> 
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" Storyboard.TargetName="rec1"> 
       <SplineDoubleKeyFrame KeyTime="0" Value="0.17"/> 
       <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="0.32"/> 
       <SplineDoubleKeyFrame KeyTime="0:0:0.8" Value="0.5"/> 
       <SplineDoubleKeyFrame KeyTime="0:0:1" Value="0.56"/> 
       <SplineDoubleKeyFrame KeyTime="0:0:1.2" Value="1"/> 
      </DoubleAnimationUsingKeyFrames> 
     </Storyboard> 
    </ResourceDictionary> 


</Window.Resources> 

<Grid> 
    <Rectangle MouseDown="rec1_MouseDown" Name="rec1" Fill="{StaticResource ExecutionInitialization}" HorizontalAlignment="Left" Height="85.075" Margin="24.358,27.731,0,0" Stroke="Red" VerticalAlignment="Top" Width="156.717"/> 

    <Rectangle MouseDown="rec2_MouseDown" Name="rec2" Fill="{StaticResource ExecutionInitialization}" HorizontalAlignment="Left" Height="113.433" Margin="246.746,141.164,0,0" Stroke="Black" VerticalAlignment="Center" Width="211.941"/> 

</Grid> 

और ग #

public MainWindow() 
{ 
    InitializeComponent(); 
    animation = TryFindResource("OnMouseLeftButtonDown1") as Storyboard; 
} 

private void rec1_MouseDown(object sender, MouseButtonEventArgs e) 
{ 
    animation.Begin(); 
} 

private void rec2_MouseDown(object sender, MouseButtonEventArgs e) 
{ 

} 

Answer 1

बस अपने LinearGradientBrush संसाधन पर false करने के लिए x:Shared विशेषता निर्धारित किया है। फिर प्रत्येक आयत की भर संपत्ति को ब्रश सौंपा की अपनी प्रति प्राप्त होती है।

private void Rectangle_MouseDown(object sender, MouseButtonEventArgs e) 
{ 
    var storyboard = TryFindResource("OnMouseLeftButtonDown1") as Storyboard; 
    storyboard.Begin((FrameworkElement)sender); 
} 

फिर आप भी उपयोग कर सकते हैं:

<LinearGradientBrush x:Key="ExecutionInitialization" x:Shared="false" 
        EndPoint="0.5,1" StartPoint="0.5,0"> 
    ... 
</LinearGradientBrush> 

विभिन्न आयत पर स्वतंत्र रूप से चलाने के लिए एनीमेशन में, आप भी पैरामीटर के रूप में लक्ष्य पर नियंत्रण के साथ Storybord Storyboard.TargetName हटाने, और शुरू करने के लिए होगा ऐसे सभी आयतों के लिए एक ही घटना हैंडलर:

<Rectangle x:Name="rec1" MouseDown="Rectangle_MouseDown" .../> 
<Rectangle x:Name="rec2" MouseDown="Rectangle_MouseDown" .../>