Xamarinフォームでのグリッドの使用

Question

私はXamarinフォーム（Android、IOS、Windows）を開発中です。 選択したグリッドにアイテムを表示しようとしています（選択したアイテムを強調表示します）。 詳細については、下の画像をご覧ください。

いずれかを選択して、グリッド内の項目の表示を達成するためにどのように、私をお勧めすることはできますか？

Answer 1

一般に、各項目は、選択されているかどうかを示すブール値を含むモデルをバインドします。この方法では、必要に応じて初期化することができます。そして、選択効果（BackgroundColorを）のためのジェスチャー&使用トリガーをタップするためにジェスチャー認識を作成

ここ

される（あなたのdefinitonでは、グリッド内の使用に言及したので、私はUI階層のための新たな方法論を提供していませんよ） theCode：

モデル：

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;} 

} 

ヴィ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>