WPF анимация ширины границы

У меня есть док-панель на моем интерфейсе следующим образом:

<DockPanel>
    <Border DockPanel.Dock="Top">Header</Border>
    <Border DockPanel.Dock="Bottom">My footer</Border>
    <Border DockPanel.Dock="Left">Menu</Border>

    <Border>Content</Border>
 </DockPanel>

Что я хочу сделать, так это иметь анимацию раскадровки, чтобы показать/скрыть меню с левой стороны. У меня есть граница для увеличения ширины при загрузке, но мне нужен способ закрыть/повторно открыть ее. Мне нужна где-то кнопка, но я хочу, чтобы она запускала анимацию в пограничном контроле, а не сама по себе. В идеале я думал о чем-то вроде Toolbox/Server Explorer в Visual Studio.

Есть ли у кого-нибудь указатели/примеры для начала работы?

Спасибо


animation border wpf
person Dave Perry    schedule 19.02.2010    source источник
comment
Вы действительно должны голосовать / принимать ответы, которые полезны :-)   -  person Steven Robbins    schedule 19.02.2010

Ответы (1)


arrow_upward
3
arrow_downward

Я не уверен, что понимаю, что вы имеете в виду, но если вы хотите анимировать его, то вы, вероятно, захотите обновить его ширину? Если у вас есть свойство в ViewModel/PresentationModel, к которому вы можете привязаться, вы можете сделать что-то вроде:

<DataTrigger Binding="{Binding IShouldBeVisible}" Value="True">
    <DataTrigger.EnterActions>
        <BeginStoryboard>
            <Storyboard AccelerationRatio="0.4" DecelerationRatio="0.4">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Width)">
                    <SplineDoubleKeyFrame KeyTime="00:00:0.13" Value="100"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </BeginStoryboard>
    </DataTrigger.EnterActions>
    <DataTrigger.ExitActions>
        <BeginStoryboard>
            <Storyboard AccelerationRatio="0.4" DecelerationRatio="0.4">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Width)">
                    <SplineDoubleKeyFrame KeyTime="00:00:0.1" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </BeginStoryboard>
    </DataTrigger.ExitActions>
</DataTrigger>

Если вы делаете сложную анимацию, которая изменяет несколько свойств, разные тайминги и т. д., то это гораздо проще собрать в Blend, даже если вы делаете это в тестовом проекте, а затем вырезаете + вставляете полученную раскадровку :-)

person Steven Robbins    schedule 19.02.2010
comment
Да, я думал, что мне придется изменить ширину. Посмотри, что ты имеешь в виду под триггером. Спасибо, это похоже на хорошее начало для меня. В Бленде не пробовал, может тоже попробую. благодаря. - person Dave Perry; 19.02.2010