Question

我刚开始使用SL和WPF。我正在使用DataGrid控件，我需要删除鼠标悬停效果（我实际上需要做更多的自定义）。我该怎么做呢。我想我需要使用控件模板，但不知道如何。我正在研究和阅读。任何帮助将不胜感激。

Answer 1

简短的回答是使用样式。答案如下：

Silverlight 2.0数据网格中有两个样式属性可以解决您的问题。第一个是CellStyle，第二个是RowStyle。 CellStyle属性将删除当前所选单元格周围的浅蓝色突出显示。 RowStyle属性是您可以删除指示所选行的浅蓝色阴影的属性。我使用的CellStyle如下：

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

如果您注意到，我注释掉了改变了FocusVisual矩形的不透明度值的故事板。这样做是为了将FocusVisual矩形设置为在单元格选择上显示。（请注意：您无法删除FocusVisual元素，因为CellPresenter需要此元素，而找不到元素会导致错误。）

我使用的RowStyle如下：

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

正如你所看到的，我评论了一些更多的视觉状态。您需要注释掉MouseOver VisualState故事板，Normal Selected故事板，MouseOver Selected故事板和Unfocused Selected故事板。

（请注意：我没有删除这些视觉状态，我只评论了他们过去做过的事情。）

这是我的完整代码供参考:(首先是XAML，然后是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

希望这会有所帮助。

谢谢，斯科特

Answer 2

是的你必须改变Style和ControlTemplate，但是你使用experssion混合来编辑XAML吗？ Blend是最简单的工具。

尝试更改标准按钮或ListBox的ControlTemplate，一旦感觉舒适，请转到DatGrid。为什么我建议这是因为DataGrid是不同UIElements的复杂组合所以对于初学者来说控制模板很难理解。

特定于MouseOver效果删除 - 控件模板中会有一个 VSM 标记，其中包含一些故事板，只需删除<vsm:VisualState x:Name="MouseOver">的标记，您就可以了。

Silverlight 2.0 DataGrid如何删除鼠标悬停效果

2 个答案: