День четвертый. Эффект Tilt

Вступление

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

Как устроен эффект Tilt

Эффект Tilt достигается через специально разработанное свойство IsTiltEnabled, которое можно добавить к элементу управления, например, к кнопке. Данное свойство определено в собственном классе, который находится в файле TiltEffect.cs. Также в файле находится весь необходимый код для реализации визуального эффекта. Когда пользователь касается на экране определенного элемента управления, то происходит обращение к классу TiltEffect и вызывается нужный эффект, если он доступен для данного объекта. Можно использовать эффект сразу ко всем элементам управления на странице глобально или определить только необходимые элементы по желанию.

Сам файл TiltEffect.cs был написан сотрудниками Microsoft и его можно найти в специальном примере Control Tilt Effect Sample. Вам нужно скачать пример и импортировать файл в свой проект. Ниже будет показано, как это сделать. Кроме того, файл содержит второе свойство SuppressTilt, которое подавляет эффект Tilt для элемента управления. Данное свойство удобно использовать в том случае, если эффект действует глобально на все элементы управления страницы и нужно отключить данный эффект у одного элемента.

Оба свойства IsTiltEnabled и SuppressTilt имеют тип Boolean.

Если посмотреть исходный код файла TiltEffect.cs, то можно увидеть строчки, где создается список элементов, к которым можно применить эффект Tilt.


public static List<Type> TiltableItems { get; private set; }

    static TiltEffect()
    {
        TiltableItems = new List<Type>() { typeof(ButtonBase), typeof(ListBoxItem),};
    }

Как видите, по умолчанию данный эффект применяется к элементам, производным от ButtonBase и ListBoxItem. К таким элементам относятся Button, CheckBox, RadioButton, HyperlinkButton, ListBoxItem. Другие элементы, которые не присутствуют в списке, не будут использовать эффект Tilt, даже если им присвоить в свойстве IsTiltEnabled значение True. Вы не должны изменять код из этого класса, чтобы добавить поддержку эффекта другим элементам. Но вы можете обновить список поддерживаемых элементов через свой код на при помощи конструкции:


TiltEffect.TiltableItems.Add(typeof("MyCustomControl"))

Тем не менее, не рекомендуется применять эффект к встроенным элементам управления, кроме указанных выше ButtonBase и ListBoxItem.

Использование эффекта Tilt

Перейдем к практической части. Итак, сначала вам нужно скачать пример Control Tilt Effect Sample. Распакуйте пример и найдите в нем файл TiltEffect.cs, который нам понадобится для проекта.

Далее создаем новый проект TiltFXDemo на основе шаблона Silverlight for Windows Phone.

Щелкаем правой кнопкой мыши на проекте в Solution Explorer и выбираем Add | Existing Item. Находим файл TiltEffect.cs и щелкаем кнопку Add. Таким образом мы импортировали файл в свой проект.

Откройте импортированный класс и поменяйте пространство имен на свое. Например, в моем случае я указал TiltFXDemo, в вашем проекте будет другое пространство имен.

Добавляем элементы управления на страницу

Добавим на свою страницу несколько элементов управления, чтобы посмотреть, как выглядит эффект. В файле MainPage.xaml добавьте следующий код сразу после строчки <!--ContentPanel - place additional content here-->.


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

    <Button Width="186" Height="185" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="9,20,0,0" />
    <Button Content="Button (Suppressed)" Height="150" HorizontalAlignment="Left" Margin="37,0,0,161" VerticalAlignment="Bottom" Width="380"/>
    <CheckBox Content="CheckBox" Height="72" HorizontalAlignment="Left" Margin="235,25,0,0" Name="checkBox1" VerticalAlignment="Top" />
    <RadioButton Content="RadioButton" Height="72" HorizontalAlignment="Left" Margin="235,103,0,0" Name="radioButton1" VerticalAlignment="Top" />
    <HyperlinkButton Content="HyperlinkButton" Height="30" HorizontalAlignment="Left" Margin="25,211,0,0" Name="hyperlinkButton1" VerticalAlignment="Top" Width="409" />
    <ListBox Height="110" HorizontalAlignment="Left" Margin="6,472,0,0" Name="listBox1" VerticalAlignment="Top" Width="460" ItemsSource="{Binding}" >
        <ListBoxItem Content="First ListBoxItem" ></ListBoxItem>
        <ListBoxItem Content="Second ListBoxItem" ></ListBoxItem>
        <ListBoxItem Content="Third ListBoxItem" ></ListBoxItem>
        <ListBoxItem Content="Fourth ListBoxItem" ></ListBoxItem>
    </ListBox>              
</Grid>

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

Tilt

Подключаем свойства для поддержки эффекта. Чтобы эффект был доступен глобально, мы добавим свойство в корень страницы. Также мы добавим свойство SuppressTilt, чтобы отключить эффект Tilt у одной кнопки.

В файле MainPage.xaml добавляем следующее объявление пространства имен в секцию phone:PhoneApplicationPage:


xmlns:local="clr-namespace:[Namespace]"

Вместо [Namespace] необходимо ввести пространство имен вашего приложения.

Там же нужно добавить еще одну строчку:


local:TiltEffect.IsTiltEnabled="True"

Данная строчка ссылается на свойство IsTiltEnabled из файла TiltEffect.cs и позволяет использовать эффект на всей странице.

Теперь найдите на странице элемент Button, которые содержит надпись Button (Suppressed) и измените код в XAML следующим образом:


<Button Content="Button (Suppressed)" Height="150" HorizontalAlignment="Left" 
    Margin="37,0,0,161" VerticalAlignment="Bottom" 
	Width="380" local:TiltEffect.SuppressTilt="True"/>

В этом коде мы добавили только свойство SuppressTilt и присвоили ему значение True. Тем самым мы отключили у этой кнопки эффект Tilt, а все остальные кнопки на странице будут по-прежнему использовать эффект.

Запустите проект и убедитесь, что все элементы, представленные на странице, кроме одной кнопки, поддерживают эффект Tilt.

Скачать исходнный код примера.