Silverlight 2.0 DataGrid如何删除鼠标悬停效果
我只是从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
希望这可以帮助。
谢谢,
史考特