Question

我正在开发Xamarin Forms（Android，IOS，Windows）。我试图在选择的网格中显示项目（突出显示所选项目）。有关更多信息，请参见下图。

任何人都可以建议我，如何通过选择在网格中显示项目？

Answer 1

通常，每个项目都绑定一个模型，该模型包含一个保持选中或不选择的布尔值。通过这种方法，您可以根据需要初始化它们。然后创建手势识别器以点击手势＆amp;使用触发器选择效果（BackgroundColor）

（在你的定义中你提到过在Grid中使用，所以我不提供UI层次结构的新方法）

以下是代码：

<强>型号：

public Class ItemModel: INotifyPropertyChanged
{
// implement  INotifyPropertyChanged interface

    public ItemModel()
    {
        ToggleCommand = new Command(CmdToggle);
    }

    private void CmdToggle()
    {
        IsSelected = !IsSelected;
    }

    public string Name
    {
        get;
        set; //call OnPropertyChanged
    }

    public bool IsSelected
    {
        get;
        set; //call OnPropertyChanged
    }

    public ICommand ToggleCommand{get;private set;}

}

<强>视图模型

public Class PageViewModel: INotifyPropertyChanged
{

    public List<ItemModel> Items
    {
        get;
        set; //call OnPropertyChanged
    } 
}

<强>转换器

public class BoolToColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (value is bool)
            return ((bool)value) ? Color.Gray: Color.White;


        else
            throw new NotSupportedException();
}

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

<强>的Xaml：

<Page.Resources>
    <Color x:Key="SelectedColor">Gray</Color/>
    <Color x:Key="UnselectedColor">White</Color/>
    <namespace:BoolToColorConverter x:Key="BoolToColorConverter"/> 
</Page.Resources>

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="90"/>
    <RowDefinition Height="90"/>
    <RowDefinition Height="90"/>
    <RowDefinition Height="90"/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>

<!--Single item -->
  <StackLayout Grid.Row="0"
               Grid.Column="0"
               BindingContext="{Binding Items[0]}"
               Orientation="Vertical"
               BackgroundColor="{Binding IsSelected,Converter={StaticResource BoolToColorConverter}}"
>

    <Image Source="{Binding yourImageProperty}" />
    <Image Source="{Binding yourImage2Property}" />
    <Label Source="{Binding Name}"/>

  <StackLayout.GestureRecognizers>
    <TapGestureRecognizer Command="{Binding ToggleCommand}" />
  </StackLayout.GestureRecognizers>
  <!--Triggers will update background color when update IsSelected-->
  <StackLayout.Triggers>
    <DataTrigger TargetType="StackLayout" Binding="{Binding IsSelected}" Value="True">
      <Setter Property="BackgroundColor" Value="{StaticResource SelectedColor}" />
    </DataTrigger>
    <DataTrigger TargetType="c:Label" Binding="{Binding IsSelected}" Value="False">
      <Setter Property="BackgroundColor" Value="{StaticResource UnselectedColor}" />
    </DataTrigger>
  </StackLayout.Triggers>

  </StackLayout>

</Grid>

在Xamarin表单中使用网格显示项目

1 个答案: