WP8.1 XAML - Wie erhalte ich ein GridView-Objekt, das angezeigt wird, wenn es ausgewählt ist?

Question

Ich versuche, das ausgewählte Element in einem GridView (Windows Phone 8.1 C#/XAML App) hervorgehoben zu werden. Ich habe die GridViewItemStyle mit Mischung extrahiert und es enthält folgende Komponenten:

<Border x:Name="SelectedBorder" BorderBrush="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" BorderThickness="{ThemeResource GridViewItemMultiselectBorderThickness}" IsHitTestVisible="False" Opacity="0"> 
    <Grid x:Name="SelectedCheckMark" HorizontalAlignment="Right" Height="34" Opacity="0" VerticalAlignment="Top" Width="34"> 
     <Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z" Fill="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" Stretch="Fill"/> 
     <Path x:Name="SelectedGlyph" Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z" Fill="{ThemeResource ListViewItemCheckThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="14.5" Margin="0,1,1,0" Stretch="Fill" VerticalAlignment="Top" Width="17"/> 
    </Grid> 
</Border> 

ich die Bürste Farben dieses XAML verwendet definiert haben und vorübergehend die Opazität auf 1 so eingestellt, dass ich überprüfen kann es anzeigt werden soll. So weit, ist es gut.

Es gibt auch eine visuelle Statusgruppe im gleichen Stil Definition:

<VisualStateGroup x:Name="SelectionStates"> 
    <VisualState x:Name="Unselected"/> 
    <VisualState x:Name="Selected"> 
     <Storyboard> 
      <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckGlyph"/> 
      <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/> 
     </Storyboard> 
    </VisualState> 
    <VisualState x:Name="SelectedUnfocused"> 
     <Storyboard> 
      <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckGlyph"/> 
      <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/> 
     </Storyboard> 
    </VisualState> 
</VisualStateGroup> 

aber wenn ein Element ausgewählt wird, ist es nicht die visuelle Anzeige gewinnen. Der XAML, der den Indikator anzeigt, funktioniert eindeutig, also versuche ich zu verstehen, warum die visuelle Statusgruppe nicht ist, insbesondere da diese direkt aus Blend stammt.

Die Gridview Definition lautet wie folgt:

<GridView 
    AutomationProperties.AutomationId="ItemListViewSection2" 
    AutomationProperties.Name="Items In Group" 
    SelectionMode="Single" 
    IsItemClickEnabled="True" 
    ItemsSource="{Binding GroupMembers}" 
    ItemTemplate="{StaticResource Individual80ItemTemplate}" 
    ItemContainerStyle="{StaticResource GridViewItemStyle1}" 
    ItemClick="ItemView_ItemClick" 
    ContinuumNavigationTransitionInfo.ExitElementContainer="True" 
    SelectionChanged="itemView_SelectionChanged" 
    Loaded="itemGridView_Loaded"/> 

aktualisieren: Wenn ich von Single Selection auf mehr ändern, die gute Sache ist, dass die SelectedEarmark und SelectedGlyph jetzt erscheinen als jedes Element ausgewählt ist ... das Schlimme ist jedoch, dass die SelectedBorder für alle Einträge sichtbar gemacht wird, die durch ein anderes Bit von Visual Staat stuffery ausgelöst zu sein scheint:

<VisualStateGroup x:Name="MultiSelectStates"> 
    <VisualStateGroup.Transitions> 
     <VisualTransition From="ListMultiSelect" GeneratedDuration="0:0:0.15" To="NoMultiSelect"/> 
     <VisualTransition From="NoMultiSelect" GeneratedDuration="0:0:0.15" To="ListMultiSelect"/> 
    </VisualStateGroup.Transitions> 
    <VisualState x:Name="NoMultiSelect"/> 
    <VisualState x:Name="ListMultiSelect"> 
     <Storyboard> 
      <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="X" Storyboard.TargetName="CheckboxContainerTranslateTransform"/> 
      <DoubleAnimation Duration="0" To="{ThemeResource ListViewItemContentTranslateX}" Storyboard.TargetProperty="X" Storyboard.TargetName="ContentBorderTranslateTransform"/> 
     </Storyboard> 
    </VisualState> 
    <VisualState x:Name="GridMultiSelect"> 
     <Storyboard> 
      <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBorder"/> 
     </Storyboard> 
    </VisualState> 
</VisualStateGroup> 

der einzige Weg, ich scheine abl zu sein Um dies zu umgehen, entfernen Sie entweder diese visuellen Zustände aus dem Stil oder indem Sie den Rahmen XAML so ändern, dass der Rahmen nicht gezeichnet wird. Die Schande von , dass ist, dass ich den eingebauten Stil nicht verwenden kann; Ich muss im Grunde meinen eigenen Stil haben. Ich nehme an, dass das wahrscheinlich keine so schlechte Sache ist ... wenn Sie einmal herausgefunden haben, wie die Objektstile funktionieren, zusammen mit Settors usw.

Answer 1

Verwenden Sie FocusStates anstelle von SelectionStates.

<VisualStateGroup x:Name="FocusStates"> 
    <VisualState x:Name="PointerFocused"> 
       <Storyboard> 
        <DoubleAnimation Duration = "0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckGlyph"/> 
        <DoubleAnimation Duration = "0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="Unfocused"> 
       <Storyboard> 
        <DoubleAnimation Duration = "1" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckGlyph"/> 
        <DoubleAnimation Duration = "1" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/> 
       </Storyboard> 
      </VisualState> 
     </VisualStateGroup> 

Hoffe, das wird funktionieren. Wenn nicht, können Sie Ihre eigenen benutzerdefinierten Zustände definieren und im Code dahinter verwenden.

Ich hatte das gleiche Problem. Siehe meine Frage und Antwort als Referenz. Custom Selection States

Answer 2

Hier ist der listviewitem Stil, den ich optimiert habe, um das gewünschte Ergebnis zu erhalten.

<Style x:Key="MyListViewItemStyle" 
      TargetType="ListViewItem"> 
     <Setter Property="FontFamily" 
       Value="{ThemeResource ContentControlThemeFontFamily}" /> 
     <Setter Property="FontSize" 
       Value="{ThemeResource ControlContentThemeFontSize}" /> 
     <Setter Property="Background" 
       Value="Transparent" /> 
     <Setter Property="TabNavigation" 
       Value="Local" /> 
     <Setter Property="IsHoldingEnabled" 
       Value="False" /> 
     <Setter Property="Margin" 
       Value="{ThemeResource ListViewItemMargin}" /> 
     <Setter Property="HorizontalContentAlignment" 
       Value="Left" /> 
     <Setter Property="VerticalContentAlignment" 
       Value="Stretch" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="ListViewItem"> 
        <Border x:Name="OuterContainer" 
          Background="Transparent" 
          Margin="0,5,0,5" 
          RenderTransformOrigin="0.5,0.5"> 
         <Border.RenderTransform> 
          <ScaleTransform x:Name="ContentScaleTransform" /> 
         </Border.RenderTransform> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualStateGroup.Transitions> 
            <VisualTransition From="Pressed" 
                 To="Normal"> 
             <Storyboard> 
              <PointerUpThemeAnimation Storyboard.TargetName="TiltContainer" /> 
             </Storyboard> 
            </VisualTransition> 
           </VisualStateGroup.Transitions> 
           <VisualState x:Name="Normal" /> 
           <VisualState x:Name="Pressed"> 
            <Storyboard> 
             <PointerDownThemeAnimation Storyboard.TargetName="TiltContainer" /> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="CheckboxPressed"> 
            <Storyboard> 
             <PointerDownThemeAnimation Storyboard.TargetName="CheckboxTiltContainer" /> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" 
                     Storyboard.TargetName="NormalRectangle"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource CheckBoxPressedBackgroundThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" 
                     Storyboard.TargetName="CheckGlyph"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource CheckBoxPressedForegroundThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <DoubleAnimation Duration="0" 
                 To="{ThemeResource ListViewItemDisabledThemeOpacity}" 
                 Storyboard.TargetProperty="Opacity" 
                 Storyboard.TargetName="contentPresenter" /> 
             <ObjectAnimationUsingKeyFrames Duration="0" 
                     Storyboard.TargetProperty="Stroke" 
                     Storyboard.TargetName="NormalRectangle"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource CheckBoxDisabledBorderThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Duration="0" 
                     Storyboard.TargetProperty="Fill" 
                     Storyboard.TargetName="CheckGlyph"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="{ThemeResource CheckBoxDisabledForegroundThemeBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Duration="0" 
                     Storyboard.TargetProperty="BorderBrush" 
                     Storyboard.TargetName="SelectedBorder"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="Transparent" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Duration="0" 
                     Storyboard.TargetProperty="Fill" 
                     Storyboard.TargetName="SelectedEarmark"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="Transparent" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Duration="0" 
                     Storyboard.TargetProperty="Fill" 
                     Storyboard.TargetName="SelectedGlyph"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="Transparent" /> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="SelectionStates"> 
           <VisualState x:Name="Unselected" /> 
           <VisualState x:Name="Selected"> 
            <Storyboard> 
             <DoubleAnimation Duration="0" 
                 To="1" 
                 Storyboard.TargetProperty="Opacity" 
                 Storyboard.TargetName="CheckGlyph" /> 
             <DoubleAnimation Duration="0" 
                 To="1" 
                 Storyboard.TargetProperty="Opacity" 
                 Storyboard.TargetName="SelectedCheckMark" /> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="SelectedUnfocused"> 
            <Storyboard> 
             <DoubleAnimation Duration="0" 
                 To="1" 
                 Storyboard.TargetProperty="Opacity" 
                 Storyboard.TargetName="CheckGlyph" /> 
             <DoubleAnimation Duration="0" 
                 To="1" 
                 Storyboard.TargetProperty="Opacity" 
                 Storyboard.TargetName="SelectedCheckMark" /> 
             <DoubleAnimation Duration="0" 
                 To="1" 
                 Storyboard.TargetProperty="Opacity" 
                 Storyboard.TargetName="SelectedBorder" /> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="DataVirtualizationStates"> 
           <VisualState x:Name="DataAvailable" /> 
           <VisualState x:Name="DataPlaceholder"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Duration="0" 
                     Storyboard.TargetProperty="Visibility" 
                     Storyboard.TargetName="PlaceholderTextBlock"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="Visible" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Duration="0" 
                     Storyboard.TargetProperty="Visibility" 
                     Storyboard.TargetName="PlaceholderRect"> 
              <DiscreteObjectKeyFrame KeyTime="0" 
                    Value="Visible" /> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="MultiSelectStates"> 
           <VisualStateGroup.Transitions> 
            <VisualTransition From="ListMultiSelect" 
                 GeneratedDuration="0:0:0.15" 
                 To="NoMultiSelect" /> 
            <VisualTransition From="NoMultiSelect" 
                 GeneratedDuration="0:0:0.15" 
                 To="ListMultiSelect" /> 
           </VisualStateGroup.Transitions> 
           <VisualState x:Name="NoMultiSelect" /> 
           <VisualState x:Name="ListMultiSelect"> 
            <Storyboard></Storyboard> 
           </VisualState> 
           <VisualState x:Name="GridMultiSelect"> 
            <Storyboard> 
             <DoubleAnimation Duration="0" 
                 To="1" 
                 Storyboard.TargetProperty="Opacity" 
                 Storyboard.TargetName="SelectedBorder" /> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="ReorderModeStates"> 
           <VisualStateGroup.Transitions> 
            <VisualTransition From="ReorderEnabled" 
                 GeneratedDuration="00:00:00.2" 
                 To="ReorderDisabled" /> 
           </VisualStateGroup.Transitions> 
           <VisualState x:Name="ReorderEnabled"> 
            <Storyboard> 
             <DropTargetItemThemeAnimation Storyboard.TargetName="OuterContainer" /> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Reorderable"> 
            <Storyboard> 
             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="ScaleX" 
                     Storyboard.TargetName="ContentScaleTransform"> 
              <LinearDoubleKeyFrame KeyTime="00:00:00.075" 
                    Value="1.05" /> 
              <LinearDoubleKeyFrame KeyTime="00:00:00.2" 
                    Value="1.0" /> 
             </DoubleAnimationUsingKeyFrames> 
             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="ScaleY" 
                     Storyboard.TargetName="ContentScaleTransform"> 
              <LinearDoubleKeyFrame KeyTime="00:00:00.075" 
                    Value="1.05" /> 
              <LinearDoubleKeyFrame KeyTime="00:00:00.2" 
                    Value="1.0" /> 
             </DoubleAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="ReorderDisabled" /> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="ReorderHintStates"> 
           <VisualStateGroup.Transitions> 
            <VisualTransition GeneratedDuration="0:0:0.2" 
                 To="NoReorderHint" /> 
           </VisualStateGroup.Transitions> 
           <VisualState x:Name="NoReorderHint" /> 
           <VisualState x:Name="BottomReorderHint"> 
            <Storyboard> 
             <DragOverThemeAnimation Direction="Bottom" 
                   ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" 
                   Storyboard.TargetName="ReorderHintContent" /> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="RightReorderHint"> 
            <Storyboard> 
             <DragOverThemeAnimation Direction="Right" 
                   ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" 
                   Storyboard.TargetName="ReorderHintContent" /> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="TopReorderHint"> 
            <Storyboard> 
             <DragOverThemeAnimation Direction="Top" 
                   ToOffset="0" 
                   Storyboard.TargetName="ReorderHintContent" /> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="LeftReorderHint"> 
            <Storyboard> 
             <DragOverThemeAnimation Direction="Left" 
                   ToOffset="0" 
                   Storyboard.TargetName="ReorderHintContent" /> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Grid x:Name="ReorderHintContent" 
           Background="Transparent"> 
          <Border x:Name="CheckboxTiltContainer" 
            HorizontalAlignment="Left" 
            Margin="{ThemeResource ListViewItemMultiselectCheckBoxMargin}" 
            VerticalAlignment="Top"> 
           <Border x:Name="CheckboxOuterContainer"> 
            <Border.Clip> 
             <RectangleGeometry Rect="0,0,25.5,25.5" /> 
            </Border.Clip> 
            <Grid x:Name="CheckboxContainer"> 
             <Grid.RenderTransform> 
              <TranslateTransform x:Name="CheckboxContainerTranslateTransform" 
                   X="{ThemeResource ListViewItemContentOffsetX}" /> 
             </Grid.RenderTransform> 
             <Rectangle x:Name="NormalRectangle" 
                Fill="{ThemeResource CheckBoxBackgroundThemeBrush}" 
                Height="25.5" 
                Stroke="{ThemeResource CheckBoxBorderThemeBrush}" 
                StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}" 
                Width="25.5" /> 
             <Path x:Name="CheckGlyph" 
               Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z" 
               Fill="{ThemeResource CheckBoxForegroundThemeBrush}" 
               FlowDirection="LeftToRight" 
               HorizontalAlignment="Center" 
               Height="17" 
               IsHitTestVisible="False" 
               Opacity="0" 
               Stretch="Fill" 
               StrokeThickness="2.5" 
               StrokeLineJoin="Round" 
               VerticalAlignment="Center" 
               Width="18.5" /> 
            </Grid> 
           </Border> 
          </Border> 
          <Border x:Name="ContentContainer"> 
           <Border x:Name="TiltContainer"> 
            <Border x:Name="ContentBorder" 
              BorderBrush="{TemplateBinding BorderBrush}" 
              BorderThickness="{TemplateBinding BorderThickness}" 
              Background="{TemplateBinding Background}"> 
             <Border.RenderTransform> 
              <TranslateTransform x:Name="ContentBorderTranslateTransform" /> 
             </Border.RenderTransform> 
             <Grid> 
              <ContentPresenter x:Name="contentPresenter" 
                   ContentTemplate="{TemplateBinding ContentTemplate}" 
                   ContentTransitions="{TemplateBinding ContentTransitions}" 
                   Content="{TemplateBinding Content}" 
                   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                   Margin="{TemplateBinding Padding}" 
                   VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> 
              <TextBlock x:Name="PlaceholderTextBlock" 
                 AutomationProperties.AccessibilityView="Raw" 
                 Foreground="{x:Null}" 
                 IsHitTestVisible="False" 
                 Margin="{TemplateBinding Padding}" 
                 Opacity="0" 
                 Text="Xg" /> 
              <Rectangle x:Name="PlaceholderRect" 
                 Fill="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" 
                 IsHitTestVisible="False" 
                 Visibility="Collapsed" /> 
             </Grid> 
            </Border> 
           </Border> 
          </Border> 
          <Border x:Name="SelectedBorder" 
            BorderBrush="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" 
            BorderThickness="{ThemeResource GridViewItemMultiselectBorderThickness}" 
            IsHitTestVisible="False" 
            Opacity="0"> 
           <Grid x:Name="SelectedCheckMark" 
             HorizontalAlignment="Right" 
             Height="34" 
             Opacity="0" 
             VerticalAlignment="Top" 
             Width="34"> 
            <Path x:Name="SelectedEarmark" 
              Data="M0,0 L40,0 L40,40 z" 
              Fill="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" 
              Stretch="Fill" /> 
            <Path x:Name="SelectedGlyph" 
              Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z" 
              Fill="{ThemeResource ListViewItemCheckThemeBrush}" 
              FlowDirection="LeftToRight" 
              HorizontalAlignment="Right" 
              Height="14.5" 
              Margin="0,1,1,0" 
              Stretch="Fill" 
              VerticalAlignment="Top" 
              Width="17" /> 
           </Grid> 
          </Border> 
         </Grid> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

Ich hoffe, es hilft.

P.S. Ich würde gerne die Kritik in der Frage bearbeiten, ob der obige Code hilft :)