Adding a Button to a WPF DataGrid

Question

Hi,

I want to create a DataGrid control in WPF in which there is a button in the first cell of each row. Clicking this button will show RowDetailsTemplate or SubRow. My concern is How do i add a button which will show/Hide the RowDetailsTemplate?

Any help will be greatly appreciated

Thanks

Answer 1

Hi,

Check this out :

XAML:

        <DataGrid Name="DataGrid1">
            <DataGrid.Columns>
                <DataGridTemplateColumn>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Button Click="ChangeText">Show/Hide</Button>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>

Method:

    private void ChangeText(object sender, RoutedEventArgs e)
    {
        DemoModel model = (sender as Button).DataContext as DemoModel;
        model.DynamicText = (new Random().Next(0, 100).ToString());
    }

Class :

class DemoModel : INotifyPropertyChanged
{
    protected String _text;
    public String Text
    {
        get { return _text; }
        set { _text = value; RaisePropertyChanged("Text"); }
    }

    protected String _dynamicText;
    public String DynamicText
    {
        get { return _dynamicText; }
        set { _dynamicText = value; RaisePropertyChanged("DynamicText"); }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    public void RaisePropertyChanged(String propertyName)
    {
        PropertyChangedEventHandler temp = PropertyChanged;
        if (temp != null)
        {
            temp(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

Initialization Code:

        ObservableCollection<DemoModel> models = new ObservableCollection<DemoModel>();
        models.Add(new DemoModel() { Text = "Some Text #1." });
        models.Add(new DemoModel() { Text = "Some Text #2." });
        models.Add(new DemoModel() { Text = "Some Text #3." });
        models.Add(new DemoModel() { Text = "Some Text #4." });
        models.Add(new DemoModel() { Text = "Some Text #5." });
        DataGrid1.ItemsSource = models;

Answer 2

First create a DataGridTemplateColumn to contain the button:

<DataGridTemplateColumn>
  <DataGridTemplateColumn.CellTemplate> 
    <DataTemplate> 
      <Button Click="ShowHideDetails">Details</Button> 
    </DataTemplate> 
  </DataGridTemplateColumn.CellTemplate> 
</DataGridTemplateColumn>

When the button is clicked, update the containing DataGridRow's DetailsVisibility:

void ShowHideDetails(object sender, RoutedEventArgs e)
{
  for(var vis=sender as Visual; vis!=null; vis = VisualTreeHelper.GetParent(vis) as Visual)
    if(vis is DataGridRow)
    {
      var row = (DataGridRow)vis;
      row.DetailsVisibility = 
        row.DetailsVisibility==Visibility.Visible ? Visibility.Collapsed : Visibility.Visible;
      break;
    }
}