UWP ListviewItem Personnaliser les événements de pointeur en conservant la fonctionnalité de glisser-déposer

Question

Suite à ce question, je suis avec le même et d'autres doutes.

Comme l'utilisateur @ fipcurren88, j'utilisais des boutons dans ListView ItemTemplate pour personnaliser le comportement des événements de pointeur (Pointer Over et Pressed). C'est comme ça que je le fais habituellement jusqu'à ce que je trouve que Drag and Drop ne fonctionne pas et utiliser une Button dans un ItemTemplate est la mauvaise approche (comme @Filip Skakun mentionné dans la même question). Supprimer le bouton personnalisé et utiliser ItemTemplate directement avec le contenu que je veux (une image par exemple - le contenu du bouton personnalisé) Je ne savais pas comment définir les couleurs d'arrière-plan pour les autres états (pointeur sur et appuyé par exemple) . J'ai découvert la solution utilisant ListViewItemPresenter dans le ItemContainerStyle où je peux définir différents arrière-plans pour chaque événement Pointer. Mais, j'ai perdu le PointerDownThemeAnimation sur l'article et je ne sais pas comment le récupérer. L'utilisation d'un bouton est facile, mais elle affecte la fonctionnalité de glisser-déposer.

Ceci est le Numéro de problème 1.

Cela fonctionne avec des éléments simples (une seule image), mais imaginez que j'ai un élément plus complexe (une image, une grille et un TextBlock à l'intérieur de la grille). Je veux changer l'arrière-plan de grille (ou le premier plan de bloc de texte) pendant que Pointer est fini et/ou pendant que l'événement pressé.

Dans ce cas, je sais que la solution ListViewItemPresenter ne fonctionnera pas. J'ai besoin d'un moyen plus spécifique pour définir les différents états (VisualStateManager, Common States). L'utilisation d'un bouton personnalisé affecte la fonctionnalité de glisser-déposer (le point de départ de l'autre thread).

Que puis-je faire ?!

Appelons cela Problème numéro 2.

Un expert UWP/XAML qui peut m'aider? Je vous remercie.

Answer 1

Ces demandes peuvent toutes être effectuées dans le code xaml en modifiant le ListViewItem styles and templates, ce qui n'affectera pas la fonction Glisser-Déposer de ListView.

Pour vos deux questions, vous pouvez copier le style de x:Key="ListViewItemExpanded" dans votre Page.Resource et retirez le x:Key="ListViewItemExpanded", il en sera ce style être appliqué à tous les ListViewItem s dans votre page.

Si vous avez Grid, Image et TextBlock ensemble dans un article, vous pouvez définir ListView comme ceci:

<ListView x:Name="listView"> 
    <ListView.ItemTemplate> 
     <DataTemplate> 
      <Grid> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="*" /> 
        <ColumnDefinition Width="*" /> 
       </Grid.ColumnDefinitions> 
       <Image Height="100" Width="100" Grid.Column="0" 
         Source="{Binding image}" /> 
       <TextBlock Grid.Column="1" FontSize="20" Text="{Binding txt}" /> 
      </Grid> 
     </DataTemplate> 
    </ListView.ItemTemplate> 
</ListView> 

Ensuite, si vous voulez changer l'arrière-plan de l'élément et l'avant-plan de votre texte lorsque votre article se trouve dans l'état PointerOver ou Pressed, vous avez juste besoin de trouver ces deux VisualState s dans le style et par exemple les modifier comme ceci:

<VisualState x:Name="PointerOver"> 
    <Storyboard> 
     <DoubleAnimation Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Opacity" Duration="0" To="1" /> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill"> 
      <DiscreteObjectKeyFrame KeyTime="0" Value="Blue" /> 
     </ObjectAnimationUsingKeyFrames> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
      <DiscreteObjectKeyFrame KeyTime="0" Value="Red" /> 
     </ObjectAnimationUsingKeyFrames> 
     <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" /> 
    </Storyboard> 
</VisualState> 
<VisualState x:Name="Pressed"> 
    <Storyboard> 
     <DoubleAnimation Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Opacity" Duration="0" To="1" /> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderBackground" Storyboard.TargetProperty="Fill"> 
      <DiscreteObjectKeyFrame KeyTime="0" Value="Red" /> 
     </ObjectAnimationUsingKeyFrames> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
      <DiscreteObjectKeyFrame KeyTime="0" Value="Blue" /> 
     </ObjectAnimationUsingKeyFrames> 
     <PointerDownThemeAnimation TargetName="ContentPresenter" /> 
    </Storyboard> 
</VisualState> 

En faisant cela, le Background cible l'arrière-plan de l'ensemble de l'élément, et pas seulement le Grid.Le Grid adaptera aux commandes à l'intérieur même vous définissez HorizontalAlignment="Stretch" au Grid par défaut, c'est parce que par défaut, il utilise ContentPresent comme ceci:

<ContentPresenter x:Name="ContentPresenter" 
    ContentTransitions="{TemplateBinding ContentTransitions}" 
    ContentTemplate="{TemplateBinding ContentTemplate}" 
    Content="{TemplateBinding Content}" 
    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
    Margin="{TemplateBinding Padding}" /> 

Si vous modifiez les HorizontalAlignment et VerticalAlignment propriétés dans le style à Stretch , votre Grid dans le DateTemplate remplira tout l'article. Dans ce scénario, modifier le Background de BorderBackground et le Foreground de ContentPresenter dans l'état visuel peut encore fonctionner.