UWPグリッドの行/列のマウスの効果

Question

プログラムでグリッドを作成しましたが、今ではマウスが終わった行+列を何とかしたいとは思っていません。

ここで私は列に...のmouseOver /入力/まま、または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); 
    } 
} 

これは私が試してみました

次の出力が生成される列/行をハイライト表示するには、以下の

追加されたアイテムの最後のセットのみが表示され、最後の 'mo下図のようにuseover、例えば、行 『効果的な」影響を受けた項目です』：

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); 
} 

次がある解決私はPointerEnteredとPointerExitedイベントがあります

Answer 1

についてはかなり満足しているが、これらはその結果、オーバーホバリング{75％、11}ビューではなく、行/列で表示されます。各行+列の交差点にビューを追加し、それを使用して希望する視覚効果を表示します。例えば

：これを行うにはより多くの慣用的な方法は、「PointerOver」VisualStateイベントからを設定し、XAMLでストーリーボードに効果の詳細を処理するだろうと

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); 
      }; 
    } 
} 

注意。このアプローチは、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) => 
     { 
      ... 
     }