在DataTemplate中UWP的ListView modifycontrols当项目被选中

我有ListView和它的DataTemplate的ItemTemplate看起来像这样>在DataTemplate中UWP的ListView modifycontrols当项目被选中

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

当在ListView项目选择我想要的矩形具有与Whilte的填充值。

对于WPF我cound使用触发器，但在UWP上没有任何，因为我发现。

我不想使用C＃来听的ListView ItemSelected事件，然后更改所有项目颜色为黑色，然后设置的SelectedItem的颜色为白色，因为我会在ListView

来源

2017-02-17 mister_giga

最简单的方法太多项目要做到这一点是要定制ListView.ItemContainerStyle。你会发现很多有用的细节here。

这个想法是为列表项目创建一个自定义布局。布局将包含左侧的黑色矩形和右侧的模板（文本框）。

所以基本上，列表视图声明变成（部分代码已经为清楚起见删除）：

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

来源

2017-02-17 12:51:38 Vincent

非常感谢！这是我可以使用的最好的东西。 –

用UWP应用程序解决这个问题有一个非常简单的方法。正如你所知，UWP应用程序不支持像WPF应用程序这样的触发器。总是当我有这种情况下，我更喜欢使用行为。

当您选择该项目时，您可以使用自定义行为进行侦听，并更改模型中某个属性的颜色值。

例子：

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

在你的行为的事件处理程序只需改变你的财产（MyColor）的颜色。

来源

2017-02-17 13:11:04 RicardoPons

你可以给我举例说明如何听自定义行为？ –

在DataTemplate中UWP的ListView modifycontrols当项目被选中

回答

相关问题