UWP Listview modifycontrols in Datatemplate, wenn Element ausgewählt ist

Question

ich Listview haben und es ist Datatemplate ItemTemplate wie folgt aussieht>

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

Wenn das Element in der Listview ausgewählt ich das Rechteck mit dem Wert von Whilte Füllen Sie haben wollen.

Für WPF kann ich Trigger verwenden, aber auf UWP gibt es keine, wie ich gefunden habe.

Ich möchte nicht C# verwenden, für itemSelected Fall Listview zu hören und dann alle Einzelteile Farbe auf Schwarz ändern und dann SelectedItem der Farbe weiß, weil ich zu viele Elemente in der Listview

Answer 1

Der einfachste Weg haben, Das zu tun, ist die ListView.ItemContainerStyle anpassen. Sie finden viele nützliche Details here.

Die Idee besteht darin, ein benutzerdefiniertes Layout für die Listenelemente zu erstellen. Das Layout enthält Ihr schwarzes Rechteck auf der linken Seite und Ihre Vorlage (das Textfeld) auf der rechten Seite.

Also im Grunde wird die Listview-Deklaration (ein Code für Klarheit entfernt wurde):

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

Sie werden dann die visuellen Zustände aktualisieren müssen, um das Rechteck Farbe einzustellen, was Sie für jeden Staat wollen als zum Beispiel:

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

Der vollständige Code (ich habe einige Animationen für Klarheit entfernt):

<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

Es gibt eine sehr einfache Möglichkeit, dieses Problem mit UWP Apps zu lösen. Wie Sie wissen, unterstützt UWP Apps keine Trigger wie WPF-Apps. Immer, wenn ich dieses Szenario habe, bevorzuge ich Verhaltensweisen.

Sie können mit einem benutzerdefinierten Verhalten zuhören, wenn das Element ausgewählt ist, und den Wert der Farbe einer Eigenschaft in Ihrem Modell ändern.

Beispiel:

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

im Ereignishandler Ihres Verhaltens ändern, nur die Farbe Ihrer Immobilie (MyColor).