WP8.1 XAML - seçildiğinde gösterilecek bir GridView öğesi nasıl edinilir?

Seçilen öğeyi vurgulanacak bir GridView (Windows Phone 8.1 C#/XAML uygulaması) uygulamasında deniyorum. Ben Blend kullanarak GridViewItemStyle çıkarılan ettik ve aşağıdakileri içerir:WP8.1 XAML - seçildiğinde gösterilecek bir GridView öğesi nasıl edinilir?

Bu XAML tarafından kullanılan fırça renkleri tanımlanmış ve geçici olarak bunu gösteren gerektiğini kontrol edebilirsiniz böylece 1 olarak saydamlığını kurdum

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

. Çok uzak çok iyi.

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

ama bir öğe seçildiğinde, görsel gösterge kazanmak değildir:

görsel devlet aynı stil tanımı grup da vardır. Göstergeyi görüntüleyen XAML açık bir şekilde çalışıyor, bu yüzden görsel devlet grubunun neden olmadığını anlamaya çalışıyorum, özellikle bu Blend'den çıktıktan sonra. aşağıdaki gibi

GridView tanımı şöyledir:

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

Güncelleme: Ben Çoklu Tek dan SelectionMode değiştirirseniz, iyi bir şey her öğe seçildiğinde olarak SelectedEarmark ve SelectedGlyph şimdi görünür olmasıdır ... Ben abl gibi görünüyor

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

tek yolu: kötü bir şey olsa da, SelectedBorder Görsel Devlet stuffery başka azar datetikleyebilir girişlerin tümü için görünür hale olmasıdır Bu etrafında çalışmak için ya bu görsel durumları stilden kaldırarak veya sınır XAML'yi değiştirerek, temelde sınır çizmiyor. 'un'un utancı, yerleşik stili kullanamıyorum; Temelde kendi tarzımı sağlamak zorundayım. Sanırım, yansıma üzerinde, muhtemelen bu kadar kötü bir şey değildir ... bir kez öğe öğelerinin nasıl çalıştığını, ayarlayıcılarla birlikte nasıl çalıştığını anlarsınız.

kaynak

2016-03-22 Philip Colmer

Fırçaları nerede tanımlıyorsunuz? – Archana

selectionmode = "tek" SelectedEarmark ve SelectedGlyph, çerçeve içinde değil. Bu öneri için çerçevede –

Teşekkürler, @ChiragShah olup olmadığını görmek için çoklu seçim modunu değiştirin. Soruyu bu değişimin sonucuyla güncelledim. –

SelectionStates yerine FocusStates kullanın.

Bunun işe yaracağını umarız. Eğer değilse, kendi Özel Durumlarınızı tanımlayabilir ve kodu arkada kullanabilirsiniz.

Aynı problem vardı. Soruma bakın ve referans için cevap verin. Custom Selection States

kaynak

2016-03-23 17:16:48

Bağlantılı soru ve yanıtınıza benzer bir biçimde özel durumlar kullanarak sona erdim. Odak durumlarını işe yaramadı - Windows Phone 8.1'de desteklenmeyebilir. Bağlantı için teşekkürler, ama çok yardımcı oldu. –

Glade işe yaradı.Ve eğer VisualStates XAML'de çalışmıyorsa endişelenmeyin, sadece verilen linkte belirtildiği gibi arkasındaki SelectionChanged Event'de kullanın. Ve aynı şekilde, Custom VisualStates'leri kullanabildiğiniz kadar kullanabilir ve onu Style’e uygulayabilirsiniz. Mükemmel çalışır. :) –

İstediğiniz sonucu elde etmek için düzenlediğim liste görünümü stili aşağıdadır.

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

Yardım edin.

P.S. Yukarıdaki kodun yardımcı olup olmadığı sorusuyla ilgili eleştirileri düzenlemekten memnuniyet duyarım :)

kaynak

2016-03-24 07:14:42

Öneriniz veya geri bildiriminizle ilgili herhangi bir eleştiri ima etmedim - bu platformun bir eleştiriydi. Sonunda tamamen soyulmuş bir eşya stili kullanarak sona erdi. Benim özel kullanım durumum için, varsayılan stil ile gelen çok fazla bit'e ihtiyacım yoktu, fakat bu çalışmanın nasıl daha iyi anlaşıldığına dair bana yardımcı olduğu için yardımınıza minnettarım. –

Platformun yaptığınız eleştirilere atıfta bulundum, onun biraz fazla kısıtlayıcı olduğunu biliyorum ama yine de iyi geliyor. Kişisel görüşü olsa da, bu tür açıklamalar yeni geliştiriciler üzerinde olumsuz bir etki yaratacaktır. –

Adil nokta - Yazdıklarımı gözden geçirdim. –

WP8.1 XAML - seçildiğinde gösterilecek bir GridView öğesi nasıl edinilir?

cevap

İlgili konular