DataGridRow 背景颜色的 WPF 样式触发器被 AlternatingRowBackground 画笔取代

发布于 2024-09-16 23:52:41 字数 4332 浏览 7 评论 0原文

我有一个 WPF DataGrid,它有一个 AlternatingRowBackground 画笔。它被配置为每隔一行着色。我想在鼠标悬停时执行一些操作来突出显示当前行。然而,Style Trigger 似乎输给了 AlternatingRowBackground 画笔。当鼠标悬停在...上时,我得到了所需的行着色...但仅限于未使用 AlternatingRowBackground 画笔绘制的行。

这是 Windows.Resources 中的样式:

<Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Skins/MainSkin.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <Style TargetType="{x:Type DataGridRow}">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver"
                             Value="True">
                        <Setter Property="Background"
                                Value="Red" />
                        <Setter Property="FontWeight"
                                Value="ExtraBold" />
                        <Setter Property="Height"
                                Value="20" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ResourceDictionary>
    </Window.Resources>

这是 DataGrid:

    <DataGrid Margin="25,15,25,0"
              VerticalAlignment="Top"
              ItemsSource="{Binding DocumentTypeList}"
              AutoGenerateColumns="False"
              Height="500"
              AlternationCount="2"
              FrozenColumnCount="2"
              AlternatingRowBackground="{DynamicResource AlternatingRow}">
        <DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding Abbreviation}"
                                Header="Abbreviation" />
            <DataGridTextColumn Binding="{Binding Title}"
                                Header="Title" />

            <DataGridTextColumn Binding="{Binding Fee}"
                                Header="Fee" />
            <DataGridTextColumn Binding="{Binding SpecialInstructions}"
                                Header="Special Instructions" />
        </DataGrid.Columns>
    </DataGrid>

有没有办法宣布绝对获胜者?问题是一个等级问题吗?在我看来,AlternatingRowBackground 画笔胜出,因为它与声明的最具体部分直接相关。

更新:这是基于@Val的指导的正确语法:

<Window.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="/Skins/MainSkin.xaml" />
        </ResourceDictionary.MergedDictionaries>
        <Style TargetType="{x:Type DataGridRow}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver"
                         Value="True">
                    <Setter Property="Background"
                            Value="Red" />
                    <Setter Property="FontWeight"
                            Value="ExtraBold" />
                    <Setter Property="Height"
                            Value="20" />
                </Trigger>
            </Style.Triggers>
        </Style>
        <Style TargetType="{x:Type DataGrid}">
            <Setter Property="AlternatingRowBackground" Value="{DynamicResource AlternatingRow}"/>
        </Style>
    </ResourceDictionary>
</Window.Resources>

以及DataGrid(减去AlternatingRowBackground画笔):

<DataGrid Margin="25,15,25,0"
              VerticalAlignment="Top"
              ItemsSource="{Binding DocumentTypeList}"
              AutoGenerateColumns="False"
              Height="500"
              AlternationCount="2"
              FrozenColumnCount="2">
        <DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding Abbreviation}"
                                Header="Abbreviation" />
            <DataGridTextColumn Binding="{Binding Title}"
                                Header="Title" />

            <DataGridTextColumn Binding="{Binding Fee}"
                                Header="Fee" />
            <DataGridTextColumn Binding="{Binding SpecialInstructions}"
                                Header="Special Instructions" />
        </DataGrid.Columns>
    </DataGrid>

I have a WPF DataGrid which has an AlternatingRowBackground brush. It's configured to color every other row. I'd like to do something on mouse over that highlights the current row. However, the Style Trigger seems to be losing out to the AlternatingRowBackground brush. I get the desired row coloration on the mouse over... but only on the rows that are not painted with the AlternatingRowBackground brush.

Here is the Style in Windows.Resources:

<Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Skins/MainSkin.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <Style TargetType="{x:Type DataGridRow}">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver"
                             Value="True">
                        <Setter Property="Background"
                                Value="Red" />
                        <Setter Property="FontWeight"
                                Value="ExtraBold" />
                        <Setter Property="Height"
                                Value="20" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ResourceDictionary>
    </Window.Resources>

