Comment supprimer la surbrillance de la souris et la surbrillance de ligne sélectionnée dans une grille de données Silverlight

Question

J'ai une grille de données avec un bouton dans chaque ligne (xaml illustré ci-dessous). J'essaie de me débarrasser de la fonctionnalité de surlignage bleu où il met en surbrillance la ligne sélectionnée, et la ligne avec la souris dessus. J'essaie de le saisir de sorte que vous cliquez simplement sur le bouton sans obtenir la sélection de ligne et la fonctionnalité de surbrillance de mouseover. J'ai essayé de définir IsHitTestVisible à false, mais le bouton n'est pas cliquable. Comment puis-je faire ceci?

<data:DataGrid x:Name="grdClinics" 
       HorizontalAlignment="Left" 
       VerticalAlignment="Bottom" 
       AutoGenerateColumns="False" 
       HeadersVisibility="None" 
       RowHeight="55" 
       Background="Transparent" 
       AlternatingRowBackground="Transparent" 
       RowBackground="Transparent" 
       BorderBrush="Transparent" 
       Foreground="Transparent" 
       GridLinesVisibility="None" 
       SelectionMode="Single">       

    <data:DataGrid.Columns> 
     <data:DataGridTemplateColumn Header="Clinic"> 
      <data:DataGridTemplateColumn.CellTemplate> 
       <DataTemplate> 
        <Button x:Name="btnClinic" 
          Height="46" 
          Width="580" 
          Content="{Binding Path=Description}" 
          Style="{StaticResource ShinyButton}" 
          Click="btnClinic_OnClick" 
          FontSize="24" 
          FontFamily="Tahoma" 
          FontWeight="Bold"> 
         <Button.Background> 
          <LinearGradientBrush EndPoint="0.528,1.144" StartPoint="1.066,1.221"> 
           <GradientStop Color="#FF000000"/> 
           <GradientStop Color="#FFEDC88F" Offset="1"/> 
          </LinearGradientBrush> 
         </Button.Background> 
        </Button> 
       </DataTemplate> 
      </data:DataGridTemplateColumn.CellTemplate> 
     </data:DataGridTemplateColumn> 
    </data:DataGrid.Columns> 
</data:DataGrid> 

Answer 1

La réponse courte est d'utiliser des styles. La réponse longue est la suivante:

Il existe deux propriétés de style dans la grille de données Silverlight 2.0 qui devraient résoudre votre problème. Le premier est CellStyle et le second est RowStyle. La propriété CellStyle est celle qui supprimera la surbrillance bleue de la cellule actuellement sélectionnée. La propriété RowStyle est celle dans laquelle vous pouvez supprimer la nuance bleu clair indiquant la ligne sélectionnée. Le CellStyle que j'est la suivante:

<Style x:Key="CellStyle" TargetType="local:DataGridCell"> 
     <Setter Property="Background" Value="Transparent" /> 
     <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
     <Setter Property="VerticalContentAlignment" Value="Stretch" /> 
     <Setter Property="Cursor" Value="Arrow" /> 
     <Setter Property="IsTabStop" Value="False" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="local:DataGridCell"> 
        <Grid Name="Root" Background="Transparent"> 
         <vsm:VisualStateManager.VisualStateGroups> 
          <vsm:VisualStateGroup x:Name="CurrentStates" > 
           <vsm:VisualStateGroup.Transitions> 
            <vsm:VisualTransition GeneratedDuration="0" /> 
           </vsm:VisualStateGroup.Transitions> 

           <vsm:VisualState x:Name="Regular" /> 
           <vsm:VisualState x:Name="Current" /> 
            <!--<Storyboard> 
             <DoubleAnimation Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" /> 
            </Storyboard> 
           </vsm:VisualState>--> 
          </vsm:VisualStateGroup> 
         </vsm:VisualStateManager.VisualStateGroups> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="*" /> 
          <ColumnDefinition Width="Auto" /> 
         </Grid.ColumnDefinitions> 
         <Rectangle Name="FocusVisual" Stroke="#FF6DBDD1" StrokeThickness="1" Fill="#66FFFFFF" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsHitTestVisible="false" Opacity="0" /> 
         <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" /> 
         <Rectangle Name="RightGridLine" Grid.Column="1" VerticalAlignment="Stretch" Width="1" /> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

Si vous remarquerez, je commenté le story-board qui a changé la valeur d'opacité du rectangle FocusVisual. Ce que cela faisait était de définir le rectangle FocusVisual à afficher sur la sélection de cellule. (S'il vous plaît Note: Vous ne pouvez pas supprimer l'élément FocusVisual comme CellPresenter attend cet élément, et ne trouvant pas l'élément provoquera une erreur.)

Le RowStyle I utilisé est le suivant:

<Style TargetType="local:DataGridRow" x:Key="MyCustomRow"> 
     <Setter Property="IsTabStop" Value="False" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="local:DataGridRow"> 
        <localprimitives:DataGridFrozenGrid x:Name="Root"> 
         <localprimitives:DataGridFrozenGrid.Resources> 
          <Storyboard x:Key="DetailsVisibleTransition" > 
           <DoubleAnimation Storyboard.TargetName="DetailsPresenter" Storyboard.TargetProperty="ContentHeight" Duration="00:00:0.1" /> 
          </Storyboard> 
         </localprimitives:DataGridFrozenGrid.Resources> 
         <vsm:VisualStateManager.VisualStateGroups> 
          <vsm:VisualStateGroup x:Name="CommonStates" > 
           <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="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="1" /> 
            </Storyboard> 
           </vsm:VisualState>--> 
           <vsm:VisualState x:Name="MouseOver Selected"/> 
           <!--<Storyboard> 
             <DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="1" /> 
            </Storyboard> 
           </vsm:VisualState>--> 
           <vsm:VisualState x:Name="Unfocused Selected"/> 
           <!--<Storyboard> 
             <DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="1" /> 
             <ColorAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"> 
              <SplineColorKeyFrame KeyTime="0" Value="#FFE1E7EC" /> 
             </ColorAnimationUsingKeyFrames> 
            </Storyboard> 
           </vsm:VisualState>--> 
          </vsm:VisualStateGroup> 
         </vsm:VisualStateManager.VisualStateGroups> 
         <localprimitives:DataGridFrozenGrid.RowDefinitions> 
          <RowDefinition Height="*" /> 
          <RowDefinition Height="Auto" /> 
          <RowDefinition Height="Auto" /> 
         </localprimitives:DataGridFrozenGrid.RowDefinitions> 
         <localprimitives:DataGridFrozenGrid.ColumnDefinitions> 
          <ColumnDefinition Width="Auto" /> 
          <ColumnDefinition Width="*" /> 
         </localprimitives:DataGridFrozenGrid.ColumnDefinitions> 
         <Rectangle x:Name="BackgroundRectangle" Grid.RowSpan="2" Grid.ColumnSpan="2" Opacity="0" Fill="#FFBADDE9" /> 
         <localprimitives:DataGridRowHeader Grid.RowSpan="3" x:Name="RowHeader" localprimitives:DataGridFrozenGrid.IsFrozen="True" /> 

         <localprimitives:DataGridCellsPresenter x:Name="CellsPresenter" localprimitives:DataGridFrozenGrid.IsFrozen="True"/> 

         <localprimitives:DataGridDetailsPresenter Grid.Row="1" Grid.Column="1" x:Name="DetailsPresenter" /> 
         <Rectangle Grid.Row="2" Grid.Column="1" x:Name="BottomGridLine" HorizontalAlignment="Stretch" Height="1" /> 
        </localprimitives:DataGridFrozenGrid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

