어떻게 이벤트 트리거에서 바운드 데이터에 애니메이션을 적용 할 수 있습니까?

LinearGradientBrush가있는 직사각형이 있습니다. 브러시 색상 중 하나가 외부 리소스에 바인딩됩니다.어떻게 이벤트 트리거에서 바운드 데이터에 애니메이션을 적용 할 수 있습니까?

public Color UpperLeftColor 
{ 
    get 
    { 
     return _upperleftColor; 
    } 
    set 
    { 
     _upperleftColor = value; 
     SetPropertyChanged("UpperLeftColor"); 
    } 
}

실제로 여러 개의 사각형이 서로의 위에 쌓인하고 맨 위의 사각형에 내가를 만들 싶습니다 바운드 데이터가 간단한 컬러 속성입니다

<Rectangle 
    Width="40" 
    Height="40" 
    RadiusX="5" 
    RadiusY="5" 
    Fill="white" 
    Opacity="0.6"> 
    <Rectangle.OpacityMask> 
     <LinearGradientBrush 
      x:Name="UpperShading" 
      StartPoint="0,0.2" 
      EndPoint="0,0" 
      MappingMode="RelativeToBoundingBox"> 
      <GradientStop 
       Color="Transparent" Offset="0"/> 
      <GradientStop 
       x:Name="UpperShadingColor" 
       Color="{Binding 
         Source={StaticResource PlaybackResource}, 
         Path=UpperLeftColor}" 
       Offset="1"/> 
     </LinearGradientBrush> 
    </Rectangle.OpacityMask> 
</Rectangle>

: 같은 사각형은 보인다 애니메이션을 사용하여 위쪽 사각형을 클릭 할 때 바인딩 된 색상 값을 변경합니다 (MouseDown). 나는 시도 :

<Rectangle 
    Width="40" 
    Height="40" 
    RadiusX="5" 
    RadiusY="5" 
    Fill="Transparent"> 
    <Rectangle.Triggers> 
     <EventTrigger RoutedEvent="MouseDown"> 
      <EventTrigger.Actions> 
     <BeginStoryboard> 
      <Storyboard> 
       <ColorAnimation 
        Storyboard.TargetName 
         ="{Binding Source={StaticResource PlaybackResource}}" 
        Storyboard.TargetProperty="UpperLeftColor" 
        To="{Binding Source 
         ={StaticResource PlaybackResource}, Path=LowlightColor}" 
        Duration="0:0:1"/> 
      </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger.Actions> 
    </EventTrigger> 
    </Rectangle.Triggers> 
</Rectangle>

그러나 이것은 오류 발생 :

" 'PlaybackButtonResources'이름이 System.Windows.Shapes '의 이름 범위에서 찾을 수 없습니다 (PlaybackResource는 클래스 PlaybackButtonReources의 키입니다) .구형'."

리소스를 사각형에 추가하려고했지만 동일한 오류 메시지가 나타납니다.

"이벤트 트리거에서 바운드 데이터를 어떻게 애니메이트 할 수 있습니까?"

모든 안내를 환영합니다.

출처

2013-07-30 dtaylor

경계 값이 아닌 애니메이션하려는 GradientStop에 Storyboard 대상을 설정해야합니다.

변경해보십시오 당신의 다음 ColorAnimation : 위의 리처드 E에서이 질문에

<ColorAnimation Storyboard.TargetName="UpperShadingColor" 
      Storyboard.TargetProperty="Color" 
      To="{Binding Source={StaticResource PlaybackResource}, Path=LowlightColor}" 
      Duration="0:0:1"/>

출처

2013-07-30 14:57:09

리처드 E, 답장을 보내 주셔서 감사합니다. 이것을 시도했지만 이벤트 트리거가 GradientStop과 다른 사각형에 있습니다. 나는 "System.Windows.Shapes.Rectangle '의 이름 범위에서 이름을 찾을 수 없습니다." – dtaylor

모든 직사각형의 전체 xaml을 게시 할 수 있습니까? –

리차드 E, 실제로 하나의 직사각형에 모든 기능이 생길 때까지 실제로 그 기능을 배웠습니다. 문제 해결됨. 좋은 서식에 대한 또 다른 답변을 결과에 게시하겠습니다. 그러나 이것을 "대답"으로 표시하겠습니다. – dtaylor

, 그는 내가 다시 전파됩니다 만 XAML 속성 (바인딩 된 데이터를 수정할 수 있다고 지적 바운드 데이터). MouseDown 이벤트를 트리거 한 사각형과 다른 사각형에서 데이터를 수정하려고 했으므로 많은 어려움을 겪고있었습니다. 필자는 VisualBrush와 DrawingBrush를 사용하여 모든 기능을 하나의 사각형으로 퍼팅하고 관리했습니다. 아래에 결과 XAML을 게시합니다. 조심해, 길다.

