如何设置自定义控件鼠标Over - MyToolkit.Controls.DataGrid的样式

Question

我正在使用这个工具包 for WinRT，并开发了一个Windows8.1商业应用程序，它有一个数据集来显示应用的参数。

我的应用程序有一个黑色背景，当我将鼠标悬停在网格的项目上(在pc上，而不是在平板电脑上)时，文本就会变成黑色。这样，用户就无法读取悬停下的内容。

我能够改变网格背景，试图在任何地方找到Hover属性，但都没有成功。下面是我改变背景的方法：

<controls:DataGrid Height="Auto"
                       ItemsSource="{Binding Params, Mode=TwoWay}"
                       x:Name="gridParams"
                       Grid.Row="1"
                       View:EventHandlers.Attach="SelectionChanged => SelectionChangedHandler($sender)"

                       DefaultOrderIndex="0">
        <controls:DataGrid.Resources>
            <Style TargetType="controls:DataGrid">
                <Setter Property="Background" Value="Black"/>
            </Style>


        </controls:DataGrid.Resources>....

有人用过这个工具箱吗？

任何帮助都将不胜感激！

谢谢。

Answer 1

如果您查看DataGrid样式，您会注意到，DataGrid的主模板只包含一个NavigationList (工具箱拥有的控件之一)，带有自定义的Style，TransparentListBox，这是ListBox样式的BasedOn。

NavigationList实际上是一个ExtendedListBox，另一个自定义控件。

这两种方法都继承了它们的ItemContainerStyle和ListBox，因为它们不覆盖它。

这意味着每个项目实际上都继承了默认的ListBoxItem Style。

您将从这个Style中注意到一件事:它有一堆已定义的VisualStates，包括：

<VisualState x:Name="PointerOver">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
                                       Storyboard.TargetProperty="Background">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxItemPointerOverBackgroundThemeBrush}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                       Storyboard.TargetProperty="Foreground">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxItemPointerOverForegroundThemeBrush}" />
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

现在，有几种方法可以解决这个问题。最简单(但最具侵入性的)方法是覆盖App.Xaml中的值，如下所示。

<Application
    ...>
    <Application.Resources>
        <SolidColorBrush x:Key="ListBoxItemPointerOverBackgroundThemeBrush" Color="#21000000" />
        <SolidColorBrush x:Key="ListBoxItemPointerOverForegroundThemeBrush" Color="Green" />
    </Application.Resources>
</Application>

不过，这将改变所有ListBoxes的刷子，因此它可能不太理想。

下一个解决方案是仅重写当前控件的ListBoxItem模板。这稍微困难一些，需要更多的代码，但是会出现这样的情况：

