2016-08-05 12 views
0

ItemsControlにウォーターマークを付けて、コンテンツの動作を示すように変更しようとしています。WPF - XAML - 親スタイルのネストされたスタイルでアニメーションを呼び出す

VisualBrush内のLabelを使用してItemsControlの背景として「OR」という単語を表示しています(コントロールには一緒にOr'dされるプロパティフィルタが含まれます)。背景の変更は、ItemsControlのIsMouseOverによってトリガーされます。

問題:ラベルに直接不透明度を設定すると、私のVisualBrush(xaml参照)を表示/消滅させることができますが、ラベルにネストされたスタイルを使用しようとすると不透明度がアニメートできません。私は成功せずにいくつかのアプローチを試してきたので、私の間違いに関する指針は感謝して受け取ります。

私は両方のアニメーションを含めました(コメントアウトしました)。私はまた、ColorAnimationでLabelにForegroundを設定しようとしましたが、成功しませんでした。

感謝 イアン・カーソン最後に

<ItemsControl x:Name="OrFilterItemsTarget" 
       ItemsSource="{Binding Assets.OrFilters}" 
       ItemTemplateSelector="{StaticResource FilterTargetTemplateSelector}" 
       ItemContainerStyle="{StaticResource DraggableItemStyle}" 
       BorderThickness="0,0,0,0.5" 
       BorderBrush="DimGray" 
       AllowDrop="True" 
       IsHitTestVisible="True" 
       Margin="0,2.95,15.934,77" 
       HorizontalAlignment="Right" 
       Width="105"> 
    <ItemsControl.Style> 
     <Style TargetType="{x:Type ItemsControl}"> 
      <Style.Resources> 
       <Style x:Key="LabelStyle" 
         TargetType="{x:Type Label}"> 
        <Style.Resources> 
         <Storyboard x:Key="FadeUp"> 
          <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                  Storyboard.TargetProperty="Opacity" 
                  FillBehavior="HoldEnd"> 
           <SplineDoubleKeyFrame KeyTime="00:00:2" 
                Value="0.5" /> 
          </DoubleAnimationUsingKeyFrames> 
          <!--<DoubleAnimation Storyboard.TargetProperty="Opacity" 
              From="0" To="0.5" 
              Duration="0:0:2" />--> 
         </Storyboard> 
         <Storyboard x:Key="FadeDown"> 
          <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                  Storyboard.TargetProperty="Opacity" 
                  FillBehavior="Stop"> 
           <SplineDoubleKeyFrame KeyTime="00:00:2" 
                 Value="0" /> 
          </DoubleAnimationUsingKeyFrames> 
          <!--<DoubleAnimation Storyboard.TargetProperty="Opacity" 
              From="0.5" To="0" 
              Duration="0:0:2" />--> 
         </Storyboard> 
        </Style.Resources> 
        <Style.Triggers> 
         <DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=OrFilterItemsTarget}" 
            Value="True"> 
          <DataTrigger.EnterActions> 
           <BeginStoryboard Storyboard="{StaticResource FadeUp}" /> 
          </DataTrigger.EnterActions> 
         </DataTrigger> 
         <DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=OrFilterItemsTarget}" 
             Value="False"> 
          <DataTrigger.EnterActions> 
           <BeginStoryboard Storyboard="{StaticResource FadeDown}" /> 
          </DataTrigger.EnterActions> 
         </DataTrigger> 
        </Style.Triggers> 
       </Style> 
       <VisualBrush x:Key="FilterContentType" 
          AlignmentX="Center" 
          AlignmentY="Center" 
          Stretch="None"> 
        <VisualBrush.Visual> 
         <Label Content="OR" 
           Foreground="DarkGray" 
           Style="{StaticResource LabelStyle}"> 
         </Label> 
        </VisualBrush.Visual> 
       </VisualBrush> 
      </Style.Resources> 
      <Style.Triggers> 
       <Trigger Property="IsMouseOver" 
         Value="True"> 
        <Setter Property="Background" 
          Value="{StaticResource FilterContentType}" /> 
       </Trigger> 
       <Trigger Property="IsMouseOver" 
         Value="False"> 
        <Setter Property="Background" 
          Value="Transparent" /> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </ItemsControl.Style> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <WrapPanel Orientation="Horizontal" 
         Background="Transparent"> 
       <i:Interaction.Behaviors> 
        <ei:FluidMoveBehavior AppliesTo="Children" 
              Duration="0:0:0.3"> 
         <ei:FluidMoveBehavior.EaseY> 
          <BackEase EasingMode="EaseIn" 
             Amplitude="0.1" /> 
         </ei:FluidMoveBehavior.EaseY> 
        </ei:FluidMoveBehavior> 
       </i:Interaction.Behaviors> 
      </WrapPanel> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
