I am trying to position frame cards as suqares one after another horizontally and can't manage it. I wrapped it in Grid, although grid fills all window size it positions frames one under another. Red color on the screenshot is background of the Grid.
How it looks and how i want it to
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid
HorizontalOptions="FillAndExpand"
BackgroundColor="Red">
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Frame
HasShadow="True"
Margin="5"
Padding="10"
CornerRadius="5"
Scale="1"
BackgroundColor="{StaticResource DarkGreyPrimary}">
<Frame.Content>
<StackLayout Orientation="Vertical">
<StackLayout>
<Grid>
<Label Text="{Binding Address}"
FontSize="30"
VerticalTextAlignment="End"/>
<Button Clicked="InfoButtonClicked"
Text=""
FontFamily="FA"
FontSize="30"
WidthRequest="53"
Margin="0, 0, -10, 0"
HorizontalOptions="End"/>
</Grid>
<Image Source="{Binding ImageUrl}"
WidthRequest="300"
Aspect="Fill"/>
</StackLayout>
<StackLayout VerticalOptions="Fill" Margin="10, 0, 0, 0">
<StackLayout VerticalOptions="EndAndExpand">
<Label Text="{Binding Id}"
HorizontalOptions="End"
TextColor="{StaticResource LightGrey}"
FontSize="20"/>
</StackLayout>
</StackLayout>
</StackLayout>
</Frame.Content>
</Frame>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
Use CollectionView for that, it supports showing items in a grid.
<CollectionView ItemsLayout="VerticalGrid, 3" ItemsSource="{Binding Items}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="5">
<Frame
Padding="10"
BackgroundColor="{StaticResource DarkGreyPrimary}"
CornerRadius="5"
HasShadow="True"
Scale="1">
<StackLayout Orientation="Vertical">
<StackLayout>
<Grid>
<Label
FontSize="30"
Text="{Binding Address}"
VerticalTextAlignment="End" />
<Button
Margin="0,0,-10,0"
Clicked="InfoButtonClicked"
FontFamily="FA"
FontSize="30"
HorizontalOptions="End"
Text=""
WidthRequest="53" />
</Grid>
<Image
Aspect="Fill"
Source="{Binding ImageUrl}"
WidthRequest="300" />
</StackLayout>
<Label
Margin="10,0,0,0"
FontSize="20"
HorizontalOptions="End"
Text="{Binding Id}"
TextColor="{StaticResource LightGrey}" />
</StackLayout>
</Frame>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Notice the ItemsLayout="VerticalGrid, 3", the number 3 specifies how many columns to display.
Here's the documentation for the CollectionView (as #Jason mentioned earlier in the comments): https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/layout#vertical-grid
Related
I am trying to display items, but only {Binding Peso} is displayed.
If you change {Binding Peso} and use{Binding Contenido} you can see that it is displayed OK
Any Help Pls?
`
<ListView x:Name="PaqueteList">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Frame BorderColor="Black">
<StackLayout Margin="5" Grid.Column="0" Orientation="Vertical"
HorizontalOptions="StartAndExpand"
VerticalOptions="Center">
<Label Text ="{Binding Peso}"
TextColor="Blue"
BackgroundColor="White"
/>
<Label Grid.Column="1" Text ="{Binding TrackingNumber} "
TextColor="Blue"
BackgroundColor="White"
/>
<Label Grid.Column="2" Text ="{Binding Contenido}"
TextColor="Blue"
BackgroundColor="White"
/>
</StackLayout>
</Frame>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I have changed the {Binding Peso} to {Binding Contenido} and so on, and it is works.
I just need to display something like this
Peso Tracking Contenido
xx yyyyy zzzz
xx yyyyy zzzz
xx yyyyy zzzz
Try this for your ViewCell:
<ViewCell>
<Frame BorderColor="Black">
<Grid
Margin="5"
HorizontalOptions="StartAndExpand"
VerticalOptions="Center"
ColumnDefinitions="*, *, *">
<Label
BackgroundColor="White"
Text="{Binding Peso}"
TextColor="Blue" />
<Label
Grid.Column="1"
BackgroundColor="White"
Text="{Binding TrackingNumber}"
TextColor="Blue" />
<Label
Grid.Column="2"
BackgroundColor="White"
Text="{Binding Contenido}"
TextColor="Blue" />
</Grid>
</Frame>
</ViewCell>
You should add the children views into a ListView like the pattern below:
<ListView>
<ViewCell>
<StackLayout>
<Frame>
<Grid>
</Grid>
<Frame/>
</StackLayout>
</ViewCell>
</ListView>
Below is the code snippet for your reference:
<ListView x:Name="PaqueteList" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Margin="5" Orientation="Vertical" HorizontalOptions="StartAndExpand" VerticalOptions="Center">
<Frame BorderColor="Black">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Grid.Column="0" Text ="{Binding Peso}"
TextColor="Blue"
BackgroundColor="White"/>
<Label Grid.Column="1" Text ="{Binding TrackingNumber} "
TextColor="Blue"
BackgroundColor="White"
/>
<Label Grid.Column="2" Text ="{Binding Contenido}"
TextColor="Blue"
BackgroundColor="White" />
</Grid>
</Frame>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I need to alternate my ListView columns color so it looks like this.
I was searching Google for any help, and found out that i can put BoxView in the same column with my Label and color that BoxView
My result:
As you can see, i have this annoying white line above BoxViews, which i was not able to remove. My question is how do i remove them? i havent set any paddings and margins, have no clue what is problem.
<ListView x:Name="ListView" ItemTapped="ListView_OnItemTapped" ItemsSource="{Binding FilteredReports, Mode=TwoWay}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<BoxView HeightRequest="1" Color="#EDEBE9" IsVisible="true"/>
<Grid HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<BoxView Color="#F7FAFC" Grid.Column="0"/>
<Label Grid.Column="0" FontSize="12" FontFamily="Roboto" TextColor="#162938" Text="{Binding ClientPhone}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
<Label Grid.Column="1" FontSize="12" FontFamily="Roboto" TextColor="#162938" Text="{Binding OfficeName}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
<BoxView Color="#F7FAFC" Grid.Column="2"/>
<Label Grid.Column="2" FontSize="12" FontFamily="Roboto" TextColor="#162938" Text="{Binding BranchName}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
</Grid>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
You are using a StackLayout and by default it has a Spacing property with a value of 6.
You should set it to 0
<ViewCell>
<StackLayout Spacing = "0" >
<BoxView HeightRequest="1" Color="#EDEBE9" IsVisible="true"/>
<Grid HorizontalOptions="FillAndExpand">
....
</StackLayout>
</ViewCell>
To display some text and an image I use the following Collectionview ItemTemplate.
Unfortunately, elements with much text inside the Message property will overflow the template.
The result looks like the image below.
<CollectionView.ItemTemplate>
<DataTemplate>
<ContentView BackgroundColor="{DynamicResource ColorPrimary}">
<custom:CustomFrame VerticalOptions="StartAndExpand"
Style="{DynamicResource FrameWithShadowUnderline}">
<AbsoluteLayout>
<StackLayout
AbsoluteLayout.LayoutFlags="SizeProportional"
AbsoluteLayout.LayoutBounds=".0,.0,1,1"
Padding="0"
VerticalOptions="StartAndExpand">
<Grid Padding="2" VerticalOptions="StartAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.25*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackLayout Padding="1" Grid.Column="0">
<templates:DisplayCircleImageTemplate .../>
</StackLayout>
<StackLayout Grid.Column="1"
Grid.Row="0"
VerticalOptions="StartAndExpand">
<Label Text="{Binding MessageHeader}" FontAttributes="Bold" FontSize="Small"/>
<Label HorizontalTextAlignment="Start"
VerticalTextAlignment="Start"
VerticalOptions="StartAndExpand"
Style="{DynamicResource LabelGeneralText}"
Text="{Binding Message}"/>
</StackLayout>
</Grid>
<custom:CustomFrame HasShadow="True"
Padding="0"
HorizontalOptions="Center">
<Image IsVisible="{Binding HasImage}"
HorizontalOptions="Center"
Source="{Binding ImageSource}"/>
<custom:CustomFrame.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding Path=BindingContext.CloserLookCommand, Source={x:Reference stableInformation}}"
CommandParameter="{Binding .}" />
</custom:CustomFrame.GestureRecognizers>
</custom:CustomFrame>
<StackLayout HorizontalOptions="End">
<Label Text="{Binding SendDate, StringFormat='{0:d/M/yyyy}'}" Style="{DynamicResource LabelGeneralText}"/>
</StackLayout>
</StackLayout>
</AbsoluteLayout>
</custom:CustomFrame>
</ContentView>
</DataTemplate>
</CollectionView.ItemTemplate>
T
Is there a way to avoid this text-overflow?
Not super framilair with Xamarin but you can try this to shorten your Binding Message text (LineBreakMode="TailTruncation").
<Label
Text="This is a very long text"
LineBreakMode="TailTruncation"
WidthRequest="50">
</Label>
From here: https://forums.xamarin.com/discussion/20509/truncate-long-texts-with-ellipsis-on-label-control
Thanks for your suggestions, I will certainly use the LineBreakMode in the future!
I was able to solve the question by removing the AbsoluteLayout and replaced it with a GridLayout.
<ContentView BackgroundColor="{DynamicResource ColorPrimary}">
<custom:CustomFrame VerticalOptions="StartAndExpand"
Style="{DynamicResource FrameWithShadowUnderline}">
<StackLayout Padding="0"
VerticalOptions="StartAndExpand">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.25*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0">
<StackLayout Padding="1">
<templates:DisplayCircleImageTemplate
CircleBackgroundColor="{DynamicResource ColorPrimary}"
ImageSource="{Binding Stable.Image}"
ImageBorderThickness="1.2"
FrameBorderColor="{DynamicResource ColorPrimary}"
ImageBackgroundColor="{DynamicResource ColorPrimary}"
ImageBorderColor="{DynamicResource ButtonColor}"
HeightWidthOuterImage="{DynamicResource ProfileImageSize}"
CornerRadiusOuterImage="{DynamicResource ProfileImageSizeRadius}"
HeightWidthInnerImage="{DynamicResource ProfileImageSizeInsideSize}"/>
</StackLayout>
</Grid>
<Grid Grid.Column="1" Grid.Row="0">
<StackLayout>
<Label Text="{Binding MessageHeader}"
FontAttributes="Bold"
FontSize="Small"/>
<Label HorizontalTextAlignment="Start"
VerticalTextAlignment="Start"
VerticalOptions="StartAndExpand"
Style="{DynamicResource LabelGeneralText}"
Text="{Binding Message}"/>
</StackLayout>
</Grid>
<custom:CustomFrame Grid.Row="1"
Grid.ColumnSpan="2"
HasShadow="True"
Padding="0"
HorizontalOptions="Center"
IsVisible="{Binding HasImage}">
<Image IsVisible="{Binding HasImage}"
HorizontalOptions="CenterAndExpand"
Source="{Binding ImageSource}"/>
<custom:CustomFrame.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding Path=BindingContext.CloserLookCommand, Source={x:Reference stableInformation}}"
CommandParameter="{Binding .}" />
</custom:CustomFrame.GestureRecognizers>
</custom:CustomFrame>
<Label Grid.Row="2" Grid.ColumnSpan="2" Text="{Binding SendDate, StringFormat='{0:d/M/yyyy}'}"
Style="{DynamicResource LabelGeneralText}"
HorizontalOptions="EndAndExpand"
VerticalOptions="EndAndExpand"/>
</Grid>
</StackLayout>
</custom:CustomFrame>
</ContentView>
I have a CollectionView that is bound to a ObserableCollection called UserPermissions.
In that FrontUserPermissionsModel class I have another ObservableCollection called MyPermissions.
I am trying to do something like this:
<CollectionView x:Name="CollectionViewEmployees" Margin="0,10,0,0" ItemsSource="{Binding UserPermissions}" SelectionMode="Single" Grid.Row="0"
SelectionChangedCommand ="{Binding SelectedUSerPermissionsDetailsCommand}" SelectedItem="{Binding SelectedUSerPermission}">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="5,3,5,9">
.
.
.
.
<StackLayout x:Name="SettingItemsLayout" Grid.Row="7" BackgroundColor="red" Grid.Column="0" HeightRequest="300" Grid.ColumnSpan="2"
BindableLayout.ItemsSource="{Binding MyPermissions}" HorizontalOptions="FillAndExpand">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="52*" />
<ColumnDefinition Width="48*" />
</Grid.ColumnDefinitions>
<Label FontSize="18" Grid.Column="0" BackgroundColor="Green" FontAttributes="Bold" HorizontalTextAlignment="Start" Text="{Binding Title}" TextColor="white" />
<Label FontSize="18" Grid.Column="1" FontAttributes="Bold" HorizontalTextAlignment="Start" Text="{Binding AccessLevel}" TextColor="white" />
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
The UserPermission binding is working. But my syntax on how to bind the MyPermissions is incorrect and I am not sure how to fix it. Thanks.
Do you mean you want to let your StackLayout binding an other ObserableCollection in the viewmodel ?
You could use Binding Path :
Maybe something like：
<StackLayout x:Name="SettingItemsLayout" Grid.Row="7" BackgroundColor="red" Grid.Column="0" HeightRequest="300" Grid.ColumnSpan="2"
BindableLayout.ItemsSource="{Binding Source={x:Reference SettingItemsLayout},
Path=BindingContext.MyPermissions}" HorizontalOptions="FillAndExpand">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="52*" />
<ColumnDefinition Width="48*" />
</Grid.ColumnDefinitions>
<Label FontSize="18" Grid.Column="0" BackgroundColor="Green" FontAttributes="Bold" HorizontalTextAlignment="Start" Text="{Binding Title}" TextColor="white" />
<Label FontSize="18" Grid.Column="1" FontAttributes="Bold" HorizontalTextAlignment="Start" Text="{Binding AccessLevel}" TextColor="white" />
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
I have a list view in which i am binding multiple data like labels and image and i have that list in my frame so when list size gets greater then 10 items or so then on scroll my image resizes it self and text of label starts hide unhide.
Here is my xaml:
<ListView
x:Name="list"
SelectionMode="None"
SeparatorVisibility="None"
HasUnevenRows="True"
IsVisible="False"
BackgroundColor="Transparent"
ItemTapped="List_ItemTapped"
CachingStrategy="RetainElement"
>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame Padding="10" Margin="10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition
Height="Auto" />
<RowDefinition Height="*"
/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="Auto" />
<ColumnDefinition
Width="*" />
</Grid.ColumnDefinitions>
<Label
Grid.Row="0"
Grid.Column="0"
Text="{Binding Note}"
HorizontalOptions="Start"
TextColor="Black"
FontSize="Small"
FontFamily="
{StaticResource BoldFont}"
FontAttributes="Bold">
</Label>
<ImageButton
Grid.Row="0"
Grid.Column="1"
HorizontalOptions="EndAndExpand"
WidthRequest="22"
HeightRequest="22"
Padding="6"
Margin="0,0,0,0"
Clicked="btndelete"
AbsoluteLayout.LayoutBounds="0,0,1,1"
BackgroundColor="Transparent"
Source="close.png">
</ImageButton>
<Label
Grid.Row="1"
Grid.Column="0"
Text="{Binding
NOfQuestions}"
FontSize="12"
FontFamily="
{StaticResource Regular}"
TextColor="White">
</Label>
<Label
Grid.Row="1"
Grid.Column="0"
Margin="15,0,0,0"
Text="{Binding
NOfDigits}"
FontSize="12"
FontFamily="
{StaticResource Regular}"
TextColor="White">
</Label>
</Grid>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Here is the video of my problem in this video you can see that the list looks good but when i start to scroll it the text starts to hide unhide its size changes the cross image is getting small or big and on deleting the list item all the text disappears
Gif video of my problem please watch this
This behavior of re-rendering the list cells is generally related to the ListView Caching Strategy. It defines how the cells are cached and tries to improve the performance when loading lots of data, but can also screw with the proper display. Try messing up with the CachingStrategy. In past experience, setting it to "RecycleElement" solved render problems.
Also, check this link for more information about ListView performance.
When you have custom cells in a ListView is recommended to use CachingStrategy
ListView is a powerful view for displaying data, but it has some limitations. Scrolling performance can suffer when using custom cells, especially when they contain deeply nested view hierarchies or use certain layouts that require complex measurement.
XAML for Xamarin.Forms provides a XAML attribute for a non-existent property that corresponds to the caching strategy argument :
<ListView CachingStrategy="RecycleElement" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- ... -->
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Try this
<ListView
x:Name="list"
SelectionMode="None"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
SeparatorVisibility="None"
HasUnevenRows="True"
BackgroundColor="Transparent"
CachingStrategy="RetainElement"
>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame Padding="10" Margin="10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition
Height="Auto" />
<RowDefinition Height="Auto"
/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
<Label
Text="{Binding Note}"
HorizontalOptions="StartAndExpand"
TextColor="Black"
FontSize="Small"
FontFamily="
{StaticResource BoldFont}"
FontAttributes="Bold">
</Label>
<ImageButton
HorizontalOptions="EndAndExpand"
WidthRequest="22"
HeightRequest="22"
Padding="6"
Margin="0,0,0,0"
Clicked="btndelete"
AbsoluteLayout.LayoutBounds="0,0,1,1"
BackgroundColor="Transparent"
Source="close.png">
</ImageButton>
</StackLayout>
<StackLayout Grid.Row="1" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label
Text="{Binding
NOfQuestions}"
HorizontalOptions="StartAndExpand"
FontSize="12"
FontFamily="
{StaticResource Regular}"
TextColor="White">
</Label>
<Label
Margin="15,0,0,0"
Text="{Binding
NOfDigits}"
HorizontalOptions="CenterAndExpand"
FontSize="12"
FontFamily="
{StaticResource Regular}"
TextColor="White">
</Label>
</StackLayout>
</Grid>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>