Статьи

Эффект наклона на HubTile и другие элементы управления на Windows Phone

Октябрь 30, 2018

В этой статье я расскажу о создании эффекта наклона в разных элементах управления в Windows Phone. Реализовать эффект наклона на элементах управления легко, но немногие элементы управления, такие как Hubtile, текстовый блок, не создают сам эффект наклона. Нам нужно немного поработать, чтобы достичь. В этой статье мы сначала рассмотрим, как создать эффект наклона для обычных элементов управления, а затем обсудим, как применить эффект наклона к текстовому блоку hubtile.

Давайте напишем код:

Загрузить  Silverlight Windows Phone Toolkit

Шаг 1:  Создайте Silverlight для проекта Windows Phone.

Шаг 2:  Добавить ссылку на Microsoft.Phone.Controls.Toolkit.dll

Шаг 3:  Добавьте пространство имен Microsoft.Phone.Controls.Toolkit в MainPage.xaml.

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

 Шаг 4:  Добавьте строку ниже в телефоне : элемент PhoneApplicationPage .

toolkit:TiltEffect.IsTiltEnabled="True"

Шаг 5: Добавьте список и кнопку внутри ContenPanel MainPage.xaml. 

<ListBox Margin="20,280,0,0" Height="80" FontSize="28" >
   <ListBoxItem Content="Item1"/>
   <ListBoxItem Content="Item2"/>
</ListBox>

<Button x:Name="tiltEffect" Margin="20,480,0,0" Height="80" Width="430" Content="Tilt" />

Шаг 5: Теперь запустите приложение и при прикосновении к элементу и кнопке списка вы увидите эффект наклона.

Шаг 6: Чтобы подавить эффект наклона для определенного элемента ListBox или элемента управления, мы можем использовать приведенный ниже код

 

toolkit:TiltEffect.SuppressTilt="True"

Шаг 7: Теперь замените код шага 5 на приведенный ниже код и запустите приложение, выделенный код подавит эффект наклона.  

<ListBox Margin="20,280,0,0" Height="80" FontSize="28" >
   <ListBoxItem Content="Item1" toolkit:TiltEffect.SuppressTilt="True"/>
   <ListBoxItem Content="Item2"/>
</ListBox>

<Button x:Name="tiltEffect" toolkit:TiltEffect.SuppressTilt="True" Margin="20,480,0,0" Height="80" Width="430" Content="Tilt" />

 Шаг 8: Теперь добавьте hubtile, текстовый блок и изображение внутри ContentPanel MainPage.xaml.

<toolkit:HubTile Title="UnFreezed Title" Background="Maroon" x:Name="hubTile1" />

<Image Source="/TestTilt.png" Margin="0" HorizontalAlignment="Left" Height="173" Width="173" VerticalAlignment="top"/>

<TextBlock Text="Testing" Style="{StaticResource PhoneTextExtraLargeStyle}" Height="100" Margin="200,-410,12,0" />

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

Давайте реализуем эффект наклона для hubtile, изображения и текстового блока.

Шаг 10: Теперь создайте класс TiltableControl (Highlighted), который в MainPage.xaml.cs выше класса MainPage.

 

namespace Windows_Phone___Tile_Effect
{
   public class TiltableControl : Grid
   {
   }

   public partial class MainPage : PhoneApplicationPage
   {

Шаг 11: Добавьте TiltableControl в TiltableItems, как показано ниже в конструкторе MainPage.

 

TiltEffect.TiltableItems.Add(typeof(TiltableControl));

 Шаг 12: Добавьте пространство имен, как показано ниже в MainPage.xaml.

xmlns:myTilt="clr-namespace:Windows_Phone___Tile_Effect"

Шаг 13: Теперь оберните элементы управления hubtile, textblock и image, созданные на шаге 8, в TiltableControl.

 

<myTilt:TiltableControl>
   <Image Source="/TestTilt.png" Margin="0" HorizontalAlignment="Left" Height="173" Width="173" VerticalAlignment="top"/>
</myTilt:TiltableControl>

<myTilt:TiltableControl>
   <TextBlock Text="Testing" Style="{StaticResource PhoneTextExtraLargeStyle}" Height="100" Margin="200,-410,12,0" />
</myTilt:TiltableControl>

<myTilt:TiltableControl>
   <toolkit:HubTile Title="UnFreezed Title" Background="Maroon" x:Name="hubTile1" />
</myTilt:TiltableControl>

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

На этом заканчивается статья об эффекте наклона в элементах управления hubtile, image и других элементах в Windows Phone.

 

34
Share: