ColorAnimation對DataTrigger

TemplateBinding Background屬性我有一個按鈕，一個Template，如下圖所示，ColorAnimation對DataTrigger

<Button>    
     <Button.Style>       
      <Style TargetType="{x:Type Button}">        
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate> 
          <Border BorderBrush="Transparent"> 
           <Path Stretch="Fill" Width="25" Height="25" Fill="{TemplateBinding Background}" > 
            <Path.Data> 
             <RectangleGeometry Rect="10,10 200,140"/> 
            </Path.Data> 
           </Path> 
          </Border> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Style> 
     </Button.Style> 
    </Button>

我試圖動畫上DataTrigger的Background在Style像下面，

<Style.Triggers> 
    <DataTrigger Binding="{Binding IsNoteOpen}" Value="true"> 
     <DataTrigger.EnterActions> 
       <BeginStoryboard x:Name="Sb1"> 
        <BeginStoryboard.Storyboard> 
         <Storyboard> 
         <ColorAnimation 
          Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" 
          From="White" To="Red" Duration="0:00:0.3" AutoReverse="True"/> 
         </Storyboard> 
        </BeginStoryboard.Storyboard> 
       </BeginStoryboard> 
      </DataTrigger.EnterActions> 
      <DataTrigger.ExitActions> 
       <StopStoryboard BeginStoryboardName="Sb1"/> 
      </DataTrigger.ExitActions> 
     </DataTrigger> 
    </Style.Triggers>

但它沒有得到動畫DataTrigger。任何幫助

來源

2016-04-28 Abin Mathew

將'（Button.Background）'改爲'（Path.Fill）'，刪除'From'，我不確定你想要AutoReverse –

好吧，我會採取實際的外觀，而不是略讀（我的壞習慣）和'RepeatBehavior'就是重複這個行爲。 AutoReverse會否定自己，也就是白色到紅色，然後是紅色到白色。無論如何，一秒鐘讓我完成我目前的工作，並擺動回來。 –

解決方案很簡單，將'DataTrigger'放置在'ControlTemplate'內，即'。 '。 HTH – XAMlMAX

這裏是我做了什麼：

<Style TargetType="Button" x:Key="MainTilesButton"> 
     <Setter Property="Background" Value="#CCF5F5F5"/><!--This is background colour with opcaity defined--> 
     <Setter Property="Margin" Value="20"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Border x:Name="border" Background="{TemplateBinding Background}" Style="{StaticResource part_ButtonBorder}"> 
         <Border.RenderTransform> 
          <RotateTransform/> 
         </Border.RenderTransform> 
         <ContentPresenter VerticalAlignment="Center" 
          HorizontalAlignment="Center" 
          TextBlock.FontFamily="Segoe UI Semibold" 
          TextBlock.TextAlignment="Justify" 
          TextBlock.FontSize="26.667"/> 
        </Border> 
        <ControlTemplate.Triggers> 
         <EventTrigger RoutedEvent="MouseEnter"> 
          <BeginStoryboard> 
           <Storyboard> 
            <!--<DoubleAnimation Storyboard.TargetProperty="(Rectangle.RenderTransform).(RotateTransform.Angle)" To="-360" Duration="0:0:1" RepeatBehavior="Forever"/>--> 
            <ThicknessAnimation Storyboard.TargetProperty="Margin" To="10" Duration="0:0:0.2"/> 
             <ColorAnimation 
              Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" 
              From="White" To="ForestGreen" Duration="0:00:0.3" AutoReverse="True"/> 
           </Storyboard> 
          </BeginStoryboard> 
         </EventTrigger> 
         <EventTrigger RoutedEvent="MouseLeave"> 
          <BeginStoryboard> 
           <Storyboard> 
            <ThicknessAnimation Storyboard.TargetProperty="Margin" To="20" Duration="0:0:0.2"/> 
           </Storyboard> 
          </BeginStoryboard> 
         </EventTrigger> 
         <Trigger Property="IsPressed" Value="True"> 
          <Setter TargetName="border" Property="Background" Value="Red"/> 
         </Trigger> 
         <!--<EventTrigger RoutedEvent="Loaded"> 
          <BeginStoryboard> 
           <Storyboard> 
            <ThicknessAnimation Storyboard.TargetProperty="Margin" To="20" Duration="0:0:0.2"/> 
           </Storyboard> 
          </BeginStoryboard> 
         </EventTrigger>--> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>

我已經包含在那裏你Storyboard和測試它。我可以確認這是在我的電腦上工作。
BTW，這是part_ButtonBorder：

<Style TargetType="Border" x:Key="part_ButtonBorder"> 
    <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/> 
    <Setter Property="CornerRadius" Value="30"/> 
</Style>

