UWP ListView modifycontrols в DataTemplate, когда элемент выбран

Question

У меня есть ListView, и это DataTemplate ItemTemplate выглядит следующим образом>

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

Когда элемент в ListView выбран Я хочу Прямоугольник, чтобы заполнить со значением Whilte.

Для WPF я использую триггеры, но на UWP нет таких, как я нашел.

Я не хочу использовать C# для прослушивания ItemSelected случае ListView, а затем изменить все пункты цвета на черный, а затем установить цвет SelectedItem на белый, потому что у меня будет слишком много элементов в ListView

Answer 1

Самым простым способом для этого нужно настроить ListView.ItemContainerStyle. Много фуражных подробностей here.

Идея заключается в создании пользовательского макета для элементов списка. Макет будет содержать черный прямоугольник слева и ваш шаблон (текстовое поле) справа.

Так в основном, декларация ListView становится (некоторый код был удален для ясности):

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

Затем вы должны обновить визуальные состояния, чтобы установить прямоугольник цвета, что вы хотите для каждого государства, как например: (я удалил некоторые анимации для ясности)

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

полный код:

<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

Существует очень простой способ решить эту проблему с помощью приложений UWP. Как вы знаете, UWP Apps не поддерживает триггеры, такие как приложения WPF. Всегда, когда у меня есть этот сценарий, я предпочитаю использовать Behaviors.

Вы можете прослушивать пользовательское поведение, когда элемент выбран и изменить значение цвета какого-либо свойства в вашей модели.

Пример:

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

В обработчик событий вашего поведения просто изменить цвет вашей собственности (MyColor).