Hide/Collapse Image in RowDetailsTemplate

Question

I have a WPF/XAML DataGrid with a RowDetailsTemplate. When a row is selected, the Details with an Image and some text are shown. So far so good.

Plan is to have the Image visible or invisible (hidden or collapsed doesn't matter) depending on data from the Code. I made a binding to a Visibility value OrderImg for that.

<Window x:Class="SomeDataGrid.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:local="clr-namespace:SomeDataGrid"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <DataGrid Grid.Row="1" x:Name="MydataGrid" AutoGenerateColumns="False" Margin="10" 
                  SelectionChanged="MydataGrid_SelectionChanged" 
                  SelectionMode="Single" IsReadOnly="True"
                  >
        <DataGrid.Columns>
            <DataGridTextColumn Header="ID" Binding="{Binding ID}"/>
            <DataGridTextColumn Header="Product" Binding="{Binding PRODUCT}"/>
        </DataGrid.Columns>
        <DataGrid.RowDetailsTemplate>
            <DataTemplate>
                <WrapPanel Background="LightBlue">
                    <Image x:Name="imgOrder" Margin="10" Width="20" Height="20" 
                               Source="/shopping_cart.png" Visibility="{Binding OrderVis}" />
                    <StackPanel>
                        <TextBlock Margin="5" >
                                <Run Text="{Binding ID}"/>
                                <Run Text="-"/>
                                <Run Text="{Binding PRODUCT}"/>
                        </TextBlock>
                    </StackPanel>
                </WrapPanel>
            </DataTemplate>
        </DataGrid.RowDetailsTemplate>
    </DataGrid>
</Window>

MyDataGrid_SelectionChanged changes the imgOrder value from Visibility.Hidden to Visibility.Visible - this also Shows ok in Messageboxes for Debugging. When I add another Image outside the DataGrid and bind its visibility to OrderVis it also reacts to the changed selection as expected. But in the unfolding Row Details of the selected row my Image is ALWAYS visible.

What am I doing wrong here? Thanks!

PS: simplified selection changed trigger:

private void MydataGrid_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    Status = "";
    try
    {
        if (sender != null)
        {
            DataGrid grid = sender as DataGrid;
            if (grid != null && grid.SelectedItems != null && grid.SelectedItems.Count == 1)
            {
                DataGridRow dgr = grid.ItemContainerGenerator.ContainerFromItem(grid.SelectedItem) as DataGridRow;
                DataRowView dr = (DataRowView)dgr.Item;
                SelectedID = dr[0].ToString();
                MySelectedIndex = dgr.GetIndex();
                if (SelectedID == "1234")
                {
                    OrderVis = Visibility.Visible;
                    MessageBox.Show(SelectedID + "\r\n" + OrderVis.ToString()); //for debugging
                }
                else
                {
                    OrderVis = Visibility.Collapsed;
                    MessageBox.Show(SelectedID + "\r\n" + OrderVis.ToString()); //for debugging
                }
            }
        }
    }
    catch (Exception ex)
    {
        MessageBox.Show(ex.Message.ToString());
    }
}

OrderVis Change trigger (as mentioned it works fine if the (or another) Image is placed outside the DataGrid):

...

using System.Data;
using System.Configuration;
using System.ComponentModel;
using System.Runtime.CompilerServices;

...

public partial class MainWindow : INotifyPropertyChanged
{
    public MainWindow()
    {
        DataContext = this;
        InitializeComponent();
    }

...

private Visibility _ordervis;

public Visibility OrderVis
{
    get
    {
        return _ordervis;
    }
    set
    {
        if (_ordervis != value)
        {
            _ordervis = value;
            OnPropertyChanged();
        }
    }
}

public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

See here: https://stackoverflow.com/q/19708548/1136211. The RowDetailsTemplate doesn't seem to use the Window's DataContext. — Clemens, Dec 19 '18 at 12:32

score 0 · Accepted Answer · answered Dec 19 '18 at 12:46

thanks to Clemens link the solution was to Change the Image Visibility Binding :

<Image Margin="10" Width="20" Height="20" 
        Visibility="{Binding RelativeSource={RelativeSource AncestorType=Window},  Path=OrderVis}" Source="/shopping_cart.png"/>

Hide/Collapse Image in RowDetailsTemplate

1 Answers1