WPF - Анимированный пользовательский контроль

Question

Привет

В настоящее время я делаю приложение в WPF, так как я довольно новичок в WPF, у меня возникают некоторые трудности. Я погуглил мой вопрос, но без особого успеха. Это текущая ситуация, XAML главного окна ниже:

<Grid Height="279" HorizontalAlignment="Left" Margin="166,0,0,0" Name="gridScoreboard" VerticalAlignment="Top" Width="808">
    <!--Scoreboard Image-->
    <Image Source="pack://application:,,,/Images/Style/Scoreboard.png" Width="517" Height="91" HorizontalAlignment="Left" Margin="138,1,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" />

    <Canvas Name="canvasRacePlayer1" Width="14" Height="14" Canvas.Left="33" Canvas.Top="66" Background="Transparent" MouseLeftButtonDown="canvasRacePlayer1_MouseLeftButtonDown" Margin="171,70,623,195" />
    <local:ucRaces HorizontalAlignment="Center" Margin="93,62,632,187" Width="78" Visibility="Hidden" x:Name="ucRacesP1" Height="33" />
</Grid>

Пользовательский элемент управления скрыт с самого начала (ucRaces), при щелчке по небольшому холсту (canvasRacePLayer1) пользовательский элемент управления будет показан. Однако я бы хотел, чтобы этот пользовательский элемент управления «скользил» справа налево от определенной точки. Как будто это стало бы видно небольшими шагами. Я нашел информацию для анимации для прямоугольников и кнопок, но на самом деле не удалось добиться успеха для пользовательских элементов управления.

Заранее спасибо

Answer 1

Если вы собираетесь создавать анимацию для своего проекта WPF, я предлагаю вам использовать Expression Blend. Вы можете разработать свою программу, используя EB, и реализовать ее функциональность, используя Visual Studio. Будет сложно создавать анимацию, писать синтаксис XAML или код C #.

Как бы вы могли анимировать свои элементы управления с помощью EB? Ну, это на самом деле очень просто. Сначала вам нужно открыть существующий проект WPF. Затем перейдите в File -> New Item -> User Control и создайте пользовательский элемент управления. Затем, если вы хотите добавить его в свой проект, переключитесь обратно на проект WPF, открытый в данный момент в EB, и нажмите стрелки вправо (>>) на панели инструментов, расположенной в левой части экрана, и перейдите в Project -> Ваш пользовательский контроль здесь. Теперь вы добавили его в свой проект.

Если вы хотите анимировать пользовательский элемент управления, вы должны добавить StoryBoard к вашей временной шкале. Когда вы находитесь в своем проекте WPF в EB, в разделе Объекты и временная шкала нажмите знак плюса (+) и добавьте новую StoryBoard. Теперь у вас есть временная шкала, которую вам нужно использовать для анимации вашего пользовательского элемента управления. Вы можете разместить атрибуты KeyTime на временной шкале и определить путь, по которому пользовательский элемент управления должен следовать от местоположения A к местоположению B, а также уровень непрозрачности, если вы хотите, чтобы пользовательский элемент управления постепенно становился видимым.

Вы можете добавить еще один пользовательский элемент управления и реализовать его логику для второго пользователя. Expression Blend сделает вашу жизнь проще.

Answer 2

Анимация вашего UserControl не должна сильно отличаться от анимации любого другого объекта WPF: вы можете либо анимировать поля (используя ThicknessAnimation), либо перетащить свой пользовательский элемент управления на свой холст, а затем анимировать Canvas.Left свойство вашего пользовательского элемента управления . В последнем случае позаботьтесь о том, чтобы имя свойства было указано в скобках: Storyboard.TargetProperty="(Canvas.Left)".