如何风格的自定义控制鼠标悬停 - 悬停 - MyToolkit.Controls.DataGrid

我使用这个toolkit对WinRT的开发和具有数据网格，以显示应用程序的参数在Windows 8.1的商业应用程序。如何风格的自定义控制鼠标悬停 - 悬停 - MyToolkit.Controls.DataGrid

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

我能够更改网格背景试图在别处找到了哈弗财产，但没有成功。这里是我如何改变背景：使用此工具包

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

已经有人了？

任何帮助将不胜感激！

谢谢。

来源

2014-02-21 Ralph

查看VisualStates。通常有一个用于“PointerOver”，它可以用来改变你的控制风格。 –

@NateDiamond感谢您的评论，但这个对象上没有PointOver。 – Ralph

有，它只是存储在对象的XAML深处。我会添加一个答案，因为对此的解释有点详细。 –

如果你看一下DataGrid Style，有一件事你会发现是，DataGrid的主模板只包含一个NavigationList（这些工具包，一个自己的控件），带有自定义Style，TransparentListBox，这是BasedOn的ListBox风格。

NavigationList的实际上是一个ExtendedListBox，自定义控制中的另一个。

这两者都从ListBox继承它们的ItemContainerStyle，因为它们不覆盖它们。

这意味着每个项目实际上是继承了默认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>

这将改变刷子虽然所有ListBox ES，所以它可能会小于主意。

下一个解决方案是重写只为你的电流控制的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并重新使用它。

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

来源

2014-02-22 02:22:21

您是否在数据网格中发现错误，我应该直接更改其代码/样式？ –

不一定是一个错误，但可能添加一个可重写的ItemStyle属性会使它简单得多。 OP可以自己完成，但我认为只要给他一个纯粹的XAML答案就可以了，他可以使用一次就忘记了。 –

如何风格的自定义控制鼠标悬停 - 悬停 - MyToolkit.Controls.DataGrid

回答

相关问题