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

【问题标题】：Display Items Using Grid in Xamarin Forms在 Xamarin 表单中使用网格显示项目
【发布时间】：2016-07-15 17:10:22
【问题描述】：

我正在开发 Xamarin 表单（Android、IOS、Windows）。我试图在带有选择的网格中显示项目（突出显示所选项目）。请查看下图了解更多信息。

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

【问题讨论】：

你能告诉我们你到目前为止所做的尝试吗？当您询问您遇到的问题而不是一般的“我该怎么做”问题时，通常会更好地接受。话虽如此，很容易制作一个具有相对或绝对布局的网格，以便在另一个图像之上显示一个图像，然后在点击一个项目时更改背景颜色。

标签： c# xamarin.forms

【解决方案1】：

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

（在您的定义中，您提到在 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>

【讨论】：