动画宽度WPF左片面

我有一个Grid这我能以动画方式如下：动画宽度WPF左片面

Normal state image right

当我点击图片，我可以用一个Storyboard动画我的按钮的模板就像我想成长为这样的结果：

enter image description here

这将是结果或多或少。动画看起来是这样的：

<Storyboard x:Key="ExpandPanelRight"> 
    <DoubleAnimation 
     Storyboard.TargetName="ExpandablePanel" 
     Storyboard.TargetProperty="Width" 
     BeginTime="0:0:0" 
     From="0" To="450" Duration="0:0:0.5"></DoubleAnimation> 
</Storyboard>

正如你所看到的，没有任何问题，而日益从左至右电网，但我真正想要的是相反：扩大从右网格至左：

enter image description here

它会怎么样？我找不到答案。

来源

2014-09-03 Sonhja

不要以为解决方案是在你的动画中，而是在你的网格布局。某处HorizontalAlignment =“正确”必须发挥作用。 – 2014-09-03 14:40:08

您只需将您的垃圾箱Image对准您的ExpandablePanel的右边缘即可。完成之后，Image将会在Panel的Width增加时粘在右侧。您的Storyboard和DoubleAnimation代码可以保持不变。你的代码应该是这样的：

<Border CornerRadius="10" Background="Blue"> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition /> 
      <ColumnDefinition Width="Auto" /> 
     </Grid.ColumnDefinitions> 
     <TextBlock Text="Expanding...." VerticalAlignment="Center" /> 
     <Image Source="Images/Bin.png" VerticalAlignment="Center" HorizontalAlignment="Right" /> 
    </Grid> 
</Border>

来源

2014-09-03 14:46:39 Sheridan

它可以是解决方案，但我的不是'Expander'，它是一个包含一些元素的网格...您是否建议为此使用'Expanders'而不是'Grid'？ – Sonhja 2014-09-03 15:17:13

没有必要使用'Expander'控件。任何控件的“宽度”都可以动画。 *如果*您正在使用上面的代码，则可以轻松地为“Border.Width”设置动画效果。 – Sheridan 2014-09-03 15:20:26

完美！这就是！谢谢！！ – Sonhja 2014-09-03 15:31:00

动画宽度WPF左片面

回答

相关问题