Question

我已经以编程方式制作了一个网格，现在我不知道如何以鼠标结束的方式对行+列进行加工。

我在列上找了一个mouseOver / Enter / Leave或IsMouseOver ...但似乎它们不在那里......

这里是Xaml代码

<UserControl
x:Class="moo_data_sheets.Views.MoraleView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:moo_data_sheets.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">

<Grid x:Name="MoraleGrid" />

</UserControl>

背后的相关代码：

MoraleGrid.ColumnDefinitions.Add(new ColumnDefinition()); // Header
MoraleGrid.RowDefinitions.Add(new RowDefinition()); // Header

// Create columns
List<int> morales = new List<int>();
for (int i = 100; i > 40; i -= 5)
    morales.Add(i);

foreach (var item in morales)
    MoraleGrid.ColumnDefinitions.Add(new ColumnDefinition()); // Header

// Create Rows
List<int> population = new List<int>();
for (int i = 1; i <= 20; i++)
    population.Add(i);

foreach (var item in population)
    MoraleGrid.RowDefinitions.Add(new RowDefinition()); // Header
...

我是UWP的新手，所以我不确定我在寻找什么，感谢任何帮助。

更新 - 1 我尝试了David Oliver建议的方法，但它给了我一些问题。

我想要的效果，是我鼠标悬停的行/列的一点亮点。

我的原始代码已经为着色添加了边框，以下代码段是原始代码

// Function for creating the color I like for the morale table as function
// of the strike size.
Func<int, Border> getStrikeSizeBorder = (strike) =>
{
    Dictionary<int, Brush> colors = new Dictionary<int, Brush>()
    {
        {0, new SolidColorBrush(Windows.UI.Color.FromArgb(155, 183, 255, 205)) },
        {1, new SolidColorBrush(Windows.UI.Color.FromArgb(155, 252, 232, 178)) },
        {2, new SolidColorBrush(Windows.UI.Color.FromArgb(155, 244, 199, 195)) },
        {3, new SolidColorBrush(Windows.UI.Color.FromArgb(155, 255, 153, 0)) }
    };

    return new Border
    {
        Background = colors.ContainsKey(strike)
            ? colors[strike]
            : new SolidColorBrush(Windows.UI.Color.FromArgb(255, 255, 0, 255))
    };
};

// Fill the table with the actual values
// The trick is the casting to int the floors the value.
for (int i = 0; i < morales.Count; ++i)
{
    for (int j = 0; j < population.Count; ++j)
    {
        int strikeSize = (100 - morales[i]) * population[j] / 100;

        var item = getStrikeSizeBorder(strikeSize);
        item.Child = CreateTextBlockCenteredText(strikeSize.ToString()); ;

        Grid.SetRow(item, j + 1);
        Grid.SetColumn(item, i + 1);
        MoraleGrid.Children.Add(item);
    }
}

这会产生以下输出

我尝试了以下内容来突出显示列/行

for (int i = 1; i < MoraleGrid.ColumnDefinitions.Count; i++)
{
    var border = new Border { Background = new SolidColorBrush(Colors.Transparent) };
    MoraleGrid.Children.Add(border);

    Grid.SetColumn(border, i);
    Grid.SetRow(border, 1);
    Grid.SetRowSpan(border, MoraleGrid.RowDefinitions.Count - 1);
    border.PointerEntered += (o, e) =>
        border.Background = new SolidColorBrush(Colors.Tomato);

    border.PointerExited += (o, e) =>
        border.Background = new SolidColorBrush(Colors.Transparent);
}

for (int i = 1; i < MoraleGrid.RowDefinitions.Count; i++)
{
    var border = new Border { Background = new SolidColorBrush(Colors.Transparent) };
    MoraleGrid.Children.Add(border);

    Grid.SetColumn(border, 1);
    Grid.SetRow(border, i);
    Grid.SetColumnSpan(border, MoraleGrid.ColumnDefinitions.Count - 1);
    border.PointerEntered += (o, e) =>
        border.Background = new SolidColorBrush(Colors.Tomato);

    border.PointerExited += (o, e) =>
        border.Background = new SolidColorBrush(Colors.Transparent);
}

但只有最后一组添加的项目可见，并且只有最后一个鼠标悬停＆＃39;受影响的项目是有效的，例如，行，如下所示：

以下代码片段基于@ DavidOliver的答案解决了问题

...
// When making the relevant border items, I add them to a list for later
activeElements.Add(item);
...
Action<Border> AddHighLight = (I) =>
{
    var rightOfI = activeElements
        .Where(X =>
                Grid.GetColumn(X) < Grid.GetColumn(I)
                && Grid.GetRow(X) == Grid.GetRow(I))
        .ToArray();

    var aboveI = activeElements
        .Where(X =>
                Grid.GetColumn(X) == Grid.GetColumn(I)
                && Grid.GetRow(X) < Grid.GetRow(I))
        .ToArray();

    double w = 0.5;
    I.PointerEntered += (o, e) =>
    {
        I.BorderThickness = new Thickness(0, 0, w, w);
        foreach (var item in aboveI)
            item.BorderThickness = new Thickness(w, 0, w, 0);
        foreach (var item in rightOfI)
            item.BorderThickness = new Thickness(0, w, 0, w);
    };

    I.PointerExited += (o, e) =>
    {
        I.BorderThickness = new Thickness(0);
        foreach (var item in aboveI)
            item.BorderThickness = new Thickness(0);
        foreach (var item in rightOfI)
            item.BorderThickness = new Thickness(0);
    };
};

foreach (var item in activeElements)
{
    AddHighLight(item);
}

以下是结果，徘徊在{75％，11}，我很高兴

Answer 1

有PointerEntered和PointerExited个事件，但这些事件是在视图上，而不是行/列。您可以为每个行+列交叉添加一个视图，并使用它来显示您想要的视觉效果。

例如：

for (int i = 0; i < MoraleGrid.ColumnDefinitions.Count; i++)
{
    for (int j = 0; j < MoraleGrid.RowDefinitions.Count; j++)
    {
        var border = new Border { Background = new SolidColorBrush(Colors.Transparent) };
        MoraleGrid.Children.Add(border);

        Grid.SetColumn(border, i);
        Grid.SetRow(border, j);

        border.PointerEntered += (o, e) =>
            {
                border.Background = new SolidColorBrush(Colors.Tomato);
            };
        border.PointerExited += (o, e) =>
            {
                border.Background = new SolidColorBrush(Colors.Transparent);
            };
    }
}

请注意，执行此操作的更惯用方法是从事件中设置“PointerOver”VisualState，然后在Xaml中的Storyboard中处理效果的详细信息。您可以在某些框架控件的默认样式中看到此方法，例如ToggleButton。

更新：在你添加的代码中，行高亮显示在可视树中最重要（因为它们最后添加），因此它们会从接收指针事件中掩盖列高亮。

由于你已经在每个'单元格中放置了边框'，我只想在那里添加指针处理逻辑：

    var item = getStrikeSizeBorder(strikeSize);
    item.PointerEntered += (o, e) =>
      {
          var column = Grid.GetColumn(item);
          foreach (var child in MoraleGrid.Children.Where(child => Grid.GetColumn((FrameworkElement)child) == column))
          {
              //Set highlight colour
          }

          ...etc
      };
    item.PointerExited += (o, e) =>
      {
           ...
      }

UWP网格行/列鼠标效果

1 个答案: