如何風格的自定義控制鼠標懸停 - 懸停 - 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

回答

相關問題