2016-09-07 6 views
1

データを含むxamlデータグリッドがあり、mvvmを使用しています。 編集した後、自分の細胞の色が変わってほしいです。後で使用するために色を保存しても構いません。セルの内容を編集した直後に視覚的な変更が必要です。行をコミットせずにEnterキーを押したときに次の行に移動

私は(私は背後にあるコードを避けたかったが、それは純粋に視覚的なので、私はそれは完全に罰金だと思う)の背後にあるコードのビットを使用することにより、前述の動作を実現することができました:

private void MyGrid_CellEditEnding(object sender, DataGridCellEditEndingEventArgs e) 
{ 
    FrameworkElement element = e.Column.GetCellContent(MyGrid.SelectedItem); 
    (element.Parent as DataGridCell).Background = (SolidColorBrush)Application.Current.Resources["EditedCellBackground"]; 
} 

これは正常に動作します選択された行にフォーカスがある限りです。つまり、同じ行で前後にタブを移動でき、編集されたセルの背景色が指定されています。

Enterを押すと、行が確定し、カーソルが次の行に移動し、編集されたセルの背景が元の色に戻ります。完全のために

は、ここではデータグリッド(マイナスいくつかの列が)です:ここでは

<DataGrid Style="{StaticResource MainContentDataGridTheme}" 
        ItemsSource="{Binding Source={StaticResource Categories}}" 
        Grid.Row="1" 
        x:Name="MyGrid" 
        CellEditEnding="MyGrid_CellEditEnding"> 
    <DataGrid.GroupStyle> 
     <GroupStyle> 
      <GroupStyle.Panel> 
       <ItemsPanelTemplate> 
        <DataGridRowsPresenter/> 
       </ItemsPanelTemplate> 
      </GroupStyle.Panel> 
      <GroupStyle.ContainerStyle> 
       <Style TargetType="{x:Type GroupItem}"> 
        <Setter Property="Template"> 
         <Setter.Value> 
          <ControlTemplate TargetType="{x:Type GroupItem}"> 
           <Expander Name="expander" IsExpanded="True"> 
            <Expander.Header> 
             <StackPanel> 
              <TextBlock Text="{Binding Name}" FontWeight="DemiBold" FontSize="13" /> 
              <TextBlock Text="{Binding ItemCount, StringFormat={}Items: {0}}" FontSize="9" /> 
             </StackPanel> 
            </Expander.Header> 
            <ItemsPresenter /> 
           </Expander> 
          </ControlTemplate> 
         </Setter.Value> 
        </Setter> 
       </Style> 
      </GroupStyle.ContainerStyle> 
     </GroupStyle> 
    </DataGrid.GroupStyle> 
    <DataGrid.ColumnHeaderStyle> 
     <Style TargetType="DataGridColumnHeader"> 
      <Setter Property="HorizontalContentAlignment" Value="Right" /> 
      <Setter Property="ContentTemplate"> 
       <Setter.Value> 
        <DataTemplate> 
         <TextBlock TextWrapping="WrapWithOverflow" TextTrimming="CharacterEllipsis" Text="{Binding}"></TextBlock> 
        </DataTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </DataGrid.ColumnHeaderStyle> 
    <DataGrid.Columns> 
     <DataGridTextColumn Width="25*" Binding="{Binding AppliedPercentage, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" 
          Header="Applied %"> 
      <DataGridTextColumn.CellStyle> 
       <Style> 
        <Setter Property="UIElement.IsEnabled" Value="{Binding IsEnabled}" /> 
        <Setter Property="TextBlock.TextAlignment" Value="Right" /> 
       </Style> 
      </DataGridTextColumn.CellStyle> 
    </DataGrid.Columns> 
</DataGrid> 

は、DataGridのスタイルです:

<Style TargetType="DataGrid" x:Key="MainContentDataGridTheme"> 
    <Setter Property="AutoGenerateColumns" Value="False"/> 
    <Setter Property="ScrollViewer.CanContentScroll" Value="True"/> 
    <Setter Property="HeadersVisibility" Value="Column"/> 
    <Setter Property="AlternatingRowBackground" Value="{StaticResource DataGridAlternatingRowColor}" /> 
    <Setter Property="Margin" Value="10,10,10,0" /> 
    <Setter Property="CanUserDeleteRows" Value="False" /> 
    <Setter Property="CanUserAddRows" Value="False" /> 
    <Style.Resources> 
     <Style TargetType="DataGridCell"> 
      <Style.Setters> 
       <Setter Property="TextBlock.TextAlignment" Value="Right" /> 
      </Style.Setters> 
     </Style> 
    </Style.Resources> 
</Style> 

どのように編集されたセルの背景を保つことができますEnterキーの動作を維持しながら?私は行のコミットを失うことに気をつけません(UpdateSourceTriggerは私のプロパティを更新してくれます)。しかし、私は絶対にEnterキーの動作を保つことを望んでいます。つまり、直接セルに移動します(次の行、 )、すぐにコンテンツを編集する立場にいること。研究のビットの後

おかげ

答えて

1

、および様々なものを試して、私はようやく私の要件を満たしている回避策を見つけました。

Iは、次の操作を行う後ろもう少しコードを追加:

  • 行を無効にし、その元の色にリセットするために編集されたセルのバックグラウンドを防ぐためにコミット。
  • Enterキーの動作を人為的に再現するためにKeyUpイベントをキャッチします。

ので、XAMLで、私は私のデータグリッドに2次のプロパティを追加しました:これが、

private void MyGrid_RowEditEnding(object sender, DataGridRowEditEndingEventArgs e) 
{ 
    // Prevents the row to be committed, but disable the "go to next row" behaviour 
    e.Cancel = true; 
} 

private void MyGrid_KeyUp(object sender, KeyEventArgs e) 
{ 
    var uiElement = e.OriginalSource as UIElement; 
    if (e.Key == Key.Enter && uiElement != null) 
    { 
     // Handle the key press as normal (-> validate the input) 
      e.Handled = true; 
      // Get the next element in the UI 
      var nextUIElement = uiElement.PredictFocus(FocusNavigationDirection.Down); 
      // Check if there if the next element is not null. This would occur with the last row of the grid. 
      if (nextUIElement != null) 
      { 
       // Check if the element is a cell, rather than something else like an expander for instance... 
       if (nextUIElement.GetType().Equals(typeof(DataGridCell))) 
       { 
        DataGridCellInfo nextCellInfo = new DataGridCellInfo((DataGridCell)nextUIElement); 
        // Set the selected row 
        PrelimsGrid.SelectedItem = nextCellInfo.Item; 
        // Set the selected cell. 
        PrelimsGrid.CurrentCell = nextCellInfo; 
       } 
       else 
       { 
        PrelimsGrid.SelectedItem = uiElement.MoveFocus(new TraversalRequest(FocusNavigationDirection.Down)); 
       } 
      } 
     } 
    } 
} 

RowEditEnding="MyGrid_RowEditEnding" 
KeyUp="MyGrid_KeyUp" 

そして、背後にあるコードでは、私が対応するメソッドを実装しました私は非常に経験豊かな開発者ではないことを謙虚に認めており、改善や代替ソリューションについて読んでいただければ幸いです。

関連する問題