And here is the DataGrid:

    <DataGrid Margin="25,15,25,0"
              VerticalAlignment="Top"
              ItemsSource="{Binding DocumentTypeList}"
              AutoGenerateColumns="False"
              Height="500"
              AlternationCount="2"
              FrozenColumnCount="2"
              AlternatingRowBackground="{DynamicResource AlternatingRow}">
        <DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding Abbreviation}"
                                Header="Abbreviation" />
            <DataGridTextColumn Binding="{Binding Title}"
                                Header="Title" />

            <DataGridTextColumn Binding="{Binding Fee}"
                                Header="Fee" />
            <DataGridTextColumn Binding="{Binding SpecialInstructions}"
                                Header="Special Instructions" />
        </DataGrid.Columns>
    </DataGrid>

Is there a way to declare the absolute winner? Is the issue one of a hierarchy? It seems to me that the AlternatingRowBackground brush wins out because it is directly associated with the most specific part of the declaration.

Update: Here is the correct syntax, based upon @Val's guidance:

<Window.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="/Skins/MainSkin.xaml" />
        </ResourceDictionary.MergedDictionaries>
        <Style TargetType="{x:Type DataGridRow}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver"
                         Value="True">
                    <Setter Property="Background"
                            Value="Red" />
                    <Setter Property="FontWeight"
                            Value="ExtraBold" />
                    <Setter Property="Height"
                            Value="20" />
                </Trigger>
            </Style.Triggers>
        </Style>
        <Style TargetType="{x:Type DataGrid}">
            <Setter Property="AlternatingRowBackground" Value="{DynamicResource AlternatingRow}"/>
        </Style>
    </ResourceDictionary>
</Window.Resources>

And the DataGrid (minus the AlternatingRowBackground brush):

<DataGrid Margin="25,15,25,0"
              VerticalAlignment="Top"
              ItemsSource="{Binding DocumentTypeList}"
              AutoGenerateColumns="False"
              Height="500"
              AlternationCount="2"
              FrozenColumnCount="2">
        <DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding Abbreviation}"
                                Header="Abbreviation" />
            <DataGridTextColumn Binding="{Binding Title}"
                                Header="Title" />

            <DataGridTextColumn Binding="{Binding Fee}"
                                Header="Fee" />
            <DataGridTextColumn Binding="{Binding SpecialInstructions}"
                                Header="Special Instructions" />
        </DataGrid.Columns>
    </DataGrid>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

迷荒 2024-09-23 23:52:41

有两种方法可以做到这一点,但都不是特别明显。由于 DataGridRow 将背景属性从父 DataGrid 传输(在代码中)到行中的本地值,正如您所指出的,它将优先于触发器设置的值。

第一种(也是最简单的)方法是不使用 AlternatingRowBackground 或 RowBackground,而是按照 Val 建议使用触发器来交替背景颜色。但他的示例并不完整,并且无法按原样运行。正确的样式和用法如下。请注意,您需要在 DataGrid 上设置 AlternationCount,否则行将永远不会获得交替索引。

<DataGrid AlternationCount="2">
    <DataGrid.RowStyle>
        <Style TargetType="DataGridRow">
            <Setter Property="Background" Value="White"/>
            <Setter Property="FontWeight" Value="Normal"/>
            <Style.Triggers>
                <Trigger Property="AlternationIndex" Value="1">
                    <Setter Property="Background" Value="Wheat"/>
                    <Setter Property="FontWeight" Value="Bold"/>
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Khaki"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </DataGrid.RowStyle>
</DataGrid>

第二个选项是使用 VisualStateManager。这使您可以更好地控制不同的视觉状态,但它更冗长。幸运的是,使用 Blend 复制默认控件模板非常容易。除了处于 MouseOver 状态的 Storyboard 以及我在 selectedScrollingGrid 上设置背景之外,以下大部分内容均未更改。

