UWP ListView modifycontrols à DataTemplate lorsque l'option est sélectionnée

Question

Je ListView et il est DataTemplate ItemTemplate ressemble à ceci>

<DataTemplate> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="4"/> 
      <ColumnDefinition Width="*"/> 
     </Grid.ColumnDefinitions> 
     <Rectangle Fill="Black"/> 
     <TextBlock Text="{Binding Title}"/> 
    </Grid> 
</DataTemplate> 

Lorsque l'élément dans le ListView est sélectionné Je veux que le rectangle à bourre avec la valeur de whilte.

Pour WPF I, les déclencheurs d'utilisation du cound, mais sur UWP, il n'y en a pas comme je l'ai trouvé.

Je ne veux pas utiliser C# pour écouter événement itemSelected de ListView puis changer tous les éléments couleur au noir, puis définir la couleur de SelectedItem au blanc, parce que je vais avoir trop d'articles dans la ListView

Answer 1

La meilleure façon pour ce faire est de personnaliser le ListView.ItemContainerStyle. Vous trouverez beaucoup de détails utiles here.

L'idée est de créer une mise en page personnalisée pour les éléments de la liste. La disposition contiendra votre rectangle noir sur la gauche et votre modèle (la zone de texte) sur la droite.

Donc, fondamentalement, la déclaration de listview devient (un code a été supprimé pour plus de clarté):

<ListView x:Name="list" SelectionMode="Single"> 
     <ListView.ItemTemplate> 
      <DataTemplate x:DataType="local:Data"> 
       <TextBlock Text="{x:Bind Title}" /> 
      </DataTemplate> 
     </ListView.ItemTemplate> 

     <ListView.ItemContainerStyle> 
      <Style TargetType="ListViewItem"> 
       <Setter Property="HorizontalAlignment" Value="Stretch" /> 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="ListViewItem"> 
          <Grid> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="8" /> 
            <ColumnDefinition Width="*" /> 
           </Grid.ColumnDefinitions> 

           <Rectangle x:Name="sideRect" Fill="Black" /> 

           <Grid 
            x:Name="ContentPresenterGrid" 
            Margin="0,0,0,0" 
            Background="Transparent" 
            Grid.Column="1"> 
            <Grid.RenderTransform> 
             <TranslateTransform x:Name="ContentPresenterTranslateTransform" /> 
            </Grid.RenderTransform> 
            <ContentPresenter 
             x:Name="ContentPresenter" 
             Margin="{TemplateBinding Padding}" 
             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
             VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
             Content="{TemplateBinding Content}" 
             ContentTemplate="{TemplateBinding ContentTemplate}" 
             ContentTransitions="{TemplateBinding ContentTransitions}" /> 
           </Grid> 
          </Grid> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Style> 
     </ListView.ItemContainerStyle> 
    </ListView> 

