Show/hide UWP RadDataGrid 行的 UI 控件

Question

我有一个用于 UWP RadDataGrid 的简单 Telerik UI：

    <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 是类型 MyViewModel 的 ViewModel，它具有属性 Text1、Prop1 和 Prop2。我想动态地 show/hide 第一列中的 AppBarButton 。当用户通过单击选择该行时，我想显示该按钮。当未选中该行时，我想隐藏该按钮。

在 UWP XAML 和 RadDataGrid 中有什么方法可以做到这一点吗？我想我必须绑定按钮的 Visibility 属性（代码中的问号）但是如何？

Answer 1

首先，您需要为每个项目添加 EditVisibility 属性：

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

现在，您已经绑定了 SelectedItem 属性，因此我们将功能插入其中。一旦用户单击一行，该行就会被选中。这意味着 SelectedItem 属性的 set 块将执行。

在 setter 中，您可以先将先前选择的行的 EditVisibility 设置为 Collapsed，然后将新行的 Visibility 设置为 Visible :

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

Show/hide UWP RadDataGrid 行的 UI 控件

Show/hide controls in UI for UWP RadDataGrid rows

xaml

uwp

telerik

telerik-grid