How to perform Row update in WinUI3 Datagrid

Question

I am new to WinUI and using CommunityToolkit.WinUI.UI.Controls for my WinUI3 application. Where I am using Datagrid. One of the columns is generating like follows:

 <controls:DataGridTextColumn Binding="{Binding MessageId}" Header="Id" />

I also have a Button column generated for the action in the grid as follows:

 <controls:DataGridTemplateColumn Header="Action">
                    <controls:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Button Click="SendAsync" CommandParameter="{Binding Path=MessageId}">Send</Button>
                        </DataTemplate>
                    </controls:DataGridTemplateColumn.CellTemplate>
                </controls:DataGridTemplateColumn>
            </controls:DataGrid.Columns>

My problem is that this button should only be visible based on the column "Status" from the Source. After searching on the internet I could not find any solution. I used to use row_update on the WinForm application where we can use conditional visibility based on any cell value.

Please suggest to me how to overcome this kind of problem for conditional visibility/ Row_update like functionality in WinUI3.

Answer 1

You can create a Converter and control the Button's Visibility property like this.

BoolToVisibilityConverter.cs

public class BoolToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        return ((bool)value) is true
            ? Visibility.Visible
            : Visibility.Collapsed;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language) => throw new NotImplementedException();
}

Your DataGrid

<Page.Resources>
    <helpers:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
</Page.Resources>

<controls:DataGridTemplateColumn Header="Action">                    
    <controls:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <Button
                Click="SendAsync"
                CommandParameter="{Binding Path=MessageId}"
                Visibility="{Binding Status, Converter={StaticResource BoolToVisibilityConverter}}"/>>
                Send
            </Button>
        </DataTemplate>
    </controls:DataGridTemplateColumn.CellTemplate>
</controls:DataGridTemplateColumn>