メトロ/ WinRTアプリのListViewの項目をクリックすると、別の背景色を設定するにはどうすればいいですか？

Question

私はExpression Blend 5 BetaとVisual Studio 11 Betaの両方で約30分かけて自分自身を試しましたが、ListViewアイテムをクリックしたときに別の背景色を適用する方法はかなり簡単です。 Windows 8 Consumer PreviewでWinRTアプリケーションに標準搭載されているように見えます。

私は（私はButton制御にやったことと同じ）、私は私のListViewの<DataTemplate/>内側に私のXAML内部<VisualStateManager/>宣言が必要になると考えていますが、ブレンドで機能「状態」タブを取得する方法を考え出すことはできませんこれらのアクションの録音を開始し、さらに最終的にどのようにしてこれを行うかを考えたら、VisualStateと呼ぶ名前がわかりません。私は右の私は、ブレンドの「状態」タブにアクセスし、自分の押され、障害者、PointerOverアクションなどの記録を開始することができ、それのコントロールテンプレートをクリックして編集した後ButtonためPressed視覚的な状態をカスタマイズ例えば

は、かなり簡単でしたListViewやその他のコントロールではそれほど簡単ではないようですね。

Blend 5とVS 11の両方がベータ版であるため、BlendのUIで何がコード化されていない機能であるかを知ることが難しくなります。だから私は誰もが提供できる何かを感謝します。視覚的な状態の形で、またはトリガーのいずれかが、ItemContainerStyleはデザイナービューで公開されていないようですので、それを変更するのは難しいですが、あなた - おかげ

Answer 1

は、選択状態は、ItemContainerStyleの一部である必要がありますListViewItemをXAMLに追加するだけで、デザイナーはスタイルとテンプレートが何であるかを喜んで教えてくれるので、変更することができます。

あなたは

ItemContainerStyle="{StaticResource ListViewItemStyle1}" 

を設定し、アクティブなリソースディクショナリにこれらのリソースを追加して、GridViewコントロールやListViewコントロールにスタイルを変更することができる（例えばPage.Resources。）：

<SolidColorBrush x:Key="ListViewItemHighlightBrush2" Color="Pink" /> 
<SolidColorBrush x:Key="ListViewItemCheckHintGlyphBrush2" Color="Red" /> 
<SolidColorBrush x:Key="ListViewItemPointerOverBrush2" Color="Purple" /> 
<SolidColorBrush x:Key="ListViewItemCheckGlyphBrush2" Color="Yellow" /> 
<SolidColorBrush x:Key="ListViewItemSelectedPointerOverBorderBrush2" Color="Orange" /> 
<Style x:Key="ListViewItemStyle1" TargetType="ListViewItem"> 
    <Setter Property="FontFamily" Value="{StaticResource ContentFontFamily}" /> 
    <Setter Property="FontSize" Value="{StaticResource ContentFontSize}" /> 
    <Setter Property="Background" Value="Transparent" /> 
    <Setter Property="TabNavigation" Value="Local" /> 
    <Setter Property="IsHoldingEnabled" Value="True" /> 
    <Setter Property="Margin" Value="0,0,18,0" /> 
    <Setter Property="HorizontalContentAlignment" Value="Left" /> 
    <Setter Property="VerticalContentAlignment" Value="Top" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="ListViewItem"> 
       <Border x:Name="OuterContainer"> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal" /> 
          <VisualState x:Name="PointerOver"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PointerOverBorder" /> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SelectionBackground"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListViewItemSelectedPointerOverBorderBrush2}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="SelectedBorder"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListViewItemSelectedPointerOverBorderBrush2}" /> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="SelectedEarmark"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListViewItemSelectedPointerOverBorderBrush2}" /> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Pressed"> 
           <Storyboard> 
            <TapDownThemeAnimation TargetName="ContentContainer" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="{StaticResource ListViewItemDisabledOpacity}" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter" /> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="FocusStates"> 
          <VisualState x:Name="Focused"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisual" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Unfocused" /> 
          <VisualState x:Name="PointerFocused" /> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="SelectionHintStates"> 
          <VisualStateGroup.Transitions> 
           <VisualTransition GeneratedDuration="0:0:0.65" To="NoSelectionHint" /> 
          </VisualStateGroup.Transitions> 
          <VisualState x:Name="VerticalSelectionHint"> 
           <Storyboard> 
            <SwipeHintThemeAnimation ToHorizontalOffset="0" TargetName="SelectionBackground" ToVerticalOffset="25" /> 
            <SwipeHintThemeAnimation ToHorizontalOffset="0" TargetName="ContentBorder" ToVerticalOffset="25" /> 
            <SwipeHintThemeAnimation ToHorizontalOffset="0" TargetName="SelectedCheckMark" ToVerticalOffset="25" /> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HintGlyph" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="HorizontalSelectionHint"> 
           <Storyboard> 
            <SwipeHintThemeAnimation ToHorizontalOffset="-25" TargetName="SelectionBackground" ToVerticalOffset="0" /> 
            <SwipeHintThemeAnimation ToHorizontalOffset="-25" TargetName="ContentBorder" ToVerticalOffset="0" /> 
            <SwipeHintThemeAnimation ToHorizontalOffset="-25" TargetName="SelectedCheckMark" ToVerticalOffset="0" /> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HintGlyph" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="NoSelectionHint" /> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="SelectionStates"> 
          <VisualState x:Name="Selecting"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionBackground" /> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBorder" /> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectingGlyph" /> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HintGlyphBorder" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Selected"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionBackground" /> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBorder" /> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Unselecting"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HintGlyphBorder" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Unselected"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HintGlyphBorder" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="SelectedUnfocused"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionBackground" /> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBorder" /> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark" /> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="DragStates"> 
          <VisualStateGroup.Transitions> 
           <VisualTransition GeneratedDuration="0:0:0.650" To="NotDragging" /> 
          </VisualStateGroup.Transitions> 
          <VisualState x:Name="NotDragging" /> 
          <VisualState x:Name="Dragging"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="{StaticResource ListViewItemDragOpacity}" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="InnerDragContent" /> 
            <DragItemThemeAnimation TargetName="InnerDragContent" /> 
            <FadeOutThemeAnimation TargetName="SelectedCheckMarkOuter" /> 
            <FadeOutThemeAnimation TargetName="SelectedBorder" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="DraggingTarget"> 
           <Storyboard> 
            <DropTargetItemThemeAnimation TargetName="OuterContainer" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="MultipleDraggingPrimary"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MultiArrangeOverlayBackground" /> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MultiArrangeOverlayText" /> 
            <DoubleAnimation Duration="0" To="{StaticResource ListViewItemDragOpacity}" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="InnerDragContent" /> 
            <FadeInThemeAnimation TargetName="MultiArrangeOverlayBackground" /> 
            <FadeInThemeAnimation TargetName="MultiArrangeOverlayText" /> 
            <DragItemThemeAnimation TargetName="InnerDragContent" /> 
            <FadeOutThemeAnimation TargetName="SelectedCheckMarkOuter" /> 
            <FadeOutThemeAnimation TargetName="SelectedBorder" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="MultipleDraggingSecondary"> 
           <Storyboard> 
            <FadeOutThemeAnimation TargetName="ContentContainer" /> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="ReorderHintStates"> 
          <VisualStateGroup.Transitions> 
           <VisualTransition GeneratedDuration="0:0:0.650" To="NoReorderHint" /> 
          </VisualStateGroup.Transitions> 
          <VisualState x:Name="NoReorderHint" /> 
          <VisualState x:Name="BottomReorderHint"> 
           <Storyboard> 
            <DragOverThemeAnimation Direction="Bottom" ToOffset="{StaticResource ListViewItemReorderHintOffset}" TargetName="ReorderHintContent" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="TopReorderHint"> 
           <Storyboard> 
            <DragOverThemeAnimation Direction="Top" ToOffset="{StaticResource ListViewItemReorderHintOffset}" TargetName="ReorderHintContent" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="RightReorderHint"> 
           <Storyboard> 
            <DragOverThemeAnimation Direction="Right" ToOffset="{StaticResource ListViewItemReorderHintOffset}" TargetName="ReorderHintContent" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="LeftReorderHint"> 
           <Storyboard> 
            <DragOverThemeAnimation Direction="Left" ToOffset="{StaticResource ListViewItemReorderHintOffset}" TargetName="ReorderHintContent" /> 
           </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"> 
              <DiscreteObjectKeyFrame.Value> 
               <Visibility>Visible</Visibility> 
              </DiscreteObjectKeyFrame.Value> 
             </DiscreteObjectKeyFrame> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PlaceholderRect"> 
             <DiscreteObjectKeyFrame KeyTime="0"> 
              <DiscreteObjectKeyFrame.Value> 
               <Visibility>Visible</Visibility> 
              </DiscreteObjectKeyFrame.Value> 
             </DiscreteObjectKeyFrame> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <Grid x:Name="ReorderHintContent" Background="Transparent"> 
         <Path x:Name="SelectingGlyph" Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{StaticResource ListViewItemHighlightBrush2}" HorizontalAlignment="Right" Height="13" Margin="0,5.5,5.5,0" Opacity="0" Stretch="Fill" VerticalAlignment="Top" Width="15" /> 
         <Border x:Name="ContentContainer"> 
          <Grid x:Name="InnerDragContent"> 
           <Border x:Name="HintGlyphBorder" HorizontalAlignment="Right" Height="40" Margin="4" Opacity="0" VerticalAlignment="Top" Width="40"> 
            <Path x:Name="HintGlyph" Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{StaticResource ListViewItemCheckHintGlyphBrush2}" HorizontalAlignment="Right" Height="13" Margin="0,5.5,5.5,0" Opacity="0" Stretch="Fill" VerticalAlignment="Top" Width="15" /> 
           </Border> 
           <Rectangle x:Name="PointerOverBorder" Fill="{StaticResource ListViewItemPointerOverBrush2}" IsHitTestVisible="False" Margin="1" Opacity="0" /> 
           <Rectangle x:Name="FocusVisual" IsHitTestVisible="False" Opacity="0" Stroke="{StaticResource ListViewItemKeyboardFocusBrush}" StrokeThickness="2" /> 
           <Rectangle x:Name="SelectionBackground" Fill="{StaticResource ListViewItemHighlightBrush2}" Margin="4" Opacity="0" /> 
           <Border x:Name="ContentBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="4"> 
            <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" Foreground="{x:Null}" IsHitTestVisible="False" Margin="{TemplateBinding Padding}" Opacity="0" Text="Xg" /> 
             <Rectangle x:Name="PlaceholderRect" Fill="{StaticResource ListViewItemPlaceholderRectBrush}" IsHitTestVisible="False" Visibility="Collapsed" /> 
             <Rectangle x:Name="SelectedBorder" IsHitTestVisible="False" Opacity="0" Stroke="{StaticResource ListViewItemHighlightBrush2}" StrokeThickness="{StaticResource ListViewItemSelectedBorderThickness}" /> 
            </Grid> 
           </Border> 
           <Border x:Name="SelectedCheckMarkOuter" HorizontalAlignment="Right" IsHitTestVisible="False" Margin="4" Padding="{TemplateBinding BorderThickness}" VerticalAlignment="Top"> 
            <Grid x:Name="SelectedCheckMark" Height="40" Opacity="0" Width="40"> 
             <Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z" Fill="{StaticResource ListViewItemHighlightBrush2}" Stretch="Fill" /> 
             <Path Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{StaticResource ListViewItemCheckGlyphBrush2}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="13" Margin="0,5.5,5.5,0" Stretch="Fill" VerticalAlignment="Top" Width="15" /> 
            </Grid> 
           </Border> 
           <Rectangle x:Name="MultiArrangeOverlayBackground" Fill="{StaticResource ListViewItemDragBackgroundBrush}" IsHitTestVisible="False" Margin="4" Opacity="0" /> 
           <TextBlock x:Name="MultiArrangeOverlayText" HorizontalAlignment="Left" IsHitTestVisible="False" Margin="4" Opacity="0" TextWrapping="Wrap" Text="{Binding TemplateSettings.DragItemsCount, RelativeSource={RelativeSource Mode=TemplatedParent}}" VerticalAlignment="Top"> 
            <TextBlock.Style> 
             <Style TargetType="TextBlock"> 
              <Setter Property="Foreground" Value="White" /> 
              <Setter Property="FontSize" Value="56" /> 
              <Setter Property="FontFamily" Value="{StaticResource ContentFontFamily}" /> 
              <Setter Property="FontWeight" Value="Light" /> 
              <Setter Property="HorizontalAlignment" Value="Left" /> 
              <Setter Property="VerticalAlignment" Value="Bottom" /> 
              <Setter Property="Margin" Value="12,0,0,0" /> 
              <Setter Property="TextWrapping" Value="Wrap" /> 
              <Setter Property="TextTrimming" Value="WordEllipsis" /> 
             </Style> 
            </TextBlock.Style> 
           </TextBlock> 
          </Grid> 
         </Border> 
        </Grid> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>