<Canvas Background="Transparent"> 
    <Grid> 
     <Rectangle 
      Width="40" 
      Height="40" 
      RadiusX="5" 
      RadiusY="5" MouseDown="Rectangle_MouseDown"> 
      <Rectangle.Fill> 
       <VisualBrush TileMode="None" AlignmentX="Center" AlignmentY="Center"> 
        <VisualBrush.Visual> 
         <Grid HorizontalAlignment="Center" VerticalAlignment="Center"> 
          <Grid.Background> 
           <DrawingBrush> 
            <DrawingBrush.Drawing> 
             <DrawingGroup> 
              <GeometryDrawing> 
               <GeometryDrawing.Geometry> 
                <RectangleGeometry Rect="0,0,40,40"/> 
               </GeometryDrawing.Geometry> 
               <GeometryDrawing.Brush> 
                <SolidColorBrush Color="{Binding Source={StaticResource PlaybackResource}, Path=BackColor}"/> 
               </GeometryDrawing.Brush> 
              </GeometryDrawing> 
              <GeometryDrawing> 
               <GeometryDrawing.Geometry> 
                <RectangleGeometry Rect="0,0,40,40"/> 
               </GeometryDrawing.Geometry> 
               <GeometryDrawing.Brush> 
                <LinearGradientBrush 
                 StartPoint="0,0.2" 
                 EndPoint="0,0" 
                 Opacity="0.6" 
                 MappingMode="RelativeToBoundingBox"> 
                 <GradientStop 
                  Color="Transparent" Offset="0"/> 
                 <GradientStop x:Name="UpperShadingColor" 
                  Color="{Binding Source={StaticResource PlaybackResource}, Path=UpperLeftColor}" 
                  Offset="1"/> 
                </LinearGradientBrush> 
               </GeometryDrawing.Brush> 
              </GeometryDrawing> 
              <GeometryDrawing> 
               <GeometryDrawing.Geometry> 
                <RectangleGeometry Rect="0,0,40,40"/> 
               </GeometryDrawing.Geometry> 
               <GeometryDrawing.Brush> 
                <LinearGradientBrush 
                 x:Name="LeftShading" 
                 StartPoint="0.2,0" 
                 EndPoint="0,0" 
                 Opacity="0.6" 
                 MappingMode="RelativeToBoundingBox"> 
                 <GradientStop 
                  Color="Transparent" 
                  Offset="0"/> 
                 <GradientStop x:Name="LeftShadingColor" 
                  Color="{Binding Source={StaticResource PlaybackResource}, Path=UpperLeftColor}" 
                  Offset="1"/> 
                </LinearGradientBrush> 
               </GeometryDrawing.Brush> 
              </GeometryDrawing> 
              <GeometryDrawing> 
               <GeometryDrawing.Geometry> 
                <RectangleGeometry Rect="0,0,40,40"/> 
               </GeometryDrawing.Geometry> 
               <GeometryDrawing.Brush> 
                <LinearGradientBrush 
                 x:Name="LowerShading" 
                 StartPoint="0.8,0" 
                 EndPoint="1,0" 
                 Opacity="0.6" 
                 MappingMode="RelativeToBoundingBox"> 
                 <GradientStop 
                  Color="Transparent" 
                  Offset="0"/> 
                 <GradientStop x:Name="LowerShadingColor" 
                  Color="{Binding Source={StaticResource PlaybackResource}, Path=LowerRightColor}" 
                  Offset="1"/> 
                </LinearGradientBrush> 
               </GeometryDrawing.Brush> 
              </GeometryDrawing> 
              <GeometryDrawing> 
               <GeometryDrawing.Geometry> 
                <RectangleGeometry Rect="0,0,40,40"/> 
               </GeometryDrawing.Geometry> 
               <GeometryDrawing.Brush> 
                <LinearGradientBrush 
                 x:Name="RightShading" 
                 StartPoint="0,0.8" 
                 EndPoint="0,01" 
                 Opacity="0.6" 
                 MappingMode="RelativeToBoundingBox"> 
                 <GradientStop 
                  Color="Transparent" 
                  Offset="0"/> 
                 <GradientStop x:Name="RightShadingColor" 
                  Color="{Binding Source={StaticResource PlaybackResource}, Path=LowerRightColor}" 
                  Offset="1"/> 
                </LinearGradientBrush> 
               </GeometryDrawing.Brush> 
              </GeometryDrawing> 
             </DrawingGroup> 
            </DrawingBrush.Drawing> 
           </DrawingBrush> 
          </Grid.Background> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="*"/> 
           <ColumnDefinition Width="auto"/> 
           <ColumnDefinition Width="*"/> 
          </Grid.ColumnDefinitions> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="*"/> 
           <RowDefinition Height="auto"/> 
           <RowDefinition Height="*"/> 
          </Grid.RowDefinitions> 
          <ContentControl Width="30" Height="30" Grid.Column="1" Grid.Row="1" Margin="6,6,6,6" 
           Content="{Binding Source={StaticResource PlaybackResource}, Path=Symbol}"/> 
         </Grid> 
        </VisualBrush.Visual> 
       </VisualBrush> 
      </Rectangle.Fill> 
      <Rectangle.Triggers> 
       <EventTrigger RoutedEvent="MouseDown"> 
        <EventTrigger.Actions> 
         <BeginStoryboard> 
          <Storyboard> 
           <ColorAnimation 
            Storyboard.TargetName="UpperShadingColor" 
            Storyboard.TargetProperty="Color" 
            To="{Binding Source={StaticResource PlaybackResource}, Path=LowlightColor}" 
            Duration="0:0:0.01"/> 
           <ColorAnimation 
            Storyboard.TargetName="LeftShadingColor" 
            Storyboard.TargetProperty="Color" 
            To="{Binding Source={StaticResource PlaybackResource}, Path=LowlightColor}" 
            Duration="0:0:0.01"/> 
           <ColorAnimation 
            Storyboard.TargetName="LowerShadingColor" 
            Storyboard.TargetProperty="Color" 
            To="{Binding Source={StaticResource PlaybackResource}, Path=HighlightColor}" 
            Duration="0:0:0.01"/> 
           <ColorAnimation 
            Storyboard.TargetName="RightShadingColor" 
            Storyboard.TargetProperty="Color" 
            To="{Binding Source={StaticResource PlaybackResource}, Path=HighlightColor}" 
            Duration="0:0:0.01"/> 
          </Storyboard> 
         </BeginStoryboard> 
        </EventTrigger.Actions> 
       </EventTrigger> 
       <EventTrigger RoutedEvent="MouseUp"> 
        <EventTrigger.Actions> 
         <BeginStoryboard> 
          <Storyboard> 
           <ColorAnimation 
            Storyboard.TargetName="UpperShadingColor" 
            Storyboard.TargetProperty="Color" 
            To="{Binding Source={StaticResource PlaybackResource}, Path=HighlightColor}" 
            Duration="0:0:0.01"/> 
           <ColorAnimation 
            Storyboard.TargetName="LeftShadingColor" 
            Storyboard.TargetProperty="Color" 
            To="{Binding Source={StaticResource PlaybackResource}, Path=HighlightColor}" 
            Duration="0:0:0.01"/> 
           <ColorAnimation 
            Storyboard.TargetName="LowerShadingColor" 
            Storyboard.TargetProperty="Color" 
            To="{Binding Source={StaticResource PlaybackResource}, Path=LowlightColor}" 
            Duration="0:0:0.01"/> 
           <ColorAnimation 
            Storyboard.TargetName="RightShadingColor" 
            Storyboard.TargetProperty="Color" 
            To="{Binding Source={StaticResource PlaybackResource}, Path=LowlightColor}" 
            Duration="0:0:0.01"/> 
          </Storyboard> 
         </BeginStoryboard> 
        </EventTrigger.Actions> 
       </EventTrigger> 
       <EventTrigger RoutedEvent="MouseLeave"> 
        <EventTrigger.Actions> 
         <BeginStoryboard> 
          <Storyboard> 
           <ColorAnimation 
            Storyboard.TargetName="UpperShadingColor" 
            Storyboard.TargetProperty="Color" 
            To="{Binding Source={StaticResource PlaybackResource}, Path=HighlightColor}" 
            Duration="0:0:0.01"/> 
           <ColorAnimation 
            Storyboard.TargetName="LeftShadingColor" 
            Storyboard.TargetProperty="Color" 
            To="{Binding Source={StaticResource PlaybackResource}, Path=HighlightColor}" 
            Duration="0:0:0.01"/> 
           <ColorAnimation 
            Storyboard.TargetName="LowerShadingColor" 
            Storyboard.TargetProperty="Color" 
            To="{Binding Source={StaticResource PlaybackResource}, Path=LowlightColor}" 
            Duration="0:0:0.01"/> 
           <ColorAnimation 
            Storyboard.TargetName="RightShadingColor" 
            Storyboard.TargetProperty="Color" 
            To="{Binding Source={StaticResource PlaybackResource}, Path=LowlightColor}" 
            Duration="0:0:0.01"/> 
          </Storyboard> 
         </BeginStoryboard> 
        </EventTrigger.Actions> 
       </EventTrigger> 
      </Rectangle.Triggers> 
     </Rectangle> 
    </Grid> 
</Canvas>

출처

2013-07-30 17:26:20 dtaylor

어떻게 이벤트 트리거에서 바운드 데이터에 애니메이션을 적용 할 수 있습니까?

답변

관련 문제