Elemente in Form von Gittern in Xamarin-Formularen anzeigen

Question

Ich arbeite an Xamarin-Formularen (Android, IOS, Windows). Ich versuche, Elemente in einem Raster mit Auswahl anzuzeigen (markieren Sie das ausgewählte Element). Finden Sie das Bild unten für weitere Informationen.

Kann mir vorschlagen, wie Elemente erreichen Anzeige mit Auswahl Gitter?

Answer 1

Im Allgemeinen bindet jedes Element ein Modell, das einen booleschen Wert enthält, der ausgewählt bleibt oder nicht. Mit diesem Ansatz können Sie sie initialisieren, wie Sie möchten. Dann Gestenerkenner schaffen zum Abgreifen Geste & Verwendung Auslösers für Selektionseffekt (Background)

(In Ihrem definiton erwähnten Sie in Grid zu verwenden, so ich biete keine neue Methodik für die UI-Hierarchie)

Hier wird theCode:

Modell:

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

Converter

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>