<controls:DataGrid
    ...>
    <controls:DataGrid.Template>
        <ControlTemplate TargetType="controls:DataGrid">
            <Grid Background="{TemplateBinding Background}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid Grid.Row="0" Background="{StaticResource ListBoxItemDisabledForegroundThemeBrush}" Height="50" x:Name="titles" />
                <controls:NavigationList BorderThickness="0" Grid.Row="1"
                             HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
                             Style="{StaticResource TransparentListBox}" Margin="0" x:Name="list" >
                    <controls:NavigationList.ItemContainerStyle>
                        <Style TargetType="ListBoxItem">
                            <Setter Property="Background" Value="Transparent" />
                            <Setter Property="TabNavigation" Value="Local" />
                            <Setter Property="Padding" Value="8,10" />
                            <Setter Property="HorizontalContentAlignment" Value="Left" />
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="ListBoxItem">
                                        <Border x:Name="LayoutRoot"
                                                Background="{TemplateBinding Background}"
                                                BorderBrush="{TemplateBinding BorderBrush}"
                                                BorderThickness="{TemplateBinding BorderThickness}">
                                            <VisualStateManager.VisualStateGroups>
                                                <VisualStateGroup x:Name="CommonStates">
                                                    <VisualState x:Name="Normal" />
                                                    <VisualState x:Name="PointerOver">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
                                                                                           Storyboard.TargetProperty="Background">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxItemPointerOverBackgroundThemeBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                                           Storyboard.TargetProperty="Foreground">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxItemPointerOverForegroundThemeBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Disabled">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
                                                                                           Storyboard.TargetProperty="Background">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                                           Storyboard.TargetProperty="Foreground">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxItemDisabledForegroundThemeBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Pressed">
                                                        <Storyboard>
                                                            <DoubleAnimation Storyboard.TargetName="PressedBackground"
                                                                             Storyboard.TargetProperty="Opacity"
                                                                             To="1"
                                                                             Duration="0" />
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                                           Storyboard.TargetProperty="Foreground">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxItemPressedForegroundThemeBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                </VisualStateGroup>
                                                <VisualStateGroup x:Name="SelectionStates">
                                                    <VisualState x:Name="Unselected" />
                                                    <VisualState x:Name="Selected">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerGrid"
                                                                                           Storyboard.TargetProperty="Background">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxItemSelectedBackgroundThemeBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                                           Storyboard.TargetProperty="Foreground">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxItemSelectedForegroundThemeBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="SelectedUnfocused">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerGrid"
                                                                                           Storyboard.TargetProperty="Background">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxItemSelectedBackgroundThemeBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                                           Storyboard.TargetProperty="Foreground">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxItemSelectedForegroundThemeBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="SelectedDisabled">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerGrid"
                                                                                           Storyboard.TargetProperty="Background">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxItemSelectedDisabledBackgroundThemeBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                                           Storyboard.TargetProperty="Foreground">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxItemSelectedDisabledForegroundThemeBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="SelectedPointerOver">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerGrid"
                                                                                           Storyboard.TargetProperty="Background">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxItemSelectedPointerOverBackgroundThemeBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                                           Storyboard.TargetProperty="Foreground">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxItemSelectedForegroundThemeBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="SelectedPressed">
                                                        <Storyboard>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerGrid"
                                                                                           Storyboard.TargetProperty="Background">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxItemSelectedBackgroundThemeBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                                           Storyboard.TargetProperty="Foreground">
                                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxItemSelectedForegroundThemeBrush}" />
                                                            </ObjectAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                </VisualStateGroup>
                                                <VisualStateGroup x:Name="FocusStates">
                                                    <VisualState x:Name="Focused">
                                                        <Storyboard>
                                                            <DoubleAnimation Storyboard.TargetName="FocusVisualWhite"
                                                                             Storyboard.TargetProperty="Opacity"
                                                                             To="1"
                                                                             Duration="0" />
                                                            <DoubleAnimation Storyboard.TargetName="FocusVisualBlack"
                                                                             Storyboard.TargetProperty="Opacity"
                                                                             To="1"
                                                                             Duration="0" />
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Unfocused" />
                                                    <VisualState x:Name="PointerFocused" />
                                                </VisualStateGroup>
                                            </VisualStateManager.VisualStateGroups>
                                            <Grid x:Name="InnerGrid"
                                                  Background="Transparent">
                                                <Rectangle x:Name="PressedBackground"
                                                           Fill="{ThemeResource ListBoxItemPressedBackgroundThemeBrush}"
                                                           Opacity="0" />
                                                <ContentPresenter x:Name="ContentPresenter"
                                                                  Content="{TemplateBinding Content}"
                                                                  ContentTransitions="{TemplateBinding ContentTransitions}"
                                                                  ContentTemplate="{TemplateBinding ContentTemplate}"
                                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                                  Margin="{TemplateBinding Padding}" />
                                                <Rectangle x:Name="FocusVisualWhite"
                                                           Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}"
                                                           StrokeEndLineCap="Square"
                                                           StrokeDashArray="1,1"
                                                           Opacity="0"
                                                           StrokeDashOffset=".5" />
                                                <Rectangle x:Name="FocusVisualBlack"
                                                           Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}"
                                                           StrokeEndLineCap="Square"
                                                           StrokeDashArray="1,1"
                                                           Opacity="0"
                                                           StrokeDashOffset="1.5" />
                                            </Grid>
                                        </Border>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </controls:NavigationList.ItemContainerStyle>
                </controls:NavigationList>
            </Grid>
        </ControlTemplate>
    </controls:DataGrid.Template>
</controls:DataGrid>


    </controls:DataGrid.Template>
</controls:DataGrid>

只需将对ListBoxItemPointerOverBackgroundThemeBrush和ListBoxItemPointerOverForegroundThemeBrush的两个引用替换为任何您想要的新值。

虽然这似乎是一堆麻烦，但你现在可以改变每个项目的颜色，使其成为任何你想在空中徘徊的东西。如果你有一堆这样的东西，你也可以存储自定义的DataGrid Style并重用它。

希望这有助于和快乐的编码！