首页 > 解决方案 > wpf鼠标悬停网格行第一个元素

问题描述

当我将鼠标悬停在网格(项目控制模板)上时是否可以更改一行中第一列和最后一列的字体颜色(我悬停的这个特定行)

我想要的是“RowNumbering”对象在我们悬停他的“父”行时更改字体颜色。排序突出显示该行文本。

把它想象成一张桌子:o 只是一个座位,数字是行号,当我将鼠标悬停在“o”上时,我想更改行号字体颜色。我希望很清楚我的尝试,我确实将 xaml 剥离到最低限度。如果可能的话,也希望通过 xaml 而不是通过代码完成此操作。当我将鼠标悬停在第二行的“o”上时,示例如下。

1 | ○ | ○ | ○ | ○ | 1

2 | ○ | ○ | ○ | ○ | 2

3 | ○ | ○ | ○ | ○ | 3

<ItemsControl ItemsSource="{Binding Seats}" Name="SeatsItems">
    <ItemsControl.RenderTransform>
        <TranslateTransform  X="0" Y="0" />
    </ItemsControl.RenderTransform>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid Name="ParentGrid" local:GridHelpers.RowCount="{Binding RowCount}" 
                  local:GridHelpers.ColumnCount="{Binding ColumnCount}" 
                  ShowGridLines="False" Background="#1C222E" 
                  HorizontalAlignment="Center" VerticalAlignment="Center" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Grid.Row" Value="{Binding RowEx}" />
            <Setter Property="Grid.RowSpan" Value="2" />
            <Setter Property="Grid.Column" Value="{Binding ColumnEx}" />
            <Setter Property="Grid.ColumnSpan" Value="{Binding ColSpan}" />
            <Style.Triggers>
                <!--
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Width" Value="60"/>
                </Trigger>
                -->
            </Style.Triggers>
            <Style.Resources>
                <Style TargetType="{x:Type Rectangle}">
                    <Setter Property="Fill" Value="Blue" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding Status}" Value="Available">
                            <Setter Property="Stroke" Value="#5D606D" />
                            <Setter Property="Fill" Value="#5D606D" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Style.Resources>
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.Resources>
        <DataTemplate DataType="{x:Type local:Seat}">
            <Canvas Name="Canv" Width="30" Height="30" Margin="4" Background="Transparent" 
                    Tag="{Binding ID}">
                <Rectangle Name="RecTop" Canvas.Top="4" Canvas.Left="1" Width="28" 
                           Height="18" RadiusX="2" RadiusY="2" />
                <Rectangle Name="RecBot" Canvas.Top="23" Canvas.Left="1" Width="28" 
                           Height="7" RadiusX="2" RadiusY="2" />
                <!-- <TextBlock Text="{Binding Path=Column}" TextWrapping="Wrap" 
                                TextAlignment="Center" VerticalAlignment="Center"  /> -->
            </Canvas>
        </DataTemplate>
        <DataTemplate DataType="{x:Type local:RowNumbering}">
            <Canvas Width="30" Height="30" Margin="4" Background="Transparent">
                <TextBlock Text="{Binding Path=Text}" Foreground="#5D606D" 
                           TextWrapping="Wrap" TextAlignment="Center" 
                           VerticalAlignment="Center" Width="30" Height="20" 
                           Margin="0,5" />
            </Canvas>
        </DataTemplate>
        <DataTemplate DataType="{x:Type local:Screen}">
            <Canvas Height="5" Margin="0,0,0,33" Background="#EA1C47" ClipToBounds="False">
            </Canvas>
        </DataTemplate>
    </ItemsControl.Resources>
</ItemsControl>

标签: wpfgridrow

解决方案


我认为您使用了错误的控件类型。当您希望 WPF 为您处理控件的布局时,像 Grid 等 WPF 布局控件很有用。但是,在您的情况下,由于 RowEx/ColumnEx 属性,布局已经隐含在您的数据结构中。您正在尝试做的是将复杂的布局要求放入一个并非真正为它设计的布局控件中。您之前已经遇到过这个问题,因此需要使用 GridHelper。它可能不会变得更好。

我以编写航空公司值机系统为生,发现自己实施的系统与您一直在做的非常相似。经验告诉我,在这种情况下,通常最好使用 Canvas。它确实需要您添加现有控件免费提供的大部分功能(例如,特定于行的行为,这是 DataSet 更擅长处理的事情),但它会给您在布局和行为方面的完全灵活性,并且还将更容易进行单元测试。

不过,要回答您的问题,您可以创建一个名为Row透明背景的新类,该类跨越所有列。绑定该控件的 MouseEnter/MouseLeave 事件以更新 中的本地属性Row,并在这些属性中设置/清除RowNumbering该行中出现的两个实例中的突出显示标志。或者,每个实例都RowNumbering可以包含一个指向其对应Row实例的属性,您可以设置一个 DataTrigger 来触发它。


推荐阅读