Show/hide controls in UI for UWP RadDataGrid rows

Question

I have a simple Telerik UI for UWP RadDataGrid:

    <telerikGrid:RadDataGrid ItemsSource="{x:Bind MyVM.Items}"
                             SelectedItem="{x:Bind MyVM.SelectedItem, Mode=TwoWay}"
                             UserEditMode="None"
                             AutoGenerateColumns="False"
                             UserGroupMode="Disabled"
                             UserFilterMode="Disabled"
                             GridLinesThickness="1"
                             AlternationStep="2">
        <telerikGrid:RadDataGrid.Columns>
            <telerikGrid:DataGridTemplateColumn Header="Column1" SizeMode="Fixed" Width="200">
                <telerikGrid:DataGridTemplateColumn.CellContentTemplate>
                    <DataTemplate x:DataType="vm:MyViewModel">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Column="0" Text="{x:Bind Text1}" />
                            <AppBarButton Grid.Column="1" Icon="Edit" Visibility="???" />
                        </Grid>
                    </DataTemplate>
                </telerikGrid:DataGridTemplateColumn.CellContentTemplate>
            </telerikGrid:DataGridTemplateColumn>

            <telerikGrid:DataGridTextColumn PropertyName="Prop1" Header="Column1" />
            <telerikGrid:DataGridTextColumn PropertyName="Prop2" Header="Column2" />
        </telerikGrid:RadDataGrid.Columns>
    </telerikGrid:RadDataGrid>

MyVM is a ViewModel of type MyViewModel which has properties Text1, Prop1, and Prop2. I'd like to show/hide the AppBarButton in the first column dynamically. When the user selects the row by clicking it, I'd like to show the button. When the row is not selected, I'd like to hide the button.

Is there any way in UWP XAML and RadDataGrid to accomplish that? I guess I have to bind the Visibility property of the button (the question marks in the code) but how?

Answer 1

First you will need to add a EditVisibility property to each item:

private Visibility _visibility = Visibility.Collapsed;
public Visibility EditVisibility
{
   get => _visibility;
   set
   {
       _visibility = value;
       NotifyPropertyChanged();
   }
}

Now, you are already binding the SelectedItem property so we plug the functionality into it. Once the user clicks a row, that row becomes selected. That means the set block of your SelectedItem property will execute.

In the setter you can then first set the EditVisibility of the previously selected row to Collapsed and set the new row's Visibility to Visible:

set
{
   if ( _selectedItem != null ) _selectedItem.EditVisibility = Visibility.Collapsed;
   _selectedItem = value;
   _selectedItem.EditVisibility = Visibility.Visible;
   NotifyPropertyChanged();
}