windows-phone-7 - descargar silverlight para windows 7 32 bits

TiltEffect y LongListSelector

Question

Estoy tratando de usar el TiltEffect del kit de herramientas de Silverlight dentro de un LongListSelector . Así es como el elemento se declara en 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>

Lamentablemente, esto no está funcionando. El gesto de tap se dispara al tocar un elemento, pero la animación no se reproduce. Intenté configurar la propiedad TiltEffect.IsTiltEnabled en LongListSelector , PivotItem y la página principal, pero ninguno de ellos funciona.

Tengo otro PivotItem que contiene un ListBox simple con una ItemTemplate que es muy similar a la LongListSelectorItemTemplate anterior. Establecer la propiedad TiltEffect.IsTiltEnabled en true dentro de su DataTemplate funciona como desee.

¿Qué estoy haciendo mal en el caso del LongListSelector ?

Answer 1

La forma en que funciona TiltEffect es que contiene una lista de tipos que se inclinan, por deafult estos son Button y ListBoxItem. A continuación, recorre el árbol visual desde donde lo enciende y agrega el efecto a todas las instancias de esas clases. Entonces, su LongListSelector.ItemTemplate necesita contener un elemento inclinable. La forma más fácil de hacerlo es con un botón invisible, de esa manera no necesita editar su TiltEffect y puede usarlo directamente del kit de herramientas. Si realmente no desea el botón, entonces necesita algún otro ContentControl para envolver su plantilla desde la cual puede activar la inclinación. A continuación, agregue esa clase a la lista TiltEffect.

TiltEffect.TiltableItems.Add(typeof(MyTiltingContentControl))

Utilizo este estilo en mi botón para hacerlo invisible.

<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 2

TiltEffect.IsTiltEnabled = "True" va en el elemento PhoneApplicationPage, cambie su ItemTemplate para que contenga un botón y funcionará.

Answer 3

Las instrucciones paso a paso sobre cómo usar el efecto de inclinación se pueden encontrar en MSDN

Answer 4

Crear un nuevo control hereda el stackpanel

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

luego agrega este control 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;
    }

Usa este TiltStackPanel dentro de tu plantilla de longlistselector

Answer 5

Si ajusta su ItemTemplate en un ListBoxItem, se inclinará en consecuencia:

<DataTemplate x:Key="LongListSelectorItemTemplate">
  <ListBoxItem>
    <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>
  </ListBoxItem>
</DataTemplate>

Answer 6

Agregar esta porción de código entre la etiqueta "Estilo" en una plantilla de botón hizo exactamente lo que quería. Haga que el botón mantenga su color cuando esté "inclinado". He configurado el fondo del botón en PhoneAccentBrush, por lo que el usuario decide la apariencia de la aplicación con su configuración de tema.

<Style x:Key="MetroButton" TargetType="Button">
    <Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/>
    <Setter Property="Height" Value="200"/>
    <Setter Property="Width" Value="200"/>
    <Setter Property="BorderThickness" Value="0"/>
    <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>