Применение обложек и анимаций к кнопке

Applies to Windows and Windows Phone

Вы можете анимировать кнопки своего приложения и применять к ним различные обложки. Опишем, как это сделать.

Определить, как будет выглядеть ваше приложение — важная часть работы, и наверняка вы потратили немало времени на то, чтобы придать нужный вид элементу управления UIButton в iOS с помощью PNG-файлов. Тем самым вы решаете, что будет происходить, когда пользователь коснется кнопки: например, она может начать мигать, поменять изображение, измениться в размере или сделать все перечисленное.

Элементы управления "Кнопка" вашего приложения Магазина Windows тоже могут менять свой внешний вид, и вы можете применять к ним пользовательские эффекты анимации. Давайте посмотрим, как создавать эти эффекты на XAML и вызывать их из кода на C# и C++.

Примечание  Дополнительные сведения об анимациях для приложений Магазина Windows на JavaScript и HTML см. в разделе Анимация пользовательского интерфейса.

Применение обложки к элементу управления "Кнопка"

Изменить внешний вид элемента управления "Кнопка" можно несколькими способами. Вот самые распространенные из них:

  • Использование стандартных стилей
  • Использование средств рисования XAML
  • Использование растровых изображений

Рассмотрим эти способы подробнее.

  • Использование стандартных стилей

    Если вы хотите, чтобы ваше приложение следовало стандартным рекомендациям по оформлению приложений для Windows 8, от вас требуется немногое. Существующие кнопки XAML имеют знакомый внешний вид и поведение, а настроив значения нескольких свойств, вы можете изменить цвета, размеры и начертание шрифтов этих кнопок, как показано в статье Краткое руководство: стили элементов управления (приложения Магазина Windows на C#, VB, C++ и XAML). Эти кнопки автоматически масштабируются, чтобы хорошо выглядеть на дисплее любого размера.

    В среде Xcode вы можете использовать системные варианты кнопок "Готово", "ОК", "Отмена" и т. д. В Windows 8 соответствующие кнопки для приложений Магазина Windows хранятся в файле StandardStyles.xaml. Например, так выглядит встроенный стиль кнопки "Воспроизвести", примененный к XAML-кнопке, готовой к использованию на панели приложения:

    Образец кнопки

    Вот весь XAML-код, который потребовался для создания этого стиля:

    
     <Button x:Name="myPlayButton"  Style="{StaticResource PlayAppBarButtonStyle}" />
    
    

    Примечание  Большинство стилей в StaticResource по умолчанию закомментированы. Чтобы воспользоваться ими, откройте файл StandardStyles.xaml, найдите кнопку, которую вы хотели бы использовать, и уберите ее комментарии.

    В приложениях, написанных специально для Windows 8.1, больше нет файла StandardStyles.xaml — вместо этого есть новый тип кнопки, который называется AppBarButton. Например, чтобы создать кнопку "Воспроизведение" в приложении Windows 8.1, понадобится использовать следующий XAML:

    
    <AppBarButton x:Name="myPlayButton" Icon="Play" Label="Play"/>
    
    
  • Использование XAML

    Допустим, ваше приложение проигрывает мультимедиа, и вы хотите создать для него версию кнопки примерно такого вида:

    Образец кнопки

    Эта кнопка состоит из темного фона с градиентом и изображения на переднем плане, представляющего символ воспроизведения. Есть смысл менять изображение на переднем плане, когда пользователь касается кнопки, поэтому разделение основного и фонового изображений представляется разумным подходом.

    Теперь, прежде чем вы приступите к созданию изображений в своем любимом графическом редакторе, посмотрим, как можно достичь того же результата программно. В XAML предусмотрено множество способов рисования, так что вы можете быстро создать фон с градиентной текстурой и основное изображение в виде треугольника. Вот один из способов это сделать:

    
     <Button x:Name="myCoolButton" Height="55" Width="104"  BorderThickness="0" >
                <Grid>
                    <Rectangle Width="104" Height="55">
                        <Rectangle.Fill>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Color="Black" Offset="0.0" />
                                <GradientStop Color="Gray" Offset="0.03" />
                                <GradientStop Color="Black" Offset="0.25" />
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                    <Polygon  Points="25,3,25,39,55,21">
                        <Polygon.Fill>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Color="LightGreen" Offset="0.0" />
                                <GradientStop Color="DarkGreen" Offset="1.0" />
                            </LinearGradientBrush>
                        </Polygon.Fill>
                    </Polygon>
                </Grid>
            </Button>
    
    

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

    Создание кнопки с помощью Blend

  • Использование растровых изображений

    Элемент управления "Кнопка" языка XAML позволяет переопределять свой внешний вид — например если вы хотели бы показывать в нем несколько изображений. Для наложения друг на друга двух объектов (одного фонового изображения и одного изображения переднего плана) используется элемент Grid:

    
      <Button x:Name="myBitMapButton" Height="55" Width="104" BorderThickness="0" >
                <Grid>
                    <Image Source="graduated-button.png"/>
                    <Image Source="play-green.png"/>
                </Grid>
            </Button>
    
    

    Наложить большее количество объектов можно с помощью элемента StackPanel. Например, из нескольких объектов TextBlock можно сделать такую кнопку:

    Образец кнопки

    Вот как выглядит соответствующий код:

    
      <Grid Background="#FF5989A4">
            <Button x:Name="myBitMapButton"   Height="200" Width="104"  BorderThickness="0" Margin="80,34,0,679" >
                <StackPanel Height="86" >
                    <Grid Height="55" VerticalAlignment="Top" >
                        <Image Source="graduated-button.png" Margin="0,16,0,-7"/>
                    <Image Source="play-green.png" Margin="0,16,0,-5"/>
                    <TextBlock Text="Play"  VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="24,0,22,-15"/>
                    </Grid>
                </StackPanel>
            </Button>
    
    

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

Смотрите, пиксели!

Хорошее преимущество XAML — возможность определять шаблоны, которые могут использоваться множеством элементов управления. Допустим, вам хочется создать серию кнопок с одинаковым градиентным фоном, которые выглядели бы примерно так:

Кнопки управления мультимедиа

Вместо того чтобы каждый раз определять градиентный фон, вы можете создать стиль, который будет использовать каждая кнопка. В этом примере такой стиль помещается в XAML-файл страницы, на которой отображаются кнопки, например MainPage.xaml. Он располагается внутри элемента <Page.Resources>:


        <Style x:Name="graduatedButton" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Rectangle>
                                <Rectangle.Fill >
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Color="Black" Offset="0.0" />
                                        <GradientStop Color="Gray" Offset="0.03" />
                                        <GradientStop Color="Black" Offset="0.25" />
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <ContentPresenter />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Обратите внимание на использование тега <ContentPresenter/>, который представляет собой заполнитель для дополнительного содержимого (например, текста или другого изображения). Вот XAML-код, в котором определяется кнопка с использованием нашего нового стиля, а затем добавляется еще один треугольник:


       <Button x:Name="myPlayButton" Style="{StaticResource graduatedButton}"  Height="44" Width="135"  Click="myPlayButton_Click" >
            <Grid>
                 <Polygon Points="50,3,50,39,86,21">
                    <Polygon.Fill>
                     <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                         <GradientStop Color="Yellow" Offset="0.0" />
                         <GradientStop Color="YellowGreen" Offset="0.5" />
                    </LinearGradientBrush>
                </Polygon.Fill>
              </Polygon>
            </Grid>
        </Button>


Анимация кнопки

При написании приложений для iOS анимация элемента управления, например кнопки, обычно заключается в изменении некоторых его свойств внутри блока [UIView beginAnimations]/[UIView commitAnimations]. В приложении Магазина Windows для этого нужно создать объект Storyboard. Объект Storyboard можно рассматривать как сценарий, которому будет следовать элемент управления. Он описывает, как будут меняться во времени свойства объекта. Этот способ идеален для создания анимаций, которые проигрываются при касании кнопки или разворачивании новой панели с информацией.

Примечание  Не путайте термин Storyboard с термином Storyboard в iOS!

Проще всего создать анимацию с помощью Blend. Blend позволяет графическим способом создавать XAML-код раскадровки (Storyboard) а также просматривать получившуюся анимацию в процессе работы.

Сначала мы посмотрим, как добавить одну анимацию к конкретной кнопке, а затем узнаем, как создать стиль анимации, который можно будет применять ко множеству кнопок. Эта анимация будет наклонять кнопку, как будто вы вдавили ее в экран.

Определите кнопку в XAML-файле, как показано здесь:


 <Button x:Name="TiltButton"   BorderThickness="0" Margin="100,0,0,0" >
            <Grid>
                <Rectangle Width="200" Height="100">
                    <Rectangle.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Color="Black" Offset="0.0" />
                            <GradientStop Color="Gray" Offset="0.03" />
                            <GradientStop Color="Black" Offset="0.25" />
                        </LinearGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>
                <Polygon  Points="75,5,75,95,145,50">
                    <Polygon.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Color="LightGreen" Offset="0.0" />
                            <GradientStop Color="DarkGreen" Offset="1.0" />
                        </LinearGradientBrush>
                    </Polygon.Fill>
                </Polygon>
            </Grid>
        </Button>

Получится кнопка такого вида:

Кнопка

Теперь откройте проект в Blend. Выберите наш элемент управления "Кнопка" и щелкните кнопку + в окне Объекты и временная шкала, как показано здесь:

Работа в Blend

Выберите Создать, чтобы создать новый объект раскадровки, и дайте ему имя, например:

Создание нового объекта Storyboard в Blend

Коснитесь кнопки Записать опорный кадр, которая находится слева от индикатора кода времени. Будет создан опорный кадр, в котором все свойства кнопки будут иметь значения по умолчанию. Перетащите желтую линию указателя воспроизведения чуть левее 0,5 секунд. Здесь будет располагаться наш второй (и в данном случае последний) опорный кадр.

Перемещение указателя воспроизведения

Теперь мы можем настроить параметры кнопки, чтобы получить эффект наклона. В разделе Преобразование представления Свойства справа найдите пункт Проекции и измените угол Y, установив значение около –30.

Изменение значения оси Y для создания эффекта наклона

Наконец, щелкните имя раскадровки в окне Объекты и временная шкала, а затем установите справа флажок AutoReverse, если он не установлен. Это приведет к тому, что по окончании анимации кнопка будет возвращаться в исходное состояние.

Установка флажка AutoReverse

Сохраните проект Blend и вернитесь в Visual Studio. Обязательно щелкните Да для всех, когда приложение спросит, следует ли перезагрузить решение. Теперь наша анимация входит в состав проекта, но она не будет запускаться автоматически. Чтобы этого добиться, нам необходимо изменить в XAML-определении кнопки две вещи: во-первых, она должна поддерживать преобразования (на самом деле требуемый для этого XAML-код будет добавлен автоматически средством Blend), а во-вторых, она должна вызывать функцию в нашем файле кода программной части на C# (эту часть нам придется добавить самостоятельно). Вот обновленный XAML-код:


<Button x:Name="TiltButton"   BorderThickness="0"  Click="TiltButton_Click" >
            <Grid>
                <Rectangle x:Name="rectangle" Width="200" Height="100">
                	<Rectangle.Projection>
                		<PlaneProjection/>
                	</Rectangle.Projection>
                    <Rectangle.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Color="Black" Offset="0.0" />
                            <GradientStop Color="Gray" Offset="0.03" />
                            <GradientStop Color="Black" Offset="0.25" />
                        </LinearGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>
                <Polygon  Points="75,5,75,95,145,50">
                    <Polygon.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Color="LightGreen" Offset="0.0" />
                            <GradientStop Color="DarkGreen" Offset="1.0" />
                        </LinearGradientBrush>
                    </Polygon.Fill>
                </Polygon>
            </Grid>
        </Button>

А вот функция в коде программной части на C#, которая будет запускать анимацию:


private void TiltButton_Click(object sender, RoutedEventArgs e)
        {
            TiltAnimation.Begin();
        }

При использовании C++ можно использовать похожий код:


void MyApp::MainPage::TiltButton_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
	TiltAnimation->Begin();
}