抱歉,包装,但就像我说的,它有点冗长。

<DataGrid AlternationCount="2" AlternatingRowBackground="Wheat">
  <DataGrid.RowStyle>
    <Style TargetType="DataGridRow">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="DataGridRow">
            <Border x:Name="DGR_Border" 
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    SnapsToDevicePixels="True">
              <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                  <VisualState x:Name="Normal"/>
                  <VisualState x:Name="Normal_AlternatingRow"/>
                  <VisualState x:Name="Unfocused_Editing"/>
                  <VisualState x:Name="Normal_Editing"/>
                  <VisualState x:Name="Unfocused_Selected"/>
                  <VisualState x:Name="Normal_Selected"/>
                  <VisualState x:Name="MouseOver_Unfocused_Editing"/>
                  <VisualState x:Name="MouseOver_Editing"/>
                  <VisualState x:Name="MouseOver_Unfocused_Selected"/>
                  <VisualState x:Name="MouseOver_Selected"/>
                  <VisualState x:Name="MouseOver">
                    <Storyboard Storyboard.TargetName="Highlight">
                      <ColorAnimation Duration="0" Storyboard.TargetProperty="Color" To="Khaki"/>
                    </Storyboard>
                  </VisualState>
                </VisualStateGroup>
              </VisualStateManager.VisualStateGroups>
              <SelectiveScrollingGrid x:Name="selectiveScrollingGrid">
                <SelectiveScrollingGrid.Background>
                  <SolidColorBrush x:Name="Highlight" Color="Transparent"/>
                </SelectiveScrollingGrid.Background>
                <SelectiveScrollingGrid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition Width="*"/>
                </SelectiveScrollingGrid.ColumnDefinitions>
                <SelectiveScrollingGrid.RowDefinitions>
                  <RowDefinition Height="*"/>
                  <RowDefinition Height="Auto"/>
                </SelectiveScrollingGrid.RowDefinitions>
                <DataGridCellsPresenter Grid.Column="1" ItemsPanel="{TemplateBinding ItemsPanel}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                <DataGridDetailsPresenter Grid.Column="1" Grid.Row="1" SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding AreRowDetailsFrozen, ConverterParameter={x:Static SelectiveScrollingOrientation.Vertical}, Converter={x:Static DataGrid.RowDetailsScrollingConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" Visibility="{TemplateBinding DetailsVisibility}"/>
                <DataGridRowHeader Grid.RowSpan="2" SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Row}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
              </SelectiveScrollingGrid>
            </Border>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </DataGrid.RowStyle>
</DataGrid>

There's two ways to do this, neither is particularly obvious. Since DataGridRow transfers (in code) the background property from the parent DataGrid to a local value in the row, as you noted it will take precedence over the value set by your trigger.

The first (and simplest) way is to not use the AlternatingRowBackground or RowBackground but instead use triggers to alternate the background color as Val suggested. His example is not complete though and will not work as-is. The correct style and usage would be as follows. Note that you need to set the AlternationCount on DataGrid or else the rows will never get alternating indexes.

<DataGrid AlternationCount="2">
    <DataGrid.RowStyle>
        <Style TargetType="DataGridRow">
            <Setter Property="Background" Value="White"/>
            <Setter Property="FontWeight" Value="Normal"/>
            <Style.Triggers>
                <Trigger Property="AlternationIndex" Value="1">
                    <Setter Property="Background" Value="Wheat"/>
                    <Setter Property="FontWeight" Value="Bold"/>
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Khaki"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </DataGrid.RowStyle>
</DataGrid>

The second option is to use the VisualStateManager. This gives you far more control over the different visual states but it is more verbose. Fortunately it's quite easy to copy the default control template using Blend. Most of the following is unchanged except the Storyboard in the MouseOver state and I've set a background on the selectiveScrollingGrid.

Sorry for the wrap, but like I said, it's a bit more verbose.

