Главная » Разработка для Windows Phone 7 » Щелчок и разворот Windows Phone 7

0

Предположим, требуется расширить функциональность кнопки и обеспечить дополнительную визуальную обратную связь пользователю. Решено сделать обратную связь очень эффектной, чтобы она могла разбудить даже сонного пользователя, и поэтому кнопка будет вращаться по кругу при каждом нажатии.

XAML-файл описывает несколько кнопок:

Проект Silverlight: ClickAndSpin Файл: MainPage.xaml (фрагмент)

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Grid.RowDefinitions>

<RowDefinition Height="*" /> <RowDefinition Height="*" /> <RowDefinition Height="*" /> </Grid.RowDefinitions>

<Button Content="Button No. 1" Grid.Row="0"

HorizontalAlignment="Center"

VerticalAlignment="Center" RenderTransformOrigin="0.5 0.5" Click="OnButtonClick"> <Button.RenderTransform>

<RotateTransform /> </Button.RenderTransform> </Button>

<Button Content="Button No. 2" Grid.Row="1"

HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5 0.5" Click="OnButtonClick"> <Button.RenderTransform>

<RotateTransform /> </Button.RenderTransform> </Button>

<Button Content="Button No. 3" Grid.Row="2"

HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5 0.5" Click="OnButtonClick"> <Button.RenderTransform>

<RotateTransform /> </Button.RenderTransform> </Button> </Grid>

Свойству RenderTransform каждой из кнопок задан RotateTransform, и в качестве RenderTransformOrigin задан центр элемента.

Обработчик события Click отвечает за определение и запуск анимации вращения нажатой кнопки. (Конечно, в реальном приложении обработчик Click также осуществлял бы какие-то важные операции!) Вначале обработчик получает объект Button, которого коснулся пользователь, и RotateTransform, ассоциированный с этим конкретным Button:

Проект Silverlight: ClickAndSpin Файл: MainPage.xaml.cs (фрагмент)

void OnButtonClick(object sender, RoutedEventArgs args) {

Button btn = sender as Button;

RotateTransform rotateTransform = btn.RenderTransform as RotateTransform;

// Создаем и описываем анимацию DoubleAnimation anima = new DoubleAnimation(); anima.From = 0; anima.To = 360;

anima.Duration = new Duration(TimeSpan.FromSeconds(0.5));

// Задаем присоединенные свойства Storyboard.SetTarget(anima, rotateTransform); Storyboard.SetTargetProperty(anima, new PropertyPath(RotateTransform.AngleProperty));

// Создаем раскадровку, добавляем анимацию и запускаем ее! Storyboard storyboard = new Storyboard(); storyboard.Children.Add(anima); storyboard.Begin();

}

Реализация анимации в приложении включает три этапа:

1.       Определение самой анимации. Целью необходимой здесь анимации будет свойство

Angle объекта RotateTransform. Поскольку свойство Angle типа double, используем DoubleAnimation:

DoubleAnimation anima = new DoubleAnimation(); anima.From = 0; anima.To = 360;

anima.Duration = new Duration(TimeSpan.FromSeconds(0.5));

DoubleAnimation будет изменять свойство типа от значения 0 до значения 360 за У секунды. Свойство Duration (Продолжительность) объекта DoubleAnimation типа Duration. В коде его принято задавать на основании объекта TimeSpan, но свойство Duration не типа TimeSpan (главным образом, так сложилось исторически). В качестве альтернативы свойству Duration можно задать статическое значение Duration.Automatic, что равноценно незаданию этого свойства (или заданию значения null) и обеспечивает создание анимации продолжительностью 1 секунда.

2.       Задание присоединенных свойств. DoubleAnimation должен быть ассоциирован с

конкретным объектом и свойством этого объекта. Для этого используются два присоединенных свойства, определенных классом Storyboard (Раскадровка):

Storyboard.SetTarget(anima, rotateTransform); Storyboard.SetTargetProperty(anima, new PropertyPath(RotateTransform.AngleProperty));

Этими присоединенными свойствами являются Target и TargetProperty (Целевое свойство). Как помните, при задании присоединенных свойств в коде используются статические методы, начинающиеся со слова Set.

В обоих случаях первым аргументом является только что созданный DoubleAnimation. Вызов SetTarget (Задать цель) указывает на объект, к которому будет применяться анимация (в данном случае это RotateTransform), и вызов SetTargetProperty (Задать целевое свойство) указывает на свойство этого объекта. Второй аргумент метода SetTargetProperty типа PropertyPath (Путь к свойству). Как видите, я указал полностью определенное свойство-зависимость для свойства Angle объекта RotateTransform.

3.       Определяем, задаем и запускаем Storyboard.

На данный момент, кажется, все готово, но необходимо сделать еще один шаг. В Silverlight анимации всегда заключены в объекты Storyboard. У отдельного Storyboard может быть множество потомков, поэтому с его помощью очень удобно синхронизировать множество анимаций. Но даже если требуется реализовать всего одну независимо выполняющуюся анимацию, все равно понадобится Storyboard:

Storyboard storyboard = new Storyboard();

storyboard.Children.Add(anima);

storyboard.Begin();

Вызов метода Begin объекта Storyboard выполнен, и теперь любая кнопка после нажатия делает полный оборот за полсекунды, что обеспечивает, вероятно, слишком интенсивную визуальную обратную связь для пользователя.

Источник: Чарльз Петзольд, Программируем Windows Phone 7, Microsoft Press, © 2011.

По теме:

  • Комментарии