Анимация размера триггера при переключении - PullRequest
Новая
       42

Анимация размера триггера при переключении

2 голосов
/ 19 марта 2012

Я пытаюсь переключить анимацию по высоте, когда нажимается кнопка «Показать детали» / «Скрыть детали», а затем снова возвращается к исходному значению при повторном нажатии кнопки.

У меня есть DataControls: DataForm с предопределенным стилем для начала, и я хочу, чтобы свойство "Height" анимировалось в большее значение при нажатии кнопки.

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}"/> 
...

Я только заставил это сработать с помощью ярлыка «Показать подробности» и 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, так что прости меня, если я что-то оставил здесь. Я не могу добавить новый пользовательский стиль в DataForm, поскольку он уже использует общий стиль, поэтому он также не позволит мне использовать атрибут «BasedOn».

Самое близкое, что у меня есть, это анимация высоты кнопки, если бы я мог вместо этого анимировать свойство высоты DataForm.

Заранее спасибо

1 Ответ

4 голосов
/ 21 марта 2012

После нескольких часов осмотра я нашел простое решение моей, как мне казалось, сложной проблемы.

<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» с помощью любого из моих известных методов привязки.

Так что это должно было быть размещено вне DataForm.

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

Источники моего решения: WPF: как запустить EventTrigger (или анимацию) при изменении привязки? WPF - Изменение содержимого кнопки ToggleButton при установленном флажке

...