</ItemsControl> 

答えて

0

私はこの問題を、思考の上に私は気づきました。ネストされたスタイルは不要でした。解決策は、ItemsControl内の独自のタグ内にVisualBrush(コンテンツを目的の最終外観として設定)を設定してから、ItemsControlで直接EventTriggersを使用してVisualBrushの不透明度をアニメーション化することでした。マウスの操作とユーザーの操作のドラッグを行うためのさまざまなイベントに注意してください。

この問題について考えてくださった皆様に感謝します。最終的なXAMLはこのように見え、うまくいけば誰かにとって役に立ちます。

<ItemsControl x:Name="OrFilterItemsTarget" 
       ItemsSource="{Binding Assets.OrFilters}" 
       ItemTemplateSelector="{StaticResource FilterTargetTemplateSelector}" 
       ItemContainerStyle="{StaticResource DraggableItemStyle}" 
       BorderThickness="0,0,0,0.5" 
       BorderBrush="DimGray" 
       AllowDrop="True" 
       IsHitTestVisible="True" 
       Margin="0,2.95,15.934,77" 
       HorizontalAlignment="Right" 
       Width="105"> 
    <ItemsControl.Background> 
     <VisualBrush x:Name="OrFilterContentType" 
         AlignmentX="Center" 
         AlignmentY="Center" 
         Stretch="None" 
         Opacity="0"> 
      <VisualBrush.Visual> 
       <Label Content="OR" 
         Foreground="DarkGray" 
         Opacity="0.5" /> 
      </VisualBrush.Visual> 
     </VisualBrush> 
    </ItemsControl.Background> 
    <ItemsControl.Triggers> 
     <EventTrigger RoutedEvent="ItemsControl.MouseEnter"> 
      <EventTrigger.Actions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation Storyboard.TargetName="OrFilterContentType" 
              Storyboard.TargetProperty="(Brush.Opacity)" 
              From="0" To="1" 
              Duration="0:0:0.7" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger.Actions> 
     </EventTrigger> 
     <EventTrigger RoutedEvent="ItemsControl.DragEnter"> 
      <EventTrigger.Actions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation Storyboard.TargetName="OrFilterContentType" 
              Storyboard.TargetProperty="(Brush.Opacity)" 
              From="0" 
              To="1" 
              Duration="0:0:0.7" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger.Actions> 
     </EventTrigger> 
     <EventTrigger RoutedEvent="ItemsControl.MouseLeave"> 
      <EventTrigger.Actions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation Storyboard.TargetName="OrFilterContentType" 
              Storyboard.TargetProperty="(Brush.Opacity)" 
              From="1" To="0" 
              Duration="0:0:0.7" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger.Actions> 
     </EventTrigger> 
     <EventTrigger RoutedEvent="ItemsControl.DragLeave"> 
      <EventTrigger.Actions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation Storyboard.TargetName="OrFilterContentType" 
              Storyboard.TargetProperty="(Brush.Opacity)" 
              From="1" 
              To="0" 
              Duration="0:0:0.7" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger.Actions> 
     </EventTrigger> 
     <EventTrigger RoutedEvent="ItemsControl.Drop"> 
      <EventTrigger.Actions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation Storyboard.TargetName="OrFilterContentType" 
              Storyboard.TargetProperty="(Brush.Opacity)" 
              From="1" 
              To="0" 
              Duration="0:0:0.7" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger.Actions> 
     </EventTrigger> 
    </ItemsControl.Triggers> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <WrapPanel Orientation="Horizontal" 
         Background="Transparent"> 
       <i:Interaction.Behaviors> 
        <ei:FluidMoveBehavior AppliesTo="Children" 
              Duration="0:0:0.3"> 
         <ei:FluidMoveBehavior.EaseY> 
          <BackEase EasingMode="EaseIn" 
             Amplitude="0.1" /> 
         </ei:FluidMoveBehavior.EaseY> 
        </ei:FluidMoveBehavior> 
       </i:Interaction.Behaviors> 
      </WrapPanel> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
</ItemsControl> 
関連する問題