Help with ListView

Question

Hello everyone, I need help on how to create a list the right way in xamarin...
What happens... I have an application that looks for how many bluetooth are on, and I have a list in the viewmodel to store it, what I need is that I created a specific layout for the bluetooth available.
Layout example:

<FlexLayout>
<Image Source="spaceBlue" WidthRequest="200" />
<ImageButton Command="{Binding OpenPadlockCommand}" WidthRequest="40" Source="closedPadlock" HorizontalOptions="Center" BorderColor="Transparent" BackGroundColor="Transparent" />
<Label Text="Open" TextColor="Gray" FontAttributes="Bold" />
</FlexlLayout>

So basically I need him to make this layout for each item that is inside my "ObservableCollection" which is my viewModel array..

Answer 1

Sorry, my code is currently this...

   <StackLayout Margin="0,80,0,0" >   
                   <ListView HasUnevenRows="True" ItemsSource="{Binding ItemList}" >  
                       <ListView.ItemTemplate>  
                           <DataTemplate>  
                               <ViewCell>  
                                   <Grid>  
                                       <Grid.RowDefinitions>  
                                           <RowDefinition Height="160" />  
                                             
                                       </Grid.RowDefinitions>  
                                       <Grid.ColumnDefinitions>  
                                           <ColumnDefinition />  
                                           
     
                                       </Grid.ColumnDefinitions>  
                                         
                                           <StackLayout>  
                                               <Image Source="{Binding ImageUrl}" WidthRequest="180"  ></Image>  
                                               <ImageButton Background="red" Command="{Binding OpenPadlockCommand}" WidthRequest="40" Source="closedPadlock" Margin="0,-150,0,0" HorizontalOptions="Center" BorderColor="Transparent" BackgroundColor="Transparent"/>  
                                               <Label Text="{Binding NameDevice}" FontAttributes="Bold"  TextColor="Black" HorizontalOptions="Center"/>  
                                               <Label Text="{Binding Open}"  TextColor="Gray" HorizontalOptions="Center"/>  
                                           </StackLayout>  
                                            
                                        
     
                                   </Grid>  
     
                               </ViewCell>  
     
                           </DataTemplate>  
     
                       </ListView.ItemTemplate>  
                       
                   </ListView>  
               </StackLayout>  
               <Button Text="List padlock" Command="{Binding GridPadlock}" />  

As the Binding ItemList is responsible for getting the number of available devices, however, this way is not dynamic as I wanted, for example two columns and two items per line, that way everything is in the middle and nothing dynamic

Answer 2

Hello my friend, so what I need is for the data to be dynamically positioned according to the amount of bluetooth available

My code:

   <StackLayout Margin="0,80,0,0" >   
                   <ListView HasUnevenRows="True" ItemsSource="{Binding ItemList}" >  
                       <ListView.ItemTemplate>  
                           <DataTemplate>  
                               <ViewCell>  
                                   <Grid >  
                                       <Grid.RowDefinitions>  
                                           <RowDefinition Height="160"/>  
     
                                       </Grid.RowDefinitions>  
                                       <Grid.ColumnDefinitions>  
                                           <ColumnDefinition />  
                                           <ColumnDefinition />  
                                       </Grid.ColumnDefinitions>  
                                         
                                           <StackLayout >  
                                               <Image Source="{Binding ImageUrl}" WidthRequest="180"  ></Image>  
                                               <ImageButton Command="{Binding OpenPadlockCommand}" WidthRequest="40" Source="{Binding Image2Url}" HorizontalOptions="Center" BorderColor="Transparent" BackgroundColor="Transparent" Margin="0,-150,0,0"/>  
                                               <Label Text="{Binding NameDevice}" FontAttributes="Bold"  TextColor="Black" Margin="65,10,0,0"/>  
                                               <Label Text="{Binding Open}"  TextColor="Gray" Margin="75,0,0,0"/>  
                                           </StackLayout>  
                                           
                                        
     
                                   </Grid>  
     
                               </ViewCell>  
     
                           </DataTemplate>  
     
                       </ListView.ItemTemplate>  
                       
                   </ListView>  
               </StackLayout>  
     
               -----*-----  
     
                <StackLayout Margin="0,35,0,0">  
                   <Image Source="spaceBlue" WidthRequest="180" Margin="0,0,190,0"/>  
                   <Image Source="spaceBlue" WidthRequest="180" Margin="190,-170,0,0"/>  
                   <Image Source="spaceRed" WidthRequest="180" Margin="0,0,190,0"/>  
               </StackLayout>  
               <Image Source="padlockBlue" WidthRequest="40" Margin="190,-300,0,0" />  
               <ImageButton Command="{Binding OpenPadlockCommand}" WidthRequest="40" Source="closedPadlock" Margin="0,-54,185,0" HorizontalOptions="Center" BorderColor="Transparent" BackgroundColor="Transparent"/>  
               <Image Source="padlockRed" WidthRequest="40" Margin="0,135,180,0"/>  
               <StackLayout Margin="50,-183,0,0">  
                   <Label Text="Porta Principal" FontAttributes="Bold" Margin="5,0,0,0" TextColor="Black"/>  
                   <Label Text="ABRIR" Margin="30,0,0,0" TextColor="Gray"/>  
               </StackLayout>  
               <StackLayout Margin="260,-48,0,0" >  
                   <Label Text="Armário 01" FontAttributes="Bold" TextColor="Black"/>  
                   <Label Text="ABERTO" TextColor="#2196f3" Margin="5,0,0,0"/>  
               </StackLayout>  
                <StackLayout Margin="50,126,0,0" >  
                   <Label Text="Portao 02" FontAttributes="Bold" TextColor="Black" Margin="23,0,0,0"/>  
                   <Label Text="Acesso nao autorizado" Margin="-15,0,0,0" />  
               </StackLayout>  

but this way it is not dynamic it puts all the data that comes from the Binding in the first column

Answer 3

Hello,​

You can put FlexLayout under StackLayout and set Column number like this layout in your viewcell.

   <StackLayout Grid.Column="0" >  
                                 ....  
   </StackLayout>  
     
   <FlexLayout  Grid.Column="1">  
                               ....  
   </FlexLayout>  

If you want to control FlexLayout show/hide based on your needs, you can Creating a Xamarin.Forms DataTemplateSelector to display different layout in your Listview.

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.