Comme vous peut voir, j'ai commenté quelques états visuels plus. Vous souhaiterez commenter le story-board de MouseOver VisualState, le storyboard sélectionné Normal, le storyboard de MouseOver Selected et le story-board Selected Unfocused.

(S'il vous plaît Note: Je ne l'ai pas supprimer ces états visuels, je ne commente ce qu'ils faisaient.)

Ceci est mon code dans son intégralité pour référence: (XAML, puis VB)

XAML:

<UserControl x:Class="DataGrid_Mouseover.Page" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" 
    xmlns:local="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" 
    xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" 
    xmlns:primitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows" 
    xmlns:localprimitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data" 
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"> 
<UserControl.Resources> 

    <Style x:Key="CellStyle" TargetType="local:DataGridCell"> 

     <!-- TODO: Remove this workaround to force MouseLeftButtonDown event to be raised when root element is clicked. --> 
     <Setter Property="Background" Value="Transparent" /> 
     <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
     <Setter Property="VerticalContentAlignment" Value="Stretch" /> 
     <Setter Property="Cursor" Value="Arrow" /> 
     <Setter Property="IsTabStop" Value="False" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="local:DataGridCell"> 
        <Grid Name="Root" Background="Transparent"> 
         <vsm:VisualStateManager.VisualStateGroups> 
          <vsm:VisualStateGroup x:Name="CurrentStates" > 
           <vsm:VisualStateGroup.Transitions> 
            <vsm:VisualTransition GeneratedDuration="0" /> 
           </vsm:VisualStateGroup.Transitions> 

           <vsm:VisualState x:Name="Regular" /> 
           <vsm:VisualState x:Name="Current" /> 
            <!--<Storyboard> 
             <DoubleAnimation Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" /> 
            </Storyboard> 
           </vsm:VisualState>--> 
          </vsm:VisualStateGroup> 
         </vsm:VisualStateManager.VisualStateGroups> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="*" /> 
          <ColumnDefinition Width="Auto" /> 
         </Grid.ColumnDefinitions> 
         <!-- TODO Refactor this if SL ever gets a FocusVisualStyle on FrameworkElement --> 
         <Rectangle Name="FocusVisual" Stroke="#FF6DBDD1" StrokeThickness="1" Fill="#66FFFFFF" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsHitTestVisible="false" Opacity="0" /> 
         <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" /> 
         <Rectangle Name="RightGridLine" Grid.Column="1" VerticalAlignment="Stretch" Width="1" /> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

    <Style TargetType="local:DataGridRow" x:Key="MyCustomRow"> 
     <Setter Property="IsTabStop" Value="False" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="local:DataGridRow"> 
        <localprimitives:DataGridFrozenGrid x:Name="Root"> 
         <localprimitives:DataGridFrozenGrid.Resources> 
          <Storyboard x:Key="DetailsVisibleTransition" > 
           <DoubleAnimation Storyboard.TargetName="DetailsPresenter" Storyboard.TargetProperty="ContentHeight" Duration="00:00:0.1" /> 
          </Storyboard> 
         </localprimitives:DataGridFrozenGrid.Resources> 
         <vsm:VisualStateManager.VisualStateGroups> 
          <vsm:VisualStateGroup x:Name="CommonStates" > 
           <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="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="1" /> 
            </Storyboard> 
           </vsm:VisualState>--> 
           <vsm:VisualState x:Name="MouseOver Selected"/> 
           <!--<Storyboard> 
             <DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="1" /> 
            </Storyboard> 
           </vsm:VisualState>--> 
           <vsm:VisualState x:Name="Unfocused Selected"/> 
           <!--<Storyboard> 
             <DoubleAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="1" /> 
             <ColorAnimationUsingKeyFrames BeginTime="0" Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"> 
              <SplineColorKeyFrame KeyTime="0" Value="#FFE1E7EC" /> 
             </ColorAnimationUsingKeyFrames> 
            </Storyboard> 
           </vsm:VisualState>--> 
          </vsm:VisualStateGroup> 
         </vsm:VisualStateManager.VisualStateGroups> 
         <localprimitives:DataGridFrozenGrid.RowDefinitions> 
          <RowDefinition Height="*" /> 
          <RowDefinition Height="Auto" /> 
          <RowDefinition Height="Auto" /> 
         </localprimitives:DataGridFrozenGrid.RowDefinitions> 
         <localprimitives:DataGridFrozenGrid.ColumnDefinitions> 
          <ColumnDefinition Width="Auto" /> 
          <ColumnDefinition Width="*" /> 
         </localprimitives:DataGridFrozenGrid.ColumnDefinitions> 
         <Rectangle x:Name="BackgroundRectangle" Grid.RowSpan="2" Grid.ColumnSpan="2" Opacity="0" Fill="#FFBADDE9" /> 
         <localprimitives:DataGridRowHeader Grid.RowSpan="3" x:Name="RowHeader" localprimitives:DataGridFrozenGrid.IsFrozen="True" /> 

         <localprimitives:DataGridCellsPresenter x:Name="CellsPresenter" localprimitives:DataGridFrozenGrid.IsFrozen="True"/> 

         <localprimitives:DataGridDetailsPresenter Grid.Row="1" Grid.Column="1" x:Name="DetailsPresenter" /> 
         <Rectangle Grid.Row="2" Grid.Column="1" x:Name="BottomGridLine" HorizontalAlignment="Stretch" Height="1" /> 
        </localprimitives:DataGridFrozenGrid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</UserControl.Resources> 

<Grid x:Name="LayoutRoot" Background="White"> 
    <local:DataGrid x:Name="TestGrid" 
      HorizontalAlignment="Left" 
      VerticalAlignment="Bottom" 
      AutoGenerateColumns="False" 
      HeadersVisibility="None" 
      RowHeight="55" 
      Background="Transparent" 
      AlternatingRowBackground="Transparent" 
      RowBackground="Transparent" 
      BorderBrush="Transparent" 
      Foreground="Transparent" 
      GridLinesVisibility="None" 
      SelectionMode="Single" 
      CellStyle="{StaticResource CellStyle}" 
      RowStyle="{StaticResource MyCustomRow}"> 

     <local:DataGrid.Columns> 
      <local:DataGridTemplateColumn Header="Clinic"> 
       <local:DataGridTemplateColumn.CellTemplate> 
        <DataTemplate> 
         <Button x:Name="btnClinic" 
         Height="46" 
         Width="580" 
         Content="{Binding Path=Description}" 
         Click="btnClinic_Click" 
         FontSize="24" 
         FontFamily="Tahoma" 
         FontWeight="Bold"> 
          <Button.Background> 
           <LinearGradientBrush EndPoint="0.528,1.144" StartPoint="1.066,1.221"> 
            <GradientStop Color="#FF000000"/> 
            <GradientStop Color="#FFEDC88F" Offset="1"/> 
           </LinearGradientBrush> 
          </Button.Background> 
         </Button> 
        </DataTemplate> 
       </local:DataGridTemplateColumn.CellTemplate> 
      </local:DataGridTemplateColumn> 
     </local:DataGrid.Columns> 
    </local:DataGrid> 
</Grid> 
</UserControl> 

VB:

Partial Public Class Page 
Inherits UserControl 

Public Sub New() 
    InitializeComponent() 
    Dim test As IList(Of String) = New List(Of String) 
    test.Add("test1") 
    test.Add("test1") 
    test.Add("test1") 
    test.Add("test1") 
    test.Add("test1") 
    test.Add("test1") 
    test.Add("test1") 
    test.Add("test1") 
    test.Add("test1") 
    test.Add("test1") 

    TestGrid.ItemsSource = test 

End Sub 

Private Sub btnClinic_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) 

End Sub 
End Class 

Hope this helps.

Merci, Scott