Silverlight DataGridでのみ行全体をハイライト表示

Question

ユーザーがデータグリッド内の行をクリック（またはキーボードを使用）すると、その行が選択されますが、クリックされた特定のセルにも特別なフォーカスが与えられます。これはデータ編集グリッドでは問題ありませんが、リスト内の各項目のプロパティを表示する開いているダイアログのようなものを作成しようとしています...

（読み取り専用）DataGridを個々のフィールドではなく、行全体を選択またはフォーカスすることができます。

最初の要素のみを選択可能にするエレガントな方法があります。たとえば、標準のWindowsの[開く]ダイアログで、[詳細]ビューに変更すると、各行にいくつかの列があります（Filename、Created Date 、サイズなど）が表示されますが、ファイル名の列で項目をハイライトすることしかできません。

Answer 1

を助けるポストは、選択された行に黒の背景と現在の行にグレーの背景を追加し、私の（ラメ）バージョンです。私はセルを個別にペイントしていたので、スタイルを上書きしなければならず、選択した行は隠されていました。

ちょうどあなたへのDataGridインスタンスを貼り付けコードを追加します。

 <local:DataGrid.RowStyle> 
      <Style TargetType="local:DataGridRow"> 
       <Setter Property="IsTabStop" Value="False" /> 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="local:DataGridRow"> 
          <localprimitives:DataGridFrozenGrid Name="Root"> 
           <vsm:VisualStateManager.VisualStateGroups> 
            <vsm:VisualStateGroup x:Name="CommonStates"> 
             <vsm:VisualStateGroup.Transitions> 
              <vsm:VisualTransition GeneratedDuration="0" /> 
             </vsm:VisualStateGroup.Transitions> 
             <vsm:VisualState x:Name="Normal" /> 
             <vsm:VisualState x:Name="Normal AlternatingRow"> 
              <Storyboard> 
               <DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="0"/> 
              </Storyboard> 
             </vsm:VisualState> 
             <vsm:VisualState x:Name="MouseOver"> 
              <Storyboard> 
               <DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To=".5"/> 
              </Storyboard> 
             </vsm:VisualState> 
             <vsm:VisualState x:Name="Normal Selected"> 
              <Storyboard> 
               <DoubleAnimation Storyboard.TargetName="BackgroundRectangleSelected" Storyboard.TargetProperty="Opacity" Duration="0" To="1" /> 
              </Storyboard> 
             </vsm:VisualState> 
             <vsm:VisualState x:Name="MouseOver Selected"> 
              <Storyboard> 
               <DoubleAnimation Storyboard.TargetName="BackgroundRectangleSelected" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/> 
              </Storyboard> 
             </vsm:VisualState> 
             <vsm:VisualState x:Name="Unfocused Selected"> 
              <Storyboard> 
               <DoubleAnimation Storyboard.TargetName="BackgroundRectangleSelected" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/> 
               <ColorAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="BackgroundRectangleSelected" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"> 
                <SplineColorKeyFrame KeyTime="0" Value="Black"/> 
               </ColorAnimationUsingKeyFrames> 
              </Storyboard> 
             </vsm:VisualState> 
            </vsm:VisualStateGroup> 
           </vsm:VisualStateManager.VisualStateGroups> 
           <Grid.RowDefinitions> 
            <RowDefinition Height="*"/> 
            <RowDefinition Height="Auto"/> 
            <RowDefinition Height="Auto"/> 
           </Grid.RowDefinitions> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="Auto" /> 
            <ColumnDefinition Width="*" /> 
           </Grid.ColumnDefinitions> 

           <Grid.Resources> 
            <Storyboard x:Key="DetailsVisibleTransition"> 
             <DoubleAnimation Storyboard.TargetName="DetailsPresenter" Storyboard.TargetProperty="ContentHeight" Duration="00:00:0.1" /> 
            </Storyboard> 
           </Grid.Resources> 

           <Rectangle x:Name="BackgroundRectangle" Grid.RowSpan="2" Grid.ColumnSpan="2" Opacity="0" Fill="#FFBADDE9"/> 
           <Rectangle x:Name="BackgroundRectangleSelected" Grid.RowSpan="2" Grid.ColumnSpan="2" Opacity="0" Fill="Black"/> 

           <localprimitives:DataGridRowHeader Grid.RowSpan="3" Name="RowHeader" localprimitives:DataGridFrozenGrid.IsFrozen="True" /> 
           <localprimitives:DataGridCellsPresenter Margin="2" Grid.Column="1" Name="CellsPresenter" localprimitives:DataGridFrozenGrid.IsFrozen="True" /> 
           <localprimitives:DataGridDetailsPresenter Grid.Row="1" Grid.Column="1" Name="DetailsPresenter" /> 
           <Rectangle Grid.Row="2" Grid.Column="1" Name="BottomGridLine" HorizontalAlignment="Stretch" Height="1" /> 
          </localprimitives:DataGridFrozenGrid> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Style> 
     </local:DataGrid.RowStyle> 

Answer 2

あなたはここでDataGridCell のスタイルを変更することができます。ここ http://leeontech.wordpress.com/2009/06/29/hilighting-entire-rows-in-datagrid/

Answer 3

あなたがハイライト表示し、私が持って整列するために、これらのサンプルのようにスタイルを作成することができます。

<!-- Right Aligned Cell --> 
    <Style x:Key="RightAlignedCell" TargetType="{x:Type dg:DataGridCell}"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type dg:DataGridCell}"> 
        <Grid Background="{TemplateBinding Background}"> 
         <ContentPresenter HorizontalAlignment="Right" VerticalAlignment="Center"/> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     <Style.Triggers> 
      <Trigger Property="dg:DataGridCell.IsSelected" Value="True"> 
       <Setter Property="Background" Value="#356815" /> 
       <Setter Property="Foreground" Value="#e2fce2" /> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 

    <!-- Center Aligned Cell --> 
    <Style x:Key="CenterAlignedCell" TargetType="{x:Type dg:DataGridCell}"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type dg:DataGridCell}"> 
        <Grid Background="{TemplateBinding Background}"> 
         <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     <Style.Triggers> 
      <Trigger Property="dg:DataGridCell.IsSelected" Value="True"> 
       <Setter Property="Background" Value="#356815" /> 
       <Setter Property="Foreground" Value="#e2fce2" /> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 

後に、あなたは置く：

を

<dg:DataGrid x:Name="dg" AutoGenerateColumns="False" 
      xmlns:my="http://schemas.microsoft.com/wpf/2008/toolkit" ItemsSource="{Binding}" 
      SelectionMode="Single" ...> 
    <dg:DataGridTextColumn Header="Total Amount" Width="110" CellStyle="{StaticResource RightAlignedCell}" 
            Binding="{Binding Total,StringFormat={}\{0:N0\}}" IsReadOnly="True"/> 
    <dg:DataGridTextColumn Header="Enter Date" Width="110" CellStyle="{StaticResource CenterAlignedCell}" 
            Binding="{Binding EnterDate,StringFormat={}\{0:dd/MM/yyyy\}}" IsReadOnly="True"/> 

....

これは、WPF DataGridでフル行を強調表示する方法を迷いたい方にはうってつけです。