TiltEffect и LongListSelector

Question

Я пытаюсь использовать TiltEffect из набора инструментов Silverlight в LongListSelector.Вот как элемент объявлен в XAML:

<controls:PivotItem Header="Pivot Item">

  <controls:PivotItem.Resources>

    <DataTemplate x:Key="LongListSelectorGroupHeaderTemplate">
      <Border Background="{StaticResource PhoneAccentBrush}"
              Margin="10,20,0,0"
              HorizontalAlignment="Left"
              VerticalAlignment="Center"
              Height="{StaticResource PhoneFontSizeExtraExtraLarge}"
              Width="{StaticResource PhoneFontSizeExtraExtraLarge}">
        <TextBlock Text="{Binding Name}"
                   Style="{StaticResource PhoneTextExtraLargeStyle}"
                   Foreground="White"
                   VerticalAlignment="Bottom"
                   HorizontalAlignment="Left" />
      </Border>
    </DataTemplate>

    <DataTemplate x:Key="LongListSelectorGroupItemTemplate">
      <Border Background="{StaticResource PhoneAccentBrush}"
              Margin="10"
              Height="{StaticResource PhoneFontSizeExtraExtraLarge}"
              Width="{StaticResource PhoneFontSizeExtraExtraLarge}">
        <TextBlock Text="{Binding Name}"
                   Style="{StaticResource PhoneTextExtraLargeStyle}"
                   Foreground="White"
                   VerticalAlignment="Bottom"
                   HorizontalAlignment="Left" />
      </Border>
    </DataTemplate>

    <DataTemplate x:Key="LongListSelectorItemTemplate">
      <StackPanel Grid.Column="1"
                  VerticalAlignment="Top"
                  Orientation="Horizontal"
                  toolkit:TiltEffect.IsTiltEnabled="True">

        <toolkit:GestureService.GestureListener>
          <toolkit:GestureListener Tap="OnLongListSelectorTapped" />
        </toolkit:GestureService.GestureListener>

        <Image  Source="{Binding ImageSource}"
                MinHeight="32"
                MinWidth="32"
                MaxHeight="48"
                MaxWidth="48" />

        <TextBlock Text="{Binding Name}"
                   Style="{StaticResource PhoneTextExtraLargeStyle}"
                   Margin="12,10,12,0" />

      </StackPanel>
    </DataTemplate>

  </controls:PivotItem.Resources>

  <toolkit:LongListSelector ItemTemplate="{StaticResource LongListSelectorItemTemplate}"
                            GroupHeaderTemplate="{StaticResource LongListSelectorGroupHeaderTemplate}"
                            GroupItemTemplate="{StaticResource LongListSelectorGroupItemTemplate}">

    <toolkit:LongListSelector.GroupItemsPanel>
      <ItemsPanelTemplate>
        <toolkit:WrapPanel />
      </ItemsPanelTemplate>
    </toolkit:LongListSelector.GroupItemsPanel>

  </toolkit:LongListSelector>

</controls:PivotItem>

К сожалению, это не работает.Жест касания срабатывает при нажатии на элемент, но анимация не воспроизводится.Я попытался установить свойство TiltEffect.IsTiltEnabled на LongListSelector, PivotItem и родительской странице, но ни одна из них не работает.

У меня есть еще один PivotItem, который содержит простой ListBox с ItemTemplate, который очень похож на LongListSelectorItemTemplate выше.Установка свойства TiltEffect.IsTiltEnabled на true в пределах DataTemplate работает как нужно.

Что я делаю неправильно в случае LongListSelector?

Answer 1

Если вы поместите свой ItemTemplate в ListBoxItem, он будет соответственно наклонен:

Answer 2

Способ работы TiltEffect состоит в том, что он содержит список типов, которые он будет наклонять, по умолчанию это Button и ListBoxItem. Затем он просматривает визуальное дерево, из которого вы его включаете, и добавляет эффект ко всем экземплярам этих классов. Таким образом, ваш LongListSelector.ItemTemplate должен содержать наклоняемый элемент. Самый простой способ сделать это с помощью невидимой кнопки, так что вам не нужно редактировать свой TiltEffect, и вы можете использовать его прямо из инструментария. Если вы действительно не хотите кнопку, то вам нужен другой ContentControl, чтобы обернуть ваш шаблон, из которого вы можете запустить наклон. Затем добавьте этот класс в список TiltEffect.

TiltEffect.TiltableItems.Add(typeof(MyTiltingContentControl))

Я использую этот стиль на своей кнопке, чтобы сделать его невидимым.

<Style x:Key="TiltButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="{x:Null}" />
        <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
        <Setter Property="Padding" Value="0,0,0,0"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="Transparent">
                        <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="0,8,0,0">
                            <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 3

Добавление этой части кода между тегом «Стиль» в шаблоне Button сделало именно то, что я хотел.Сделайте так, чтобы кнопка сохраняла свой цвет, когда она «наклонена».Я установил фон кнопки на PhoneAccentBrush, чтобы пользователь сам определял внешний вид приложения с помощью настроек своей темы.

Answer 4

Пошаговые инструкции по использованию эффекта наклона можно найти на MSDN

Answer 5

Создание нового элемента управления наследует стековую панель

public class TiltStackPanel : StackPanel
    {
        public TiltStackPanel() {}
    }

затем добавьте этот элемент управления TiltEffect.cs

static TiltEffect()
    {
      // For extra fun, add this to the list: typeof(Microsoft.Phone.Controls.PhoneApplicationPage)
      TiltableItems = new List<Type>() { typeof(ButtonBase), typeof(ListBoxItem), typeof(TiltStackPanel)};
      UseLogarithmicEase = false;
    }

Используйте эту TiltStackPanel внутри вашего шаблона longlistselector

Answer 6

TiltEffect.IsTiltEnabled = "True" переходит на элемент PhoneApplicationPage, замените шаблон ItemTemplate на кнопку, и она будет работать.