Анимация в видимости от скрытого до рушившегося и наоборот

Я пытаюсь добиться чего-то похожего на вид сообщения iPhone. При нажатии кнопки кнопка удаления будет выходить за каждое сообщение, а при нажатии "сделать" кнопки удаления будут перемещаться. Я смог добиться этого с помощью mvvm, кроме эффекта скольжения. Вот стиль, который я мог бы написать с моим ограниченным знанием:

<Style TargetType="Border">
    <Style.Triggers>
        <DataTrigger Binding="{Binding ShowDeleteButton}" Value="false">
            <Setter Property="Visibility" Value="Collapsed"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

Здесь "ShowDeleteButton" - это свойство bool в модели представления. Это прекрасно работает. но рушится и "становится видимым" происходит внезапно и очень быстро. Мне нужна скользящая анимация. Обратите внимание, что по мере удаления кнопок удаления остальные элементы управления должны занимать остальное пространство, и, когда кнопка появляется, существующие элементы управления должны сокращаться и давать пространство кнопкам. Я пробовал с анимацией раскадровки, но даже через пару часов я не могу понять странные ошибки, которые он бросает. Вот код:

<DataTrigger Binding="{Binding ShowDeleteButton}" Value="false">
     <DataTrigger.EnterActions>
          <BeginStoryboard>
               <Storyboard BeginTime="0:0:1">
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visiblity">
                     <DiscreteObjectKeyFrame Value="{x:Static Visibility.Collapsed}" />
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
           </BeginStoryboard>
      </DataTrigger.EnterActions>
      <DataTrigger.ExitActions>
            <BeginStoryboard>
               <Storyboard BeginTime="0:0:1">
                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visiblity">
                     <DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}" />
                 </ObjectAnimationUsingKeyFrames>
               </Storyboard>
            </BeginStoryboard>
      </DataTrigger.ExitActions>
</DataTrigger>

Кто-нибудь может помочь душе в беде?

рассматривает

Ответы

Ответ 1

Старый вопрос... да...

В любом случае... забудьте о видимости. Трюк состоит в том, чтобы анимировать Width/Height элемента управления, помещенного в Grid Column/Row, где Column/Row имеет Ширина, установленный на Авто. Uff:)

Итак, вот Grid с именем "container" с двумя столбцами. В первом столбце можно поместить все, что хотите, но вы должны выровнять его вправо, так как вы хотите, чтобы он перемещался, когда отображается кнопка удаления. А во втором столбце есть элемент управления (представляющий ваш DeleteButton). Обратите внимание, что первый столбец имеет Width="*", а второй столбец имеет Width="Auto"

<Grid Background="Purple" Width="350" Height="100">
    <CheckBox Content="Show" IsChecked="{Binding Path=ShowDeleteButton}" Height="16" HorizontalAlignment="Left" Margin="12,12,0,0" Name="checkBox1" VerticalAlignment="Top" />
    <Grid x:Name="container" Margin="40,0,0,0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid Name="content" Margin="0">
            <Label Content="Look I'm flyin'!" Margin="0,30,10,0" VerticalAlignment="Top" HorizontalAlignment="Right"/>
        </Grid>
        <Control Grid.Column="1" Margin="0">
            <Control.Template>
                <ControlTemplate>
                    <ControlTemplate.Triggers>
                        <DataTrigger Binding="{Binding ShowDeleteButton}" Value="true">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation 
                                Storyboard.TargetName="flyout"
                                Storyboard.TargetProperty="(Grid.Width)" 
                                From="0" To="120" Duration="0:0:1" AutoReverse="False"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation 
                                Storyboard.TargetName="flyout"
                                Storyboard.TargetProperty="(Grid.Width)" 
                                From="120" To="0" Duration="0:0:1" AutoReverse="False"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.ExitActions>
                        </DataTrigger>
                    </ControlTemplate.Triggers>
                    <Grid x:Name="flyout" Width="0">
                        <Rectangle Fill="Green"/>
                        <Label Content="I'm DELETE button" Margin="10,30,0,0" VerticalAlignment="Top"/>
                    </Grid>
                </ControlTemplate>
            </Control.Template>
        </Control>
    </Grid>
</Grid>

И второй столбец Control в таблице Grid имеет DataTrigger на основе вашего свойства ViewModel "ShowDeleteButton"

Так как столбец Width, где размещен Control, есть Auto, вы можете изменить ширину Control с помощью простого DoubleAnimation, и вы получите желаемое поведение.

ИЗМЕНИТЬ

Посмотрите на это, если вы хотите, чтобы всплывающее окно было над всем остальным.

<Grid x:Name="LayoutRoot">
    <Grid x:Name="container" Width="120" HorizontalAlignment="Right">
            <Button x:Name="button" Content="In" Margin="0,13,7.5,0" VerticalAlignment="Top" HorizontalAlignment="Right" d:LayoutOverrides="HorizontalAlignment">
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation 
                                    Storyboard.TargetName="flyout"
                                    Storyboard.TargetProperty="(Grid.Width)" 
                                    From="0" To="120" Duration="0:0:1" AutoReverse="False"/> 
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Button.Triggers>
            </Button>
    </Grid>
    <Grid x:Name="flyout" Width="120" Margin="0" HorizontalAlignment="Right">
            <Rectangle Fill="Green"/>
            <Label Content="This is some label" Margin="6.038,27,1.006,0" VerticalAlignment="Top"/>
            <Button Content="Out" Margin="11.917,58,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="80.083">
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation 
                                    Storyboard.TargetName="flyout"
                                    Storyboard.TargetProperty="(Grid.Width)" 
                                    From="120" To="0" Duration="0:0:1" AutoReverse="False"/> 
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Button.Triggers>
            </Button>
        </Grid>
</Grid>

Обратите внимание, что при перемещении можно нажать кнопку "Выход". Вероятно, он должен быть отключен. Я просто сделал это так, потому что я хотел сделать это просто и все в xaml. Конечно, вы можете использовать махаппы. Или вы можете просто сделать это так быстро, как в MahApps, и невозможно дважды щелкнуть по нему.:) Я посмотрел на MahApps FlyOutDemo, и мое решение выглядит намного проще для меня. И мне не нужна сторонняя библиотека.