How to collapsed the data grid without button?

Question

currently when user click on the list of the items, the row will expanded. I need help with how to make when user click again on the list it will collapsed. I don't want to put any button (if possible) It's will be a touchscreen system. This is my current output:

This is my code:

<StackPanel Name="spItemDisplay"  HorizontalAlignment="Stretch" Margin="0,10,0,0" Grid.Row="3" VerticalAlignment="Stretch" Orientation="Horizontal" >
     <ScrollViewer HorizontalAlignment="Right" >
       <DataGrid HorizontalAlignment="Center"  Width="1096" Name="dgItemDisplay" AutoGenerateColumns="False" Height="auto" >
            <DataGrid.Columns>
                <DataGridTextColumn  IsReadOnly="True" x:Name="dgItemCode" Width="300" Header="Barcode" Binding="{Binding ItemCode}" />
                <DataGridTextColumn IsReadOnly="True" x:Name="dgItemName" Width="500" Header="Item Name" Binding="{Binding ItemName}" />
                <DataGridTextColumn IsReadOnly="True" x:Name="dgItemPrice" Width="250" Header="Item Price" Binding="{Binding ItemPrice, StringFormat=RM {0}}" />
               </DataGrid.Columns>
        <DataGrid.RowDetailsTemplate >
         <DataTemplate>
            <StackPanel Name="spItemDisplay2" HorizontalAlignment="Stretch" Background="White"  >
                <Grid Margin="0,10"  >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="300" />
                        <ColumnDefinition Width="300" />
                        <ColumnDefinition Width="100" />
                        <ColumnDefinition Width="100" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                         <RowDefinition Height="30" />
                         <RowDefinition Height="30" />
                         <RowDefinition Height="30" />
                         <RowDefinition Height="30" />
                      </Grid.RowDefinitions>
                         <TextBlock Text="Quantity: " FontWeight="Bold" Grid.Column="2" Grid.Row="0"/>
                         <TextBox KeyDown="TxtQty_KeyDown" x:Name="txtQty" Text="{Binding Quantity, UpdateSourceTrigger=PropertyChanged}" Grid.Column="3" Grid.Row="0"/>
                         <TextBlock Text="Discount: " FontWeight="Bold" Grid.Column="2" Grid.Row="1"/>
                         <TextBox KeyDown="TxtDisc_KeyDown" x:Name="txtDisc" Text="{Binding Discount, UpdateSourceTrigger=PropertyChanged}" Grid.Column="3" Grid.Row="1"/>
                         <Button Content="Remove Item"  HorizontalAlignment="Left" VerticalAlignment="Stretch" Width="95" Click="btnRemoveItem_Click" Grid.Column="3" FontSize="10" Grid.Row="3"/>
                </Grid>
            </StackPanel>
           </DataTemplate>
        </DataGrid.RowDetailsTemplate>
      </DataGrid>
    </ScrollViewer>
</StackPanel>

Answer 1

I already found the solution

I'm adding MouseLeftButtonUp event

and then at the code behind

private void DgItemDisplay_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        DataGrid dg = sender as DataGrid;
        if (dg == null)
            return;
        if (dg.RowDetailsVisibilityMode == DataGridRowDetailsVisibilityMode.VisibleWhenSelected)
            dg.RowDetailsVisibilityMode = DataGridRowDetailsVisibilityMode.Collapsed;
        else
            dg.RowDetailsVisibilityMode = DataGridRowDetailsVisibilityMode.VisibleWhenSelected;
    }