Vous devrez alors mettre à jour les états visuels pour définir la couleur de votre rectangle à ce que vous voulez pour chaque Etat par exemple: (je l'ai enlevé quelques animations pour plus de clarté)

<VisualState x:Name="Selected"> 
    <Storyboard> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="sideRect" Storyboard.TargetProperty="Fill"> 
      <DiscreteObjectKeyFrame KeyTime="0" Value="Red" /> 
     </ObjectAnimationUsingKeyFrames> 
    </Storyboard> 
</VisualState> 

Le code complet:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <ListView x:Name="list" SelectionMode="Single"> 
     <ListView.ItemTemplate> 
      <DataTemplate x:DataType="local:Data"> 
       <TextBlock Text="{x:Bind Title}" /> 
      </DataTemplate> 
     </ListView.ItemTemplate> 

     <ListView.ItemContainerStyle> 
      <Style TargetType="ListViewItem"> 
       <Setter Property="HorizontalAlignment" Value="Stretch" /> 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="ListViewItem"> 
          <Grid 
           x:Name="ContentBorder" 
           Background="{TemplateBinding Background}" 
           BorderBrush="{TemplateBinding BorderBrush}" 
           BorderThickness="{TemplateBinding BorderThickness}"> 

           <VisualStateManager.VisualStateGroups> 
            <VisualStateGroup x:Name="CommonStates"> 
             <VisualState x:Name="Normal"> 
              <Storyboard> 
               <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" /> 
              </Storyboard> 
             </VisualState> 
             <VisualState x:Name="PointerOver"> 
              <Storyboard> 

               <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" /> 
               </ObjectAnimationUsingKeyFrames> 
               <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" /> 
              </Storyboard> 
             </VisualState> 
             <VisualState x:Name="Pressed"> 
              <Storyboard> 

               <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" /> 
               </ObjectAnimationUsingKeyFrames> 
               <PointerDownThemeAnimation TargetName="ContentPresenter" /> 
              </Storyboard> 
             </VisualState> 
             <VisualState x:Name="Selected"> 
              <Storyboard> 
               <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" /> 
               </ObjectAnimationUsingKeyFrames> 

               <ObjectAnimationUsingKeyFrames Storyboard.TargetName="sideRect" Storyboard.TargetProperty="Fill"> 
                <DiscreteObjectKeyFrame KeyTime="0" Value="Red" /> 
               </ObjectAnimationUsingKeyFrames> 

               <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" /> 
              </Storyboard> 
             </VisualState> 
             <VisualState x:Name="PointerOverSelected"> 
              <Storyboard> 


               <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" /> 
               </ObjectAnimationUsingKeyFrames> 

               <ObjectAnimationUsingKeyFrames Storyboard.TargetName="sideRect" Storyboard.TargetProperty="Fill"> 
                <DiscreteObjectKeyFrame KeyTime="0" Value="Green" /> 
               </ObjectAnimationUsingKeyFrames> 

               <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" /> 
              </Storyboard> 
             </VisualState> 
             <VisualState x:Name="PressedSelected"> 
              <Storyboard> 



               <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" /> 
               </ObjectAnimationUsingKeyFrames> 

               <ObjectAnimationUsingKeyFrames Storyboard.TargetName="sideRect" Storyboard.TargetProperty="Fill"> 
                <DiscreteObjectKeyFrame KeyTime="0" Value="Yellow" /> 
               </ObjectAnimationUsingKeyFrames> 


               <PointerDownThemeAnimation TargetName="ContentPresenter" /> 
              </Storyboard> 
             </VisualState> 
            </VisualStateGroup> 
            <VisualStateGroup x:Name="DisabledStates"> 
             <VisualState x:Name="Enabled" /> 
             <VisualState x:Name="Disabled"> 
              <Storyboard> 
               <DoubleAnimation 
                Storyboard.TargetName="ContentBorder" 
                Storyboard.TargetProperty="Opacity" 
                To="{ThemeResource ListViewItemDisabledThemeOpacity}" 
                Duration="0" /> 
              </Storyboard> 
             </VisualState> 
            </VisualStateGroup> 
            <VisualStateGroup x:Name="MultiSelectStates"> 
             <VisualState x:Name="MultiSelectDisabled"> 
              <Storyboard> 


               <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenterTranslateTransform" Storyboard.TargetProperty="X"> 
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="32" /> 
                <SplineDoubleKeyFrame 
                 KeySpline="0.1,0.9,0.2,1" 
                 KeyTime="0:0:0.333" 
                 Value="0" /> 
               </DoubleAnimationUsingKeyFrames> 

              </Storyboard> 
             </VisualState> 
             <VisualState x:Name="MultiSelectEnabled"> 
              <Storyboard> 


               <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenterTranslateTransform" Storyboard.TargetProperty="X"> 
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="-32" /> 
                <SplineDoubleKeyFrame 
                 KeySpline="0.1,0.9,0.2,1" 
                 KeyTime="0:0:0.333" 
                 Value="0" /> 
               </DoubleAnimationUsingKeyFrames> 


               <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenterGrid" Storyboard.TargetProperty="Margin"> 
                <DiscreteObjectKeyFrame KeyTime="0" Value="32,0,0,0" /> 
               </ObjectAnimationUsingKeyFrames> 
              </Storyboard> 
             </VisualState> 
            </VisualStateGroup> 
           </VisualStateManager.VisualStateGroups> 

           <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="8" /> 
            <ColumnDefinition Width="*" /> 
           </Grid.ColumnDefinitions> 

           <Rectangle x:Name="sideRect" Fill="Black" /> 


           <Grid 
            x:Name="ContentPresenterGrid" 
            Margin="0,0,0,0" 
            Background="Transparent" 
            Grid.Column="1"> 
            <Grid.RenderTransform> 
             <TranslateTransform x:Name="ContentPresenterTranslateTransform" /> 
            </Grid.RenderTransform> 
            <ContentPresenter 
             x:Name="ContentPresenter" 
             Margin="{TemplateBinding Padding}" 
             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
             VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
             Content="{TemplateBinding Content}" 
             ContentTemplate="{TemplateBinding ContentTemplate}" 
             ContentTransitions="{TemplateBinding ContentTransitions}" /> 
           </Grid> 
          </Grid> 
         </ControlTemplate> 

        </Setter.Value> 
       </Setter> 
      </Style> 
     </ListView.ItemContainerStyle> 
    </ListView> 
</Grid> 

Answer 2

Il existe un moyen très simple de résoudre ce problème avec les applications UWP. Comme vous le savez, les applications UWP ne prennent pas en charge les déclencheurs comme les applications WPF. Toujours lorsque j'ai ce scénario, je préfère utiliser les comportements.

Vous pouvez écouter avec un comportement personnalisé lorsque l'élément est sélectionné et modifier la valeur de la couleur de certaines propriétés de votre modèle.

Exemple:

<Rectangle Fill="{Binding MyColor,Mode=TwoWay}"/> 

Dans le gestionnaire d'événements de votre comportement tout simplement changer la couleur de votre propriété (MyColor).