WPF Datagrid RowHeader Toggle Button for selected rows

Question

I have a WPF application that contains a datagrid which shows a list of orders. Each order has an ID, however it is possible it can have more than 1 ID (for some reason which I have no control over).

So I use the rowdetails to display a list of IDs in a nested datagrid.

There are two things I wish to achieve.

1) If a user clicks on a row it automatically expands and shows the row details & there is no way of collapsing this unless you click on another row. So I would like a button in the rowheader that toogles the visibilty of the row details and so that if a user clicks on the row the row details does not show. I only want the row details to show if the button in the row header is clicked.

2) Not so important but if its easy would like to implement, that only rows that have more than 1 ID have a button in the row header.

Here is my datagrid code

<!-- The data grid to display orders-->
        <DataGrid DataContext="{Binding OrderBlock}" x:Name="dataGridOrders" 
                          ItemsSource="{Binding Orders}"
                          Style="{StaticResource DataGridTemplate}"
                          ColumnHeaderStyle="{StaticResource DG_ColumnHeader}"                      
                  RowHeaderStyle="{StaticResource DG_RowHeader}"
                  RowStyle="{StaticResource DG_Row}"
                  CellStyle="{StaticResource DG_Cell}"                      
                  RowDetailsTemplate="{StaticResource DG_RowDetail}"                      
                  AutoGenerateColumns="False"
                  HorizontalAlignment="Stretch" 
                  VerticalAlignment="Stretch"
                  Background="Silver"
                  RowHeaderWidth="30"                      
                  Margin="25,5,20,15">                                                     
            <DataGrid.RowHeaderTemplate>
                <DataTemplate>
                    <ToggleButton x:Name="RowHeaderToggleButton"
                                  Cursor="Hand"/>
                </DataTemplate>
            </DataGrid.RowHeaderTemplate>

In My App.xaml where I do the styling I have this,

   <!-- Data Grid row header template -->
    <Style x:Key="DG_RowHeader" TargetType="{x:Type DataGridRowHeader}">
        <Setter Property="Width" Value="35"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridRowHeader}">
                    <Border x:Name="DGRH_Border"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            SnapsToDevicePixels="True">
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                <GradientStop Offset="0" Color="LightGray"/>
                                <GradientStop Offset="1" Color="WhiteSmoke"/>
                            </LinearGradientBrush>
                        </Border.Background>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>



    <!-- Toogle Button -->
    <Style TargetType="ToggleButton">
        <Setter Property="Padding" Value="3" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid>

                        <ContentPresenter x:Name="contentPresenter"
                                      Margin="{TemplateBinding Padding}"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      Content="{TemplateBinding Content}"
                                      ContentTemplate="{TemplateBinding ContentTemplate}" />
                        <Path x:Name="DefaultPath"
                          VerticalAlignment="Top"
                          Data="M0,0 14,7 0,14 Z"
                          Fill="Gray"
                          Stretch="Fill" />
                        <Path x:Name="CheckedPath"
                          VerticalAlignment="Top"
                          Data="M0,0 14,0 7,14 Z"
                          Fill="LightGray"
                          Stretch="Fill"
                          Visibility="Collapsed" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

How do I add a button to the rowheader for each row. So that the only way the rowdetails are shown is if the button is clicked. At the moment if the user clicks on a row the row expands to show the rowdetails. — mHelpMe

CHJ124 CHJ124 · Accepted Answer · 2013-11-14T21:15:50

Create a Style and then set the DataGrids Row Header Style

RowHeaderStyle="{DynamicResource SelectionRowHeaderStyle}"

See this post which shows how to add a text toggle button: WPF Datagrid add button to datarowheader

This one shows how to create a image toggle that could be applied here as well: ToggleButton changing image depending on state

WPF Datagrid RowHeader Toggle Button for selected rows

1 Answers