Анимация ширины элемента пользовательского интерфейса Silverlight от 0 до авто, плавно

Question

У меня есть интерфейс Silverlight с выдвижной панелью.Когда кнопка нажата, я бы хотел, чтобы панель плавно анимировалась с шириной от 0 до Авто.Есть ли способ сделать это (в идеале с чистым XAML)?

Answer 1

Невозможно анимировать значения Auto, но в качестве обходного пути вы можете использовать VisualStateManager и FluidLayout со следующими шагами: - Добавить группу состояний в Expression 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>

Это не красиво, но работает:)

[ПРАВИТЬ] Просто удалил внешнюю сетку - это было неестественно.