Binding data to layout - xaml

I am rookie in xamarin and I want to achieve a grid, with the feature scrollanle, but I canĀ“t get it. I reach this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="3*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Text="Correct" Grid.Row="0" Grid.Column="0" Clicked="OnStartClicked"/>
<Label Grid.Row="0" Grid.Column="1" Text="my_data_binded_from_my_dto" XAlign="Center" YAlign="Center"/>
</Grid>
Any help?
Thanks you all

Before at all, wellcome to stackoverflow. Hoping we can help you and you enjoy for being part of this community.
I think your best choice for achieving this is using a listview for binding your grid layout with your dto. Inside of your list view you can define a template which will be render in the list view, this template could be any layout. In your case, your grid.
I coded an example for you. Please, check it out, and let me know any doubt you could have. Cheers.
<ListView x:Name="listView" ItemsSource="{Binding .}">">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="3*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Text="Correct" Grid.Row="0" Grid.Column="0" Clicked="OnStartClicked"/>
<Label Grid.Row="0" Grid.Column="1" Text="my_data_binded_from_my_dto" XAlign="Center" YAlign="Center"/>
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Remember to link your model with your listview, you can this from code-behind (constructor):
this.BindingContext = your_model;

Related

ListView with grid where padding causes child elements to shrink

I'm currently styling a listview, in which I want to add a separating space between each entity in the ListView. For doing that, I use a Grid for each ViewCell with Margin="0,0,0,10".
I can get my elements to fit inside the grid row, but if I add a padding to the row, to give it some top/bottom spacing, it just scales down the text inside the grid.rowuntil eventually, it disappears.
<ListView Margin="10" HasUnevenRows="false" BackgroundColor="Fuchsia" x:Name="deviceList" ItemsSource="{Binding Devices}" CachingStrategy="RecycleElement" SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid BackgroundColor="Silver" Margin="0,0,0,10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="0" VerticalOptions="Center" RowSpacing="10">
<local:IconView Source="BLE.png" Foreground="#3b5998" WidthRequest="30" HeightRequest="30" />
</Grid>
<Grid Grid.Row="0" Grid.Column="1" VerticalOptions="Center">
<Label Text="{Binding Name}" TextColor="Black" />
</Grid>
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
How do I add padding to my Grid.Row without scaling down the child elements?

How to set height of row in ListView DataTemplate

Question
How can I increase the height of each row in my DataTemplate. I've set the height multiple times in different elements, however the row height doesn't change from the seemingly default height.
What am I missing?
Xaml
<ListView x:Name="ListViewItems">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Tapped="TapGestureRecognizer_Tapped" Height="400">
<Grid Padding="5" Margin="5" HeightRequest="400">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="400"/>
</Grid.RowDefinitions>
<Label Text="{Binding Title}" Grid.Row="0" Grid.Column="1" FontSize="15"/>
<Image Source="#drawable/cereals.png" Aspect="AspectFill" HeightRequest="400" Grid.Row="0" Grid.Column="0" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Screenshot
If you want to allow a ListView row to set its own height, you need to set the ListView HasUnevenRows property to true.
Just put HasUnevenRows="True"
on the ListView. This should do the trick.

How do i extract an item out of a session object?

Still learning visual studio and it's elements :-)
My question is as follows...
How do i extract "for example" the [clientname] out of session object using a xaml resource designer?
The session it's self is "CurrentSession" realistically i would like this to be dynamic so that i could use my listview template on any listview. I have been following the courses Here and this has helped me immensely but i cannot seem to work out how to do this from a session object, any help would be greatly appreciated :-)
a part of my xaml designer for a listview....
<DataTemplate x:Key="templateListBoxItem">
<Grid Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Column="0"
Grid.Row="0"
Grid.RowSpan="2"
Margin="0,0,10,0">
<Image Source="{DynamicResource IMS}"
Stretch="Fill"
Height="20"
Width="20"/>
</Border>
<ItemsControl ItemsSource="{Binding CurrentSession[clientName]}">
<TextBlock Text="{Binding clientName}"
Grid.Row="0"
Grid.Column="1"
FontWeight="Bold"/>
</ItemsControl>
</Grid>
</DataTemplate>

Xamarin Forms: Centering multiple, different controls in a layout?

My XAML looks like this:
<StackLayout Orientation="Vertical" HorizontalOptions="Center">
<controls:BindablePicker HorizontalOptions="Center" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ListView Grid.Row="0" Grid.Column="1" HorizontalOptions="Center" SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid BackgroundColor="Aqua">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<controls:BindablePicker Title="Length" Grid.Row="0" Grid.Column="0" BackgroundColor="White" />
<controls:BindablePicker Title="Units" Grid.Row="0" Grid.Column="1" BackgroundColor="White" />
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</StackLayout>
Here's what I'm getting: Attempt
This is pretty much what I want, except I want the content centered within the aqua area so everything is centered horizontally. I don't mind if the left cell is right justified and the right cell is left justified.
Note that I'm wanting to add other content beneath this, like labels and other grids, all centered on the page.
Any help would be greatly appreciated. Thanks.
First of all I do not think that you need a row definition in your inner grid since you have only one row.
Secondly for performance sake,do not user "Auto" , just remove the width property from the column definitions.
By doing this both columns will have the same width... I hope ;)
I think if you made your list view like below then it would fix it, but also try it without HorizontalOptions for the controls.
<ListView Grid.Row="0" Grid.Column="1" HorizontalOptions="Center" SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid BackgroundColor="Aqua">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<controls:BindablePicker Title="Length" Grid.Column="0" BackgroundColor="White" HorizontalOptions = "End" />
<controls:BindablePicker Title="Units" Grid.Column="1" BackgroundColor="White" HorizontalOptions = "Start" />
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Hint: The next release of Xamarin.Forms, which is in the alpha channel now, contains a bindable picker so you do not have to user a 3rd party now.

Image flickers in ListView datatemplate

could someone tell me, how can I avoid image flickering in Datatemplate? Everytime I change the source through binding (MVVM pattern), the image in ListViewItem flickers. For other images in app I've used ImageOpened event in code-behind. But I can't be used when I have DataTemplate.
EDIT:
DataTemplate:
<DataTemplate x:Key="ContactItemDataTemplate" x:DataType="contactData:Contact">
<Grid MinHeight="48">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" x:Name="MainImage" Source="{x:Bind ImageStatusUri, Mode=OneWay}" Margin="0,8,12,8">
</Image>
<TextBlock Grid.Column="1" Text="{x:Bind Nickname, Mode=OneWay}" Foreground="Black" TextAlignment="Center"
VerticalAlignment="Center" FontSize="15" HorizontalAlignment="Left"/>
</Grid>
<Rectangle Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" StrokeThickness="0.4" Height="0.4"
VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Stroke="#D1D3D4"/>
</Grid>
</DataTemplate>
type Contact implements INotifyPropertyChanged.
EDIT2:
WriteableBitmap is working, but I have 3 images with scaling factors 100, 200 and 400. It always choose the image with scale 400. When I use normal binding no WriteableBitmap, it take image with scale 100.
The best solution here is for you to sub-class the Image control, overriding the Source property and controlling the transition from one image to another with a flicker-less flow. Learn here: https://mva.microsoft.com/en-US/training-courses/xaml-for-windows-10-controls-14482