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

时间:2020-03-06 14:57:35  来源:igfitidea点击:

我只是从SL和WPF开始。我正在使用DataGrid控件,并且需要删除鼠标悬停效果(实际上,我将需要做更多的自定义操作)。我该怎么做呢。我想我需要使用控件模板来完成此操作,但不确定如何操作。我正在研究和阅读。任何帮助,将不胜感激。

解决方案

是的,我们必须更改Style和ControlTemplate,但是我们是否正在使用expersion blend编辑XAML? Blend是执行此操作的最简单工具。

尝试更改"标准按钮"或者"列表框"的ControlTemplate,一旦感觉舒适,然后转到DatGrid。为什么我建议使用DataGrid是不同UIElements的复杂组合,所以对于初学者而言,控件模板将很难理解。

特定于MouseOver效果删除控件模板中将有一个VSM标签,其中包含一些情节提要,只需使用<vsm:VisualState x:Name =" MouseOver">`删除该情节提要即可。

简短的答案是使用样式。长答案如下:

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情节提要,"普通选定"情节提要," MouseOver选定"情节提要和"未重点选定"情节提要。

(请注意:我没有删除这些视觉状态,只是注释掉了它们过去的工作。)

这是我的完整代码,以供参考:(首先是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

希望这可以帮助。

谢谢,
史考特