动画能见度从隐藏的折叠，反之亦然 [英] Animation in visibility from hidden to collapsed and vice versa
问题描述
我想实现类似于iPhone的消息视图东西。点击一个按钮，删除按钮将滑出了每封邮件和点击完成删除按钮会在下滑。我已经能够实现，使用MVVM除了在滑动的效果。
这里是我可以用我有限的知识编写方式：
I am trying to achieve something similar to iPhone message view. On a button click, a delete button would slide out for every message and on clicking "done" the delete buttons would slide in. I have been able to achieve that using mvvm except the sliding effect. Here is the style I could write with my limited knowledge:
<Style TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding ShowDeleteButton}" Value="false">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
下面的ShowDeleteButton是在视图模型一个布尔值属性。这工作得很好。但塌陷和越来越明显的突然和非常快的发生。我需要一些滑动动画。
请注意，由于删除按钮消失，控制的其余部分应占用的空间休息，作为按钮出现，现有的控制应该收缩到按钮给予空间。
我试着用故事板的动画，但即使是几个小时，我无法找出奇怪的错误是扔了。这里是code：
Here "ShowDeleteButton" is a bool property in the view model. This works fine. but the collapsing and "getting visible" is happening abruptly and very fast. I need some sliding animation. Please note that as the delete buttons disappear, the rest of the controls should take up the rest of space and, as the button appear, the existing controls should shrink and give space to the buttons. I tried with storyboard animation but even after a couple hours I am not able to figure out the strange errors it is throwing. Here is the code:
<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>
有人可以帮助灵魂在危难？
Can someone please help the soul in distress?
关于
推荐答案
老问题...呵呵...
Old question... huh...
反正...忘了知名度。诀窍是动画宽度/高度放在控制Grid的列/行其中
Anyway... forget about visibility. The trick is to animate Width/Height of the Control placed in Grid's Column/Row where the Column/Row has Width set to Auto. Uff :)
因此，这里是一个电网命名为集装箱有两列。在第一列可以放在任何你想要的，但你应该把它调整到右，因为你想显示你的删除按钮，当它移动。而在第二列是有控制的（重presenting你DeleteButton）的注意，第一列 WIDTH =*和第二列 WIDTH =自动
So here is a Grid named "container" with two columns. In the first column can be placed whatever you want, but you should align it to Right since you want it to move when your delete button is displayed. And in the second column there is a Control (representing your DeleteButton) Notice that first column has Width="*" and second column has 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>
在网格的第二列中的 和/ EM> And the 由于列其中 Since the 修改 看这个，如果你想在弹出来结束一切。 Look at this if you want the flyout to be over everything else. 请注意，按钮内外兼修可以点击，而它的移动。应当可能禁用。我只是做它像这样因为我想这样做简单，所有在XAML。当然你可以使用mahapps。或者你也可以让它尽可能快地在MahApps，这是不可能的，点击它两次。 :)我已经看过MahApps FlyOutDemo和我的解决方案看起来简单得多给我。而我不需要第三方库。 Please note that button "Out" can be clicked while it's moving. It should be probably disabled. I just did it like this because I wanted to do it simple and all in xaml. Sure you can use mahapps. Or you can just make it as fast as it is in MahApps and it's impossible to click it twice. :) I have looked at MahApps FlyOutDemo and my solution looks much simpler to me. And I don't need third party library. 这篇关于动画能见度从隐藏的折叠，反之亦然的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！控制已根据您的视图模型的财产的的ShowDeleteButton< DataTrigger Control in Grid's second column has DataTrigger based on your ViewModel's property "ShowDeleteButton"控制放置在宽度 自动您可以使用修改控制的宽度简单的 DoubleAnimation是，你会得到期望的行为。Width of column where the Control is placed is Auto you can change the width of the Control using simple DoubleAnimation and you get desired behavior.<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>