Когда вы запустите это приложение, то увидите, что при касании кнопка будет быстро наклоняться на небольшой угол:

Кнопка и в самом деле наклоняется!

В разделе выше мы увидели, как можно ускорить реализацию пользовательского интерфейса, создав стиль. Рассмотрим, как добавить раскадровку в стиль, чтобы любая кнопка на основе этого стиля наследовала его анимацию. Секрет заключается в том, чтобы использовать объект VisualStateManager, который позволяет задавать конкретные раскадровки для каждого события кнопки. Вот XAML-код, который будет запускать короткую анимацию, когда вы касаетесь кнопки. Как и прежде, этот XAML-код следует поместить в раздел <Page.Resources>, а стиль применить к кнопке.


 <Style x:Name="graduatedButton" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="grid" RenderTransformOrigin="0.5,0.5">
                            <Grid.RenderTransform>
                                <CompositeTransform/>
                            </Grid.RenderTransform>
                            <VisualStateManager.VisualStateGroups>                             
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>                                 
                                        <VisualState x:Name="Pressed">                                    
                                            <Storyboard >
                                            <DoubleAnimation Duration="0" To=" 0.9" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="grid"/>
                                            <DoubleAnimation Duration="0" To=" 0.9" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="grid"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>                              
                            </VisualStateManager.VisualStateGroups>
                            <Rectangle >
                                <Rectangle.Fill >
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Color="Black" Offset="0.0" />
                                        <GradientStop Color="Gray" Offset="0.03" />
                                        <GradientStop Color="Black" Offset="0.25" />
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <ContentPresenter />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

При использовании объекта VisualStateManager вам даже не нужно запускать анимацию раскадровки вызовом метода Begin(): она будет запускаться автоматически при активации соответствующего состояния.

Связанные разделы

Разделы для разработчиков iOS
Ресурсы для разработчиков iOS
Элементы управления Windows 8 для разработчиков iOS
Справочник по Windows 8 для разработчиков iOS
Разделы об обложках и анимации
Начало работы: анимация
Создание пользовательских интерфейсов с использованием XAML и Expression Blend
Анимация пользовательского интерфейса (приложения Магазина Windows на C#, VB, C++ и XAML)
Раскадрованные анимации (приложения Магазина Windows на C#, VB, C++ и XAML)
Раскадрованные анимации для визуальных состояний

 

 

Показ:
© 2015 Microsoft