2012-03-19 73 views
2

當按鈕「顯示詳細信息」/「隱藏詳細信息」被點擊後,當再次點擊該按鈕時回到其初始值,我試圖在高度上切換動畫。在觸發器上觸發大小動畫

我有一個DataControls:用的DataForm預定義的風格,開始時,我想在單擊按鈕時「高度」 - 屬性動畫到一個較大的值。

DataControl:Dataform看起來像這樣。

<DataControls:DataForm x:Name="DataEdit" 
          Grid.Row="1" 
          ItemsSource="{Binding}" 
          Style="{DynamicResource CommonDataFormStyle}" 
          ContentLoaded="OnContentLoaded" 
          Height="150"> 

按鈕本身就是這樣的DataForm內部。

<DataControls:DataForm.ReadOnlyTemplate> 
    <DataTemplate>   
     <Grid> 
      <Grid.RowDefinitions>... 
       <StackPanel Grid.Column="0" Grid.Row="0">    
        <Button Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl} }, Path=DataContext.ToggleDetailsCommand, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" x:Name="ToggleDetailsButton"          
          Content="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl} }, Path=DataContext.ToggleDetailsButtonText}"/> 
... 

我只得到了這個由usina一個名爲「顯示詳細信息」標籤和一個EventTrigger爲RoutedEvent =「Label.MouseLeftButtonDown」工作的一個標籤上展開細節。 然後有另一個名爲「隱藏詳細信息」的標籤再次將動畫歸檔。

我有阿爾斯托試圖把這種風格的按鈕和數據觸發器試圖切換動畫。但是,不管StoryBoard.Target =「{Binding ElementName = DataEdit}」屬性如何,該按鈕的高度都是動畫效果。

<Style TargetType="{x:Type Button}" x:Key="ExpandDetailsStyle" >    
     <Style.Triggers> 
      <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl} }, Path=DataContext.IsOpened}" Value="true"> 
       <DataTrigger.EnterActions> 
        <StopStoryboard BeginStoryboardName="EndAnimation" /> 
        <BeginStoryboard Name="NewAnimation"> 
         <Storyboard> 
          <DoubleAnimation Storyboard.Target="{Binding ElementName=DataEdit}" Storyboard.TargetProperty="Height" From="150" To="300" Duration="0:0:0.1" /> 
         </Storyboard> 
        </BeginStoryboard> 
       </DataTrigger.EnterActions> 
       <DataTrigger.ExitActions> 

       </DataTrigger.ExitActions> 

      </DataTrigger> 
      <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl} }, Path=DataContext.IsOpened}" Value="false"> 
       <DataTrigger.EnterActions> 
        <StopStoryboard BeginStoryboardName="NewAnimation" /> 
        <BeginStoryboard Name="EndAnimation"> 
         <Storyboard> 
          <DoubleAnimation Storyboard.Target="{Binding ElementName=DataEdit}" Storyboard.TargetProperty="Height" From="300" To="150" Duration="0:0:0.1" /> 
         </Storyboard> 
        </BeginStoryboard> 
       </DataTrigger.EnterActions> 
      </DataTrigger> 

     </Style.Triggers> 
    </Style> 

另外我對WPF來說還是比較新的,所以如果我在這裏留下了一些東西,請原諒我。 林不能因爲它已經使用了共同的風格,換上新的自定義樣式的數據形,它wouldnt讓我用「支持算法FMP」屬性要麼。

我得到的最接近是按鈕高度的動畫,如果我只能得到它,而不是動畫數據形height屬性。

在此先感謝

回答

4

相當長的一段時間後,環顧四周,我發現我的,我的想法,複雜的問題一個簡單的解決方案。

<UserControl.Resources> 
    <Storyboard x:Key="ExpandDetails"> 
     <DoubleAnimation Storyboard.TargetProperty="Height"              
                Storyboard.TargetName="DataEdit" 
                From="120" To="230" Duration="0:0:0.05" /> 
    </Storyboard> 
    <Storyboard x:Key="CollapsDetails"> 
     <DoubleAnimation Storyboard.TargetProperty="Height"              
               Storyboard.TargetName="DataEdit" 
               From="230" To="120" Duration="0:0:0.05" /> 
    </Storyboard>     
    <Style TargetType="{x:Type ToggleButton}" x:Key="ToggleButtonStyle"> 
     <Setter Property="Content" Value="Show Details"/> 
     <Style.Triggers> 
      <Trigger Property="IsChecked" Value="true"> 
       <Setter Property="Content" Value="Hide Details"/> 
      </Trigger> 
     </Style.Triggers> 
    </Style>  
</UserControl.Resources> 


<UserControl.Triggers> 
    <EventTrigger RoutedEvent="ToggleButton.Checked" SourceName="DetailsToggleButton"> 
     <BeginStoryboard Storyboard="{StaticResource ExpandDetails}"/> 
    </EventTrigger> 
    <EventTrigger RoutedEvent="ToggleButton.Unchecked" SourceName="DetailsToggleButton"> 
     <BeginStoryboard Storyboard="{StaticResource CollapsDetails}"/> 
    </EventTrigger> 
</UserControl.Triggers> 

我不能弄清楚如何有因爲示波器這將是它無法找到任何與我已知的結合技術「DataEdit」數據形的在這種情況下,數據表單中的按鈕。

因此,這必須放在數據形之外。

<ToggleButton x:Name="DetailsToggleButton" Style="{StaticResource ToggleButtonStyle}" /> 

源到我的解決方案:
WPF: how to fire an EventTrigger (or Animation) when binding changes?
WPF - Changing the content of a ToggleButton when checked