<DataGrid AlternationCount="2" AlternatingRowBackground="Wheat">
  <DataGrid.RowStyle>
    <Style TargetType="DataGridRow">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="DataGridRow">
            <Border x:Name="DGR_Border" 
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    SnapsToDevicePixels="True">
              <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                  <VisualState x:Name="Normal"/>
                  <VisualState x:Name="Normal_AlternatingRow"/>
                  <VisualState x:Name="Unfocused_Editing"/>
                  <VisualState x:Name="Normal_Editing"/>
                  <VisualState x:Name="Unfocused_Selected"/>
                  <VisualState x:Name="Normal_Selected"/>
                  <VisualState x:Name="MouseOver_Unfocused_Editing"/>
                  <VisualState x:Name="MouseOver_Editing"/>
                  <VisualState x:Name="MouseOver_Unfocused_Selected"/>
                  <VisualState x:Name="MouseOver_Selected"/>
                  <VisualState x:Name="MouseOver">
                    <Storyboard Storyboard.TargetName="Highlight">
                      <ColorAnimation Duration="0" Storyboard.TargetProperty="Color" To="Khaki"/>
                    </Storyboard>
                  </VisualState>
                </VisualStateGroup>
              </VisualStateManager.VisualStateGroups>
              <SelectiveScrollingGrid x:Name="selectiveScrollingGrid">
                <SelectiveScrollingGrid.Background>
                  <SolidColorBrush x:Name="Highlight" Color="Transparent"/>
                </SelectiveScrollingGrid.Background>
                <SelectiveScrollingGrid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition Width="*"/>
                </SelectiveScrollingGrid.ColumnDefinitions>
                <SelectiveScrollingGrid.RowDefinitions>
                  <RowDefinition Height="*"/>
                  <RowDefinition Height="Auto"/>
                </SelectiveScrollingGrid.RowDefinitions>
                <DataGridCellsPresenter Grid.Column="1" ItemsPanel="{TemplateBinding ItemsPanel}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                <DataGridDetailsPresenter Grid.Column="1" Grid.Row="1" SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding AreRowDetailsFrozen, ConverterParameter={x:Static SelectiveScrollingOrientation.Vertical}, Converter={x:Static DataGrid.RowDetailsScrollingConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" Visibility="{TemplateBinding DetailsVisibility}"/>
                <DataGridRowHeader Grid.RowSpan="2" SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Row}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
              </SelectiveScrollingGrid>
            </Border>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </DataGrid.RowStyle>
</DataGrid>
浮云落日 2024-09-23 23:52:41

过去对这种事情对我有用的是在触发器之外使用设置器,例如:

<Style TargetType="{x:Type DataGridRow}">
    <Style.Triggers>
        <Trigger Property="IsMouseOver"
                 Value="True">
             <Setter Property="Background"
                     Value="Red" />
             <Setter Property="FontWeight"
                     Value="ExtraBold" />
             <Setter Property="Height"
                     Value="20" />
        </Trigger>
    </Style.Triggers>
    <Setter Property="AlternatingRowBackground"
            Value="{DynamicResource AlternatingRow}"/>
</Style>

并且它们删除 DataGrid 本身上的属性绑定。尽管我通常使用数据触发器来执行此操作,而不是使用动态资源绑定。但仍然值得一试

What's worked for me in the past with this kind of thing, is to use a setter outside the triggers eg:

<Style TargetType="{x:Type DataGridRow}">
    <Style.Triggers>
        <Trigger Property="IsMouseOver"
                 Value="True">
             <Setter Property="Background"
                     Value="Red" />
             <Setter Property="FontWeight"
                     Value="ExtraBold" />
             <Setter Property="Height"
                     Value="20" />
        </Trigger>
    </Style.Triggers>
    <Setter Property="AlternatingRowBackground"
            Value="{DynamicResource AlternatingRow}"/>
</Style>

And them remove the property binding on the DataGrid itself. Although I usually do this with data triggers, and not usually with dynamic resource bindings. But still might be worth a shot

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文