Показать элементы, используя сетку в формах Xamarin

Question

Я работаю над форматами Xamarin (Android, IOS, Windows). Я пытаюсь отображать элементы в сетке с выделенным (выделить выделенный элемент). Для получения более подробной информации, пожалуйста, найдите изображение ниже.

Может ли один предложить мне, Как добиться отображения пунктов в сетке с выбором?

Answer 1

Обычно каждый элемент привязывает модель, содержащую логическое значение, которое сохраняет выбранное или нет. При таком подходе вы можете инициализировать их так, как хотите. Затем создайте Gesture распознаватель для нарезания жест & использование триггера для эффекта селекции (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;} 

} 

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>