編輯
我在XAML中使用路徑試圖和它的作品如預期，路徑填充設置爲按鈕的背景，原因，你可能沒有看到它是因爲路徑顏色將與按鈕的背景相同。
這是包含路徑的代碼片段，請注意路徑中已定義了筆畫，以便您可以看到它的輪廓。

<Style TargetType="Button" x:Key="MainTilesButton"> 
    <Setter Property="Background" Value="#CCF5F5F5"/> 
    <!--This is background colour with opcaity defined--> 
    <Setter Property="Margin" Value="20"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="Button"> 
       <Border x:Name="border" Background="{TemplateBinding Background}" Style="{StaticResource part_ButtonBorder}"> 
        <Border.RenderTransform> 
         <RotateTransform/> 
        </Border.RenderTransform> 
        <StackPanel> 
         <ContentPresenter VerticalAlignment="Center" 
          HorizontalAlignment="Center" 
          TextBlock.FontFamily="Segoe UI Semibold" 
          TextBlock.TextAlignment="Justify" 
          TextBlock.FontSize="26.667"/> 
         <Path Fill="{TemplateBinding Background}" Stroke="Black" StrokeThickness="1" Data="m 193.2 112.7 -0.3 0.3 -0.6 0 -0.6 -0.3 -2.1 -2.1 -0.3 0 c -1.5 1.5 -3.5 2.6 -7.1 2.6 -4.1 0 -6.8 -2.6 -6.8 -6.2 0 -3.2 2.1 -5 4.4 -5.9 l 0 -0.3 c -0.9 -0.9 -2.1 -2.4 -2.1 -4.4 0 -2.1 1.2 -4.4 4.7 -4.4 3.2 0 4.4 2.4 4.4 4.1 0 3.2 -2.1 4.4 -3.8 5.3 l 0 0.3 5.9 5.9 0.3 0 c 0.6 -1.2 0.9 -2.9 0.9 -5.9 l 0.3 -0.3 1.2 0 0.3 0.3 c 0 3.5 -0.6 5.6 -1.5 7.1 l 0 0.3 2.6 2.6 0 1 z m -5 -3.6 -6.8 -6.8 -0.3 0 c -2.6 0.9 -3.8 2.4 -3.8 4.7 0 2.6 1.8 4.7 5 4.7 2.6 0 4.7 -0.9 5.9 -2.4 l 0 -0.2 z m -5.6 -15.6 c -2.1 0 -2.9 1.2 -2.9 2.9 0 1.5 0.6 2.4 2.1 3.8 l 0.6 0 c 1.8 -0.9 2.9 -1.8 2.9 -3.8 -0.1 -1.4 -0.7 -2.9 -2.7 -2.9 z"/> 
        </StackPanel> 
       </Border> 
       <ControlTemplate.Triggers> 
        <EventTrigger RoutedEvent="MouseEnter"> 
         <BeginStoryboard> 
          <Storyboard> 
           <!--<DoubleAnimation Storyboard.TargetProperty="(Rectangle.RenderTransform).(RotateTransform.Angle)" To="-360" Duration="0:0:1" RepeatBehavior="Forever"/>--> 
           <ThicknessAnimation Storyboard.TargetProperty="Margin" To="10" Duration="0:0:0.2"/> 
           <ColorAnimation 
            Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" 
            From="White" To="ForestGreen" Duration="0:00:0.3" /> 
          </Storyboard> 
         </BeginStoryboard> 
        </EventTrigger> 
        <EventTrigger RoutedEvent="MouseLeave"> 
         <BeginStoryboard> 
          <Storyboard> 
           <ThicknessAnimation Storyboard.TargetProperty="Margin" To="20" Duration="0:0:0.2"/> 
          </Storyboard> 
         </BeginStoryboard> 
        </EventTrigger> 
        <Trigger Property="IsPressed" Value="True"> 
         <Setter TargetName="border" Property="Background" Value="Red"/> 
        </Trigger> 
        <!--<EventTrigger RoutedEvent="Loaded"> 
        <BeginStoryboard> 
         <Storyboard> 
          <ThicknessAnimation Storyboard.TargetProperty="Margin" To="20" Duration="0:0:0.2"/> 
         </Storyboard> 
        </BeginStoryboard> 
       </EventTrigger>--> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>

一件事看出來的是路徑它的自我，我已經注意到，我現在用的就是定位非常低，因此，當你想看到它，你需要拉伸窗口那麼一點點的一個你可以看到它。

來源

2016-04-29 08:14:28 XAMlMAX

我認爲問題在'TemplateBinding'內，你是否嘗試過將'RelativeSource'與'（Button.Background）。（SolidColorBrush.Color）'結合起來？ – XAMlMAX

對不起，我沒有標記你@AbinMathew。 – XAMlMAX

@AbinMathew請參閱我的編輯。 – XAMlMAX

ColorAnimation對DataTrigger

回答

相關問題