在Xamarin Forms中使用網格顯示項目

Question

我正在Xamarin Forms（Android，IOS，Windows）上工作。 我試圖用選擇在網格中顯示項目（突出顯示所選項目）。 請查看下面的圖片瞭解更多信息。

任何一個可以建議我，如何實現項目與選擇網格中顯示？

Answer 1

通常每個項目都綁定一個模型，該模型包含一個保持選擇與否的布爾值。採用這種方法，您可以根據需要初始化它們。然後觸擊手勢&使用觸發器的選擇效果（BACKGROUNDCOLOR）創建手勢識別

（在你definiton你提到使用內網，所以我不會許諾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;} 

} 

的Vie wModel

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>