Question

我有一个带有滑出式面板的Silverlight UI。单击一个按钮时，我希望面板能够平滑地显示动画，宽度从0变为自动。有没有办法做到这一点（理想情况下使用纯XAML）？

Answer 1

无法为自动值设置动画，但作为解决方法，您可以使用VisualStateManager和FluidLayout执行以下步骤： - 在Expression Blend中添加状态组 - 添加初始状态 - 添加最终状态 - 将可见度更改为Blend in Blend - 启用FluidLayout - 编写代码以在状态之间切换 - 这将使用自定义VisualStateManager显示元素的宽度，高度和不透明度的动画 - 您可以编写自己的自定义状态管理器来控制离散状态之间的转换

Answer 2

为什么不给动画最大宽度？不要以为你能够动画到自动

Answer 3

哇真的让我想到了:)但我相信我找到了一个可以使用的解决方法。您将需要一个转换器，但它是C＃中您需要的唯一代码 - 其余的是纯XAML。

我根据您的输入重建了一些XAML：

<Grid
    VerticalAlignment="Center"
    HorizontalAlignment="Left"
    Background="Lime"
    x:Name="m_Grid">
    <Grid.RenderTransform>
        <CompositeTransform
            TranslateX="{Binding ActualWidth, Converter={StaticResource InverseTranslateXConverter}, ElementName=m_Grid}" />
    </Grid.RenderTransform>
    <Button
        x:Name="m_Button"
        Margin="50"
        Content="Hello World" />
</Grid>

所以我所做的实际上只是将滑块包裹在网格中并将TranslateX属性设置为内容的ActualWidth * -1（使用转换器完成）：

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
    double d = 0;
    if (double.TryParse(value.ToString(), out d))
    {
        return d * -1;
    }

    return value;
}

要显示它（滑入）我使用一个简单的动画：

<UserControl.Resources>
<Storyboard
    x:Name="Storyboard1">
    <DoubleAnimation
        x:Name="m_Animation"
        Duration="0:0:0.2"
        To="0"
        Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
        Storyboard.TargetName="m_Grid"
        d:IsOptimized="True" />
</Storyboard>

它不漂亮，但它有效：）

[编辑]刚刚删除了外网 - 这是无关紧要的。

动画Silverlight UI元素宽度从0到自动，流畅

3 个答案: