2012-01-30 48 views
10

私は以下のXAMLを持っています。 ItemsControlで選択したアイテムをどのように強調表示できますか? ListViewの選択した項目テンプレートをオーバーライドすることはできますが、ItemsControlで同じようにするにはどうすればいいですか?画像のコレクションを表示できる代替コントロールはありますか?ItemsControlで選択したアイテムをハイライト表示する方法は?

<Window x:Class="ImageScrollDemo.View.MoviePosterView" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-namespace:ImageScrollDemo" 
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
    Title="MoviePosterView" Height="367" Width="725" Foreground="White"> 
<Window.Background> 
    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 
     <GradientStop Color="#FF505050" Offset="0"/> 
     <GradientStop Color="#FF202020" Offset="1"/> 
    </LinearGradientBrush> 
</Window.Background> 
<Window.DataContext> 
    <local:MainWindowViewModel /> 
</Window.DataContext> 
<Window.Resources> 
    <local:MainWindowViewModel x:Key="ViewModel" /> 

    <Style TargetType="Image" x:Key="ImageHover"> 
     <Style.Triggers> 
      <Trigger Property="IsMouseOver" Value="True"> 
       <Setter Property="Opacity" Value="1" /> 
       <Setter Property="BitmapEffect"> 
        <Setter.Value> 
         <OuterGlowBitmapEffect GlowColor="Gold" GlowSize="8"/> 
        </Setter.Value> 
       </Setter> 
      </Trigger> 
      <Trigger Property="IsMouseOver" Value="False"> 
       <Setter Property="Opacity" Value="0.7" /> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 
</Window.Resources> 
<i:Interaction.Triggers> 
    <i:EventTrigger EventName="Loaded"> 
     <i:InvokeCommandAction Command="{Binding PopulateMovieGrid}" /> 
    </i:EventTrigger> 
</i:Interaction.Triggers> 
<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="*" /> 
     <RowDefinition Height="60" /> 
    </Grid.RowDefinitions> 
    <ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto"> 
     <ItemsControl Name="itemsCtrl" HorizontalContentAlignment="Center" ItemsSource="{Binding Path=MovieCollection, Mode=TwoWay}"> 
      <ItemsControl.ItemsPanel> 
       <ItemsPanelTemplate> 
        <UniformGrid Columns="5" /> 
       </ItemsPanelTemplate> 
      </ItemsControl.ItemsPanel> 

      <ItemsControl.ItemContainerStyle> 
       <Style TargetType="ContentPresenter"> 
        <Setter Property="ContentTemplate"> 
         <Setter.Value> 
          <DataTemplate> 
           <Border BorderBrush="Black" BorderThickness="5"> 
            <ContentPresenter Content="{Binding}"/> 
           </Border> 
          </DataTemplate> 
         </Setter.Value> 
        </Setter> 
       </Style> 
      </ItemsControl.ItemContainerStyle> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
         <StackPanel Orientation="Vertical" HorizontalAlignment="Center"> 
          <Image Style="{StaticResource ImageHover}" Margin="0,5,0,0" RenderOptions.BitmapScalingMode="HighQuality" SnapsToDevicePixels="True" HorizontalAlignment="Center" Source="{Binding Path=Poster}" Height="150" /> 
          <TextBlock Name="txtTitle" FontSize="10" HorizontalAlignment="Center" TextAlignment="Justify" Text="{Binding Title}" TextWrapping="Wrap" MaxWidth="110" /> 
         </StackPanel> 
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
     </ItemsControl> 
    </ScrollViewer> 
</Grid> 

+0

は、リストボックスを使用して行い、その後のselectionMode =「複数」を設定する必要があります – 0x4f3759df

答えて

23

ItemsControlあなたはその行動をしたい場合は、私はあなたにも行うことができますListBox

<ListBox Name="itemsCtrl" HorizontalContentAlignment="Center" ItemsSource="{Binding Path=MovieCollection, Mode=TwoWay}"> 

    <ListBox.Resources> 
     <!-- Set SelectedItem Background here --> 
     <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Yellow"/> 
    </ListBox.Resources> 

    <ListBox.ItemsPanel> 
     <ItemsPanelTemplate> 
      <UniformGrid Columns="5" /> 
     </ItemsPanelTemplate> 
    </ListBox.ItemsPanel> 

    <ListBox.ItemTemplate> 
     <DataTemplate> 
       <StackPanel Orientation="Vertical" HorizontalAlignment="Center"> 
        <Image Style="{StaticResource ImageHover}" Margin="0,5,0,0" RenderOptions.BitmapScalingMode="HighQuality" SnapsToDevicePixels="True" HorizontalAlignment="Center" Source="{Binding Path=Poster}" Height="150" /> 
        <TextBlock Name="txtTitle" FontSize="10" HorizontalAlignment="Center" TextAlignment="Justify" Text="{Binding Title}" TextWrapping="Wrap" MaxWidth="110" /> 
       </StackPanel> 
     </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox> 
0

のスタイルとテンプレートを上書きすることをお勧めSelectedItem

を追跡することはありませんこれは表現のブレンド対話性を介して。 上部コンテナ(StackPanelまたはグリッド)内のItemsTemplateのイベント名MouseLeftDownまたはタップイベント(Windows 8.1の場合)を使用します。

xmlns:Core="using:Microsoft.Xaml.Interactions.Core" 
<i:Interaction.Triggers> 
    <i:EventTrigger EventName="MouseLeftDown"> 
     <Core:ChangePropertyAction PropertyName="Background" Value="Green"/> 
    </i:EventTrigger> 
</i:Interaction.Triggers> 

これはトリック

関連する問題