Develop Reference

Why other fields are not displayed in the listview using XAMARIN

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>

ListView Frames as Grid squares one after another

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

CollectionView ItemTemplate with much text

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>

Include Dynamic Custom Xamarin Xaml View Control

Hello I have a repeating carousel I've copied for each deparment that I want to consolidate and make into a custom xaml view control. Here is the original carousel view I have copied several times in my page. I want to figure out how to clean this up with something externally from the page.
<StackLayout Padding="10">
<Label Text="Human Resources" FontSize="Large"
TextColor="#000000"></Label>
<CarouselView ItemsSource="{Binding HumanResourcesCollection}"
PeekAreaInsets="75"
IndicatorView="Indicator"
HeightRequest="275">
<CarouselView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal" ItemSpacing="10"></LinearItemsLayout>
</CarouselView.ItemsLayout>
<CarouselView.EmptyView>
<StackLayout>
<Label Text="No results for this department"
FontSize="Large"
HorizontalOptions="Fill"
HorizontalTextAlignment="Center"></Label>
<Label Text="Contact your manager for more information"
FontSize="Medium"
HorizontalOptions="Fill"
HorizontalTextAlignment="Center"></Label>
</StackLayout>
</CarouselView.EmptyView>
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="10">
<helper:LayoutGradient StartColor="{StaticResource Secondary}"
EndColor="{StaticResource Secondary}"
OptionCorner="True"
RadiusCorner="25"
DirectionColor="False">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="OnDepartmentSelected></TapGestureRecognizer>
</Frame.GestureRecognizers>
<Frame.Content>
<Grid RowSpacing="0" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Grid.Row="0" Aspect="AspectFit" Opacity=".35" VerticalOptions="End" HorizontalOptions="End">
<Image.Source>
<FontImageSource Size="148" Glyph="{Binding Comments}"
FontFamily="{DynamicResource FontIcons}"
Color="Blue"></FontImageSource>
</Image.Source>
</Image>
<StackLayout
Grid.Row="0" Grid.Column="0">
<Label Text="{Binding Title}" FontSize="Medium" FontAttributes="Bold"
></Label>
<Label Text="{Binding Version}" FontSize="Small"></Label>
</StackLayout>
</Grid>
</Frame.Content>
</helper:LayoutGradient>
<Label Padding="0, 10, 0, 10" Text="{Binding Description}"
TextColor="#808080"
FontSize="Medium"></Label>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView x:Name="Indicator" IndicatorColor="LightBlue"
SelectedIndicatorColor="DarkGray"></IndicatorView>
How Can I dynamically add the title and collection? I've gotten the carousel view to show but cannot get it to show when involving data and properties.
xmlns:control="clr-namespace:Program.Controls"
<control:CarouselControl Department="Human Resources" Collection="{Binding HumanResourcesCollection}"></control:CarouselControl>
<control:CarouselControl Department="Administration" Collection="{Binding AdministrationCollection}"></control:CarouselControl>
<control:CarouselControl Department="Operations" Collection="{Binding OperationsCollection}"></control:CarouselControl>
Am I in the right thinking or way off base? Been messing around with properties in a ViewModel but don't know enough to get it working. Thanks all.
public string Department {get; set;}
public ObservableCollectoin<DeparmentModel> Collection {get; set;}

Since you had used Custom ContentView , you need use bindable property to binding value between the elements in ContentView and Parent ContentPage
in CarouselControl.xaml
<?xml version="1.0" encoding="UTF-8" ?>
<ContentView
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
//...
x:Name="view" // set the name of CarouselControl
>
<StackLayout Padding="10">
<Label Text="Human Resources" FontSize="Large"
TextColor="#000000"></Label>
<CarouselView ItemsSource="{Binding Source={x:Reference view}, Path=Collection}"
PeekAreaInsets="75"
IndicatorView="Indicator"
HeightRequest="275">
<CarouselView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal" ItemSpacing="10"></LinearItemsLayout>
</CarouselView.ItemsLayout>
<CarouselView.EmptyView>
<StackLayout>
<Label Text="No results for this department"
FontSize="Large"
HorizontalOptions="Fill"
HorizontalTextAlignment="Center"></Label>
<Label Text="Contact your manager for more information"
FontSize="Medium"
HorizontalOptions="Fill"
HorizontalTextAlignment="Center"></Label>
</StackLayout>
</CarouselView.EmptyView>
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="10">
<helper:LayoutGradient StartColor="{StaticResource Secondary}"
EndColor="{StaticResource Secondary}"
OptionCorner="True"
RadiusCorner="25"
DirectionColor="False">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="OnDepartmentSelected></TapGestureRecognizer>
</Frame.GestureRecognizers>
<Frame.Content>
<Grid RowSpacing="0" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Grid.Row="0" Aspect="AspectFit" Opacity=".35" VerticalOptions="End" HorizontalOptions="End">
<Image.Source>
<FontImageSource Size="148" Glyph="{Binding Comments}"
FontFamily="{DynamicResource FontIcons}"
Color="Blue"></FontImageSource>
</Image.Source>
</Image>
<StackLayout
Grid.Row="0" Grid.Column="0">
<Label Text="{Binding Title}" FontSize="Medium" FontAttributes="Bold"
></Label>
<Label Text="{Binding Version}" FontSize="Small"></Label>
</StackLayout>
</Grid>
</Frame.Content>
</helper:LayoutGradient>
<Label Padding="0, 10, 0, 10" Text="{Binding Source={x:Reference view}, Path=Description}"
TextColor="#808080"
FontSize="Medium"></Label>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView x:Name="Indicator" IndicatorColor="LightBlue"
SelectedIndicatorColor="DarkGray"></IndicatorView>
in CarouselControl.xaml.cs
public static readonly BindableProperty CollectionProperty =
BindableProperty.Create(nameof(Collection), typeof(ObservableCollection<YourModel>), typeof(CarouselControl));
public ObservableCollection<YourModel> Collection
{
get => (ObservableCollection<YourModel>)GetValue(CollectionProperty );
set => SetValue(CollectionProperty , value);
}
Note : YourModel here is the mdoel that contains the properties of the CarouselView , like
public class YourModel
{
public string Title { get; set; }
public string Version { get; set; }
//...other proerty in CarouselView
}
in ContentPage
<control:CarouselControl Department="Human Resources" Collection="{Binding HumanResourcesCollection}"></control:CarouselControl>
You just need to binding the source of Collection, the property Title
had been set when you init the HumanResourcesCollection so you don't need to binding it again .
Here is some similar case that you can have a refer
How to bind a CommandParameter in a ContentView to an element in the parent ContentPage in Xamarin Forms
When to use Xamarin bindings as opposed to passing objects to page constructors?

No button Clicking Event in xamarin form inside a DataTemplate

I am using swipecards in my xamarin form project.
This is my Xaml code--
<swipecards:CardStackView Grid.Row="0" x:Name="CardStackView" ItemsSource="{Binding Cards[0]}" Swiped="CardStackView_Swiped" StartedDragging="CardStackView_dragged" Margin="20" BackgroundColor="#E0E0E0">
<swipecards:CardStackView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="0,2,0,2" x:Name="layout">
<StackLayout Orientation="Horizontal" VerticalOptions="Start">
<Label Text="{Binding .FullJobName}" HorizontalOptions="Start" Style="{DynamicResource TitleStyle}" />
<Grid>
<Image x:Name="MyImage" Source="{Binding .CompanyProfImg}" HorizontalOptions="End" HeightRequest="50" WidthRequest="50" />
<ActivityIndicator BindingContext="{x:Reference MyImage}" IsRunning="{Binding IsLoading}}"/>
</Grid>
</StackLayout>
<StackLayout HorizontalOptions="StartAndExpand">
<Label Text="{Binding .LocationName}" HorizontalOptions="StartAndExpand" Style="{DynamicResource SubtitleTextStyle}" />
<Label Text="{Binding .TotalSalary }" Style="{DynamicResource SubtitleTextStyle}" />
</StackLayout>
<StackLayout>
<Label Text="Comapny Name" Style="{DynamicResource TitleStyle}" HorizontalOptions="StartAndExpand"/>
<Label Text="{Binding .CompanyName}" Style="{DynamicResource ListItemTextStyle}" HorizontalOptions="StartAndExpand"/>
</StackLayout>
<StackLayout>
<Label Text="Key Skills" Style="{DynamicResource TitleStyle}" HorizontalOptions="StartAndExpand"/>
<Label Text="{Binding .Skills}" Style="{DynamicResource ListItemTextStyle}" HorizontalOptions="StartAndExpand"/>
</StackLayout>
<StackLayout>
<Label Text="Job Description" FontAttributes="Bold" FontSize="14" HorizontalOptions="StartAndExpand"/>
<Label Text="{Binding .Description}" Style="{DynamicResource ListItemTextStyle}" HorizontalOptions="StartAndExpand"/>
</StackLayout>
<BoxView Color="#DCDCDC" WidthRequest="160" HeightRequest="2" />
<StackLayout Orientation="Horizontal" HorizontalOptions="StartAndExpand" VerticalOptions="EndAndExpand">
<Label Text="{Binding .Postedby}" HorizontalOptions="Start" Style="{DynamicResource CaptionStyle}" />
<!--<Image x:Name="fb_imageTag" Source="facebooklogo.png">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="ReadMore_Clicked" />
</Image.GestureRecognizers>
</Image>-->
<Button Text="Delete" Clicked="DeleteClicked"/>
</StackLayout>
</StackLayout>
</DataTemplate>
</swipecards:CardStackView.ItemTemplate>
</swipecards:CardStackView>
The problem is the button is not clicking inside the Data template.
Can you guys please help me what should i do now?
Thank you..

Hard to say what is wrong. Could you show full xaml code, view code behind and your viewmodel
Is DeleteClicked is in code behind or in VM?