Binding IsReadOnly of a DataGridTextColumn to a DataGridTemplateColumn checkbox IsChecked

时间:2016-04-15 14:55:48

标签: c# wpf data-binding datagrid

Basically, I have a DataGrid with several columns, and I want to enable (changing the IsReadOnly property) a DataGridTextColumn based on a CheckBox IsChecked, located in another DataGridTemplateColumn of the same DataGrid.

Here is (the important part of) the code:

<DataGrid Name="lstTags" Grid.Row="0" ItemsSource="{Binding Path = LinesCollection}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" AutoGenerateColumns="False" CanUserAddRows="False" CanUserDeleteRows="False" SelectionMode="Single" LostFocus="lstTags_LostFocus" SelectionChanged="lstTags_SelectionChanged">
    <DataGrid.Columns>
        <DataGridTemplateColumn x:Name="colAutoScale" Header="Auto Scale">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <CheckBox x:Name="ckbAutoScale" HorizontalAlignment="Center" IsChecked="{Binding AutoScale, UpdateSourceTrigger=PropertyChanged}"/>
                 </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
        <DataGridTextColumn Header="Scale" Binding="{Binding Path=Scale}" IsReadOnly="{Binding ElementName ckbAutoScale, Path=IsChecked}" Width="60" />
    </DataGrid.Columns>
</DataGrid>

It is worth mentioning that I also want to invert the value of the IsChecked property, that is

  • IsChecked = true => IsReadOnly = false;
  • IsChecked = false => IsReadOnly = true.

I would probably achieve this with a simple Converter, but I need that first part working tho.

EDIT:

Answering a good question, my goal is to disable the adjacent cell (same row), not the whole column.

2 个答案:

答案 0 :(得分:2)

这类问题确实是Model-View-ViewModel (MVVM) pattern存在的原因。

使用MVVM,您可以绑定到具有支持视图所需的确切属性的视图模型。这允许模型更关注需要持久化的数据。

因此,对于您的问题,您需要创建一个LineViewModel,它看起来像这样:

public class LineViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private bool _isAutoScale;
    private double _scale;

    public bool IsAutoScale
    {
        get { return _isAutoScale; }
        set
        {
            if (value == _isAutoScale) return;
            _isAutoScale = value;
            OnPropertyChange("IsAutoScale");
            OnPropertyChange("IsReadOnly");
        }
    }

    public double Scale
    {
        get { return _scale; }
        set
        {
            if (value == _scale) return;
            _scale = value;
            OnPropertyChange("Scale");
        }
    }

    public bool IsReadOnly => !IsAutoScale;

    private void OnPropertyChange(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

同时,您还需要创建一个名为MainWindowViewModel的父视图模型(或者对您的情况有意义的东西)。这是一个非常粗糙的版本:

public class MainWindowViewModel : INotifyPropertyChanged
{
    private List<LineViewModel> _lineViewModels;
    public event PropertyChangedEventHandler PropertyChanged;

    public List<LineViewModel> LineViewModels
    {
        get { return _lineViewModels; }
        set
        {
            if (value == _lineViewModels) return;
            _lineViewModels = value;
            OnPropertyChange("LineViewModels");
        }
    }

    public MainWindowViewModel()
    {
        LineViewModels = new[]
        {
            new { AutoScale = false, Scale = 0.2 },
            new { AutoScale = true, Scale = 0.3 },
            new { AutoScale = false, Scale = 0.4 },
        }
            .Select(
                x => new LineViewModel
                {
                    IsAutoScale = x.AutoScale,
                    Scale = x.Scale
                })
            .ToList();
    }

    private void OnPropertyChange(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

最后,您将更新您的XAML文件,如下所示:

<Window x:Class="Sandbox.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:sandbox="clr-namespace:Sandbox"
        mc:Ignorable="d"
        Title="MainWindow"
        Height="350"
        Width="525">
    <Window.DataContext>
        <sandbox:MainWindowViewModel />
    </Window.DataContext>
    <DataGrid ItemsSource="{Binding LineViewModels}"
              HorizontalAlignment="Stretch"
              VerticalAlignment="Stretch"
              AutoGenerateColumns="False"
              CanUserAddRows="False"
              CanUserDeleteRows="False"
              SelectionMode="Single">
        <DataGrid.Columns>
            <DataGridTemplateColumn Header="Auto Scale">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <CheckBox HorizontalAlignment="Center"
                                  IsChecked="{Binding IsAutoScale}" />
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
            <DataGridTemplateColumn Header="Auto Scale">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <TextBox Text="{Binding Scale}"
                                 IsReadOnly="{Binding IsReadOnly}" />
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
        </DataGrid.Columns>
    </DataGrid>
</Window>

因此,基本上,MainWindow的视图逻辑由MainWindowViewModel确定,DataGrid的每一行的视图逻辑由LineViewModel控制。

请注意,使用库/ NuGet包(如MVVM Light Toolkit和PropertyChanged.Fody)可以简化许多用于实现INotifyPropertyChanged的样板。

答案 1 :(得分:2)

Scale Column使用以下绑定:

 <DataGridTextColumn Header="Scale" Binding="{Binding Path=Scale}" Width="60" >
      <DataGridTextColumn.CellStyle>
           <Style TargetType="DataGridCell">
                <Setter Property="IsEnabled" Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGridCellsPanel}},Path=Children[0].Content.Content.AutoScale}" />
           </Style>
      </DataGridTextColumn.CellStyle>
</DataGridTextColumn>

或只是

<DataGridTextColumn Header="Scale" Binding="{Binding Path=Scale}" Width="60" >
            <DataGridTextColumn.CellStyle>
                <Style TargetType="DataGridCell">
                    <Setter Property="IsEnabled" Value="{Binding Path=AutoScale}" />
                </Style>
            </DataGridTextColumn.CellStyle>
        </DataGridTextColumn>

<强>输出:

ReadOnly

  

PS:以上解决方案1特定于您的代码,因为 Auto Scale   column位于 0 Index,这就是我使用Children[0]的原因   Binding。如果有任何背景需要,请更改。