I can list my messages , Listview - xaml

I can list my messages, but now I wanted every message after that I had a balloon. To identify if I sent or received. The balloon is now the text is not staying. Can you help me?
<ListView x:Name="Post_List" Grid.Row="1">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid ColumnSpacing="2" Padding="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="40"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Frame Grid.Row="0" OutlineColor="Transparent"
HasShadow="False" Grid.Column="0"
CornerRadius="5" BackgroundColor="#03A9F4">
<Label TextColor="White" Text="{Binding Mensagem}"/>
</Frame>
<Label FontSize="Micro" Grid.Row="1" Grid.Column="0"
Text="{Binding Data}" TextColor="Gray"></Label>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Adding HasUnevenRows="True" to your ListView will fix your issue.
This is because you did not set any RowHeight which is alright cause you want the height to be based on the content but the ListView does not know the dimension to apply. Using the HasUnevenRows the ListView will be calculating the size to fit the content.
<ListView x:Name="Post_List" Grid.Row="1" HasUnevenRows="True" >
<ListView.ItemTemplate >
<DataTemplate >
<ViewCell>
<Grid ColumnSpacing="2" Padding="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="40" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Frame Grid.Row="0" OutlineColor="Transparent" HasShadow="False" Grid.Column="0" CornerRadius="5" BackgroundColor="#03A9F4">
<Label TextColor="White" Text="{Binding Mensagem}"/>
</Frame>
<Label FontSize="Micro" Grid.Row="1" Grid.Column="0" Text="{Binding Data}" TextColor="Gray"></Label>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Hope this helps.-

Related

xamarin forms - ios - listview header - showing bold border?

Please see below image
please see below code
//PopUp.Xaml
<ListView.Header>
<Frame>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30*" />
<ColumnDefinition Width="25*" />
<ColumnDefinition Width="25*" />
<ColumnDefinition Width="20*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Text="Product"
HorizontalOptions="Center"/>
<Label Grid.Column="1" Grid.Row="0"
Text="Quantity"
HorizontalOptions="Center"/>
<Label Grid.Column="2" Grid.Row="0"
Text="Price"
HorizontalOptions="Center"/>
<Label Grid.Column="3" Grid.Row="0"
Text="Sub"
HorizontalOptions="Center"/>
<BoxView Grid.Row="1"
Grid.ColumnSpan="4"
HeightRequest="1"
BackgroundColor="LightGray"/>
</Grid>
</Frame>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="10" RowSpacing="10" ColumnSpacing="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="43*" />
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="25*" />
<ColumnDefinition Width="24*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Text="{Binding OrderModel_Id}" VerticalOptions="End"/>
<Label Grid.Column="1" Grid.Row="0" Text="{Binding User_Name}" VerticalOptions="End"/>
<Label Grid.Column="0" Grid.Row="0" HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand" Text="{Binding Product_Id, Converter={StaticResource converter}}"/>
<Label Grid.Column="1" Grid.Row="0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Text="{Binding Quantity}"/>
<Label Grid.Column="2" Grid.Row="0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Text="{Binding PriceOf_Item, StringFormat='£{0:0.00}'}"/>
<Label Grid.Column="3" Grid.Row="0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Text="{Binding SubtotalForThis_Item, StringFormat='£{0:0.00}'}"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</pages:PopupPage>
My Q being why does the popUp header of the listview...appear with a bold border below it? only on ios...not on android...I would like to remove it please. does anyone know how?

Xamarin Forms Center Grid horizontal

I have a problem. I am trying to achieve the following Grid:
To do that, I thought that I should set both the ColumnWidth to Auto and set the HorizontalOptions of the Grid to Center, so the Grid is centred in the middle of the screen creating equal spaces at the left and right side, but no matter what I try, I can't seem to move the columns from the right side. Here is what I have now:
And here is my code:
<Frame BorderColor="#00D8FF" Padding="0" HorizontalOptions="FillAndExpand" BackgroundColor="Transparent">
<StackLayout Orientation="Vertical">
<CarouselView ItemsSource="{Binding coinDataList}" HeightRequest="50">
<CarouselView.ItemTemplate>
<DataTemplate>
<Grid RowSpacing="0" HorizontalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="1" Text="BTC-USDT" FontAttributes="Bold" TextColor="#00D8FF" FontSize="18"/>
<Label Grid.Row="1" Grid.Column="1" Text="9762.33" TextColor="White" FontSize="18"/>
<Label Grid.RowSpan="2" Grid.Column="2" Text="-$476.22 (-4.77%)" VerticalOptions="CenterAndExpand" FontAttributes="Bold" TextColor="Red" FontSize="18" Margin="15,0,0,0"/>
</Grid>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</StackLayout>
</Frame>
How can I create my wanted result?
Can you try this?
<Frame BorderColor="#00D8FF" Padding="0" HorizontalOptions="FillAndExpand" BackgroundColor="Transparent">
<StackLayout Orientation="Vertical">
<CarouselView ItemsSource="{Binding coinDataList}" HeightRequest="50">
<CarouselView.ItemTemplate>
<DataTemplate>
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="1" Text="BTC-USDT" FontAttributes="Bold" TextColor="#00D8FF" FontSize="18"/>
<Label Grid.Row="1" Grid.Column="1" Text="9762.33" FontAttributes="Bold" TextColor="#00D8FF" FontSize="18"/>
<Label Grid.Row="0" Grid.Column="2" VerticalTextAlignment="Center" Text="-$476.22 (-4.77%)" FontAttributes="Bold" TextColor="#00D8FF" FontSize="18"/>
</Grid>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</StackLayout>
</Frame>

Xamarin Forms Access parent collection item

I have a problem. I have a CollectionView with a List<Album> albumList with inside an Album a List<Picture> Pictures. Now I created the following XAML:
<CollectionView ItemsSource="{Binding albumList}">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid VerticalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="90"/>
<RowDefinition Height="5"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="30"/>
<RowDefinition Height="10"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="3"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="3"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="3" Grid.Column="3" Grid.ColumnSpan="2" Padding="0" Margin="0"
BindableLayout.ItemsSource="{Binding Pictures}" Orientation="Vertical">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal">
<Label Grid.Column="1" Text="{Binding albumList.Price, StringFormat='€ {0:F2}'}" TextColor="Black" FontSize="16" />
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Now I want to access the current Album.Price inside the following line: <Label Grid.Column="1" Text="{Binding albumList.Price, StringFormat='€ {0:F2}'}" TextColor="Black" FontSize="16" />
This is outside the current binding of Pictures, so how can I enter a value from outside the current Binding?
You can define the BindingContext from a reference of an element outside the nested Collection, give a name to your StackLayout for example:
<StackLayout x:Name="ElementForReference" Grid.Row="3" Grid.Column="3" Grid.ColumnSpan="2" Padding="0" Margin="0"
BindableLayout.ItemsSource="{Binding Pictures}" Orientation="Vertical">
And then define the BindingContext with the reference of the element outside the nested one:
{Binding BindingContext.Price, Source={x:Reference Name=ElementForReference}}

Listview XAML in Xamarin.Forms with button

I have the following image below which I have tried to design in XAML- Xamarin forms.
The xaml code is as follows:
<ListView x:Name="myList" HasUnevenRows="true" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame Padding="0,0,0,8" BackgroundColor="#edeeef" BorderColor="#edeeef">
<Frame.Content>
<Frame OutlineColor="Transparent" BackgroundColor="White">
<Frame.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="7*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<StackLayout Orientation="Vertical" Grid.Row="0" Grid.Column="0">
<Label Text="{Binding ItemName}"
TextColor="Black"
FontFamily="OpenSans-Light"
FontSize="16"
HorizontalOptions="FillAndExpand"/>
<Label Text="Engine coolant temperature sesnor 1 circuit intermittent (DTC Confirmed)" FontSize="11" HorizontalOptions="StartAndExpand"/>
<StackLayout Orientation="Horizontal">
<Button Text="OBD" />
<Button Text="CUS" />
</StackLayout>
</StackLayout>
<BoxView
VerticalOptions="Fill"
HorizontalOptions="End"
WidthRequest="1"
HeightRequest="5"
Color="Blue"
Grid.Row="0"
Grid.Column="1"/>
<ffsvg:SvgCachedImage
Aspect="AspectFit"
VerticalOptions="Center"
Source="Bin.png"
Grid.Column="2"
Grid.Row="0"
/>
</Grid>
</Frame.Content>
</Frame>
</Frame.Content>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The issue that I am having is that I am unable to draw the vertical right line separating the content and the square red box on the right.
When I am adding the image, it is adding extra padding on the bottom.
Can someone please help me to align the components properly as in the image above in XamarinForms? Thanks.
Your design is quite messed up and should be cleaned up
Within the ViewCell, you have two nested Frames, which causes the main issue: There is a padding on the inner Frame that and on the outer one, which prevent the separator to take the full height
A nested Grid and StackLayout is most likely not necessary and definitely detrimental for your performance
Suggestions:
Remove the outer Frame and add a Margin to the inner one
Set the Padding of the inner frame to 0
Remove the StackLayout wrapped in the Grid and add the controls to the Grid
Add the Grid.RowSpan and Grid.ColumnSpan for controls that take more height/width in the Grid
Your XAML within the ViewCell will look like this:
<Frame Padding="0"
Margin="5"
BorderColor="Transparent"
BackgroundColor="White"
CornerRadius="10">
<Grid ColumnSpacing="0" RowSpacing="5" Padding="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Text="ItemName"
TextColor="Black"
FontFamily="OpenSans-Light"
FontSize="16"
HorizontalOptions="FillAndExpand"
VerticalOptions="End"
Grid.Column="0"
Grid.Row="0"
Grid.ColumnSpan="2"
Margin="10,10,10,0" />
<Label Grid.Column="0"
Grid.Row="1"
Grid.ColumnSpan="2"
Text="Engine coolant temperature sesnor 1 circuit intermittent (DTC Confirmed)"
FontSize="11"
HorizontalOptions="StartAndExpand"
Margin="10,0,0,0" />
<Button Text="OBD"
VerticalOptions="End"
HorizontalOptions="Start"
Grid.Row="2"
Grid.Column="0"
Margin="10,0,5,10" />
<Button Text="CUS"
VerticalOptions="End"
HorizontalOptions="Start"
Grid.Row="2"
Grid.Column="1"
Margin="0,0,10,10" />
<BoxView VerticalOptions="Fill"
HorizontalOptions="End"
WidthRequest="1"
Color="LightPink"
Margin="0"
Grid.Row="0"
Grid.Column="2"
Grid.RowSpan="3" />
<Image Aspect="AspectFit"
VerticalOptions="Center"
HorizontalOptions="End"
Source="http://lorempixel.com/output/abstract-q-c-200-200.jpg"
Grid.Column="3"
Grid.Row="0"
Grid.RowSpan="3"
Margin="10"/>
</Grid>
</Frame>
And eventually the design looks like that (There is still space for tweaking, but basically that's it. I've changed the colors a bit for better visibility):
Follow this Code.
<Grid Grid.Row="3" Padding="{StaticResource Padding15050}">
<ListView x:Name="ListViewFood" ItemsSource="{Binding FoodList}" HasUnevenRows="True" ItemSelected="OnSelection" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="{StaticResource Padding510}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Controls:Label x:Name="LabelName" Grid.Row="0" Text = "{Binding Name}" Font="17" TextColor="{StaticResource Black}"/>
<Controls:Label x:Name="LabelDescription" Grid.Row="1" Text = "{Binding Description}" Font="15" />
<Controls:Label x:Name="LabelPrice" Grid.Row="2" Text = "{Binding Price}" Font="15" TextColor="{StaticResource YetiBlue}"/>
</Grid>
<Grid Grid.Column="1">
<Controls:RectangleButton Text="Add" Font="Bold,15" VerticalOptions="Start" HorizontalOptions="EndAndExpand" CommandParameter="{Binding Id}" Clicked="RectangleButton_Clicked"/>
</Grid>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
Design like this.
If you want to add a separate line, you just need to add a BoxView in your xaml with WidthRequest=1.
I always use this solution for separating content.
In your case I would suggest to delete HeightRequest in your BoxView.

Xamarin.Forms Center ListView Items

How do I center listview items within a Xamarin.Forms app?
The listview items are currently left-aligned.
I want them to be center-aligned.
I have the following code:
<ListView Grid.Row="1" Grid.Column="0" ItemsSource="{Binding Results}" HorizontalOptions="Center">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid HorizontalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="{Binding FirstName}" />
<Label Grid.Row="0" Grid.Column="1" Text="{Binding LastName}" />
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Scott the Grid always expands to occupy 100% of the available space. There is no way as far as I can tell to override this even explicitly setting a widthrequest on the grid doesn't even seem to help.
I assume you have a larger layout requirement your attempting to satisfy as centering first and Last name in a listView would be better accomplished with a Stacklayout instead of a grid.
IE
<ViewCell.View>
<StackLayout Orientation="Horizontal">
<Label Text="{Binding FirstName}" HorizontalOptions="EndAndExpand"/>
<Label Text="{Binding LastName}" HorizontalOptions="StartAndExpand"/>
</StackLayout>
</ViewCell.View>
But assuming you really need a Grid then I can offer only 1 addition to Tomasz's suggestion.
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition />
<ColumnDefinition/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="1" Text="{Binding FirstName}" HorizontalOptions="End"/>
<Label Grid.Row="0" Grid.Column="2" Text="{Binding LastName}" />
</Grid>
This create two Columns on the outside to eat up the space forcing the names to the middle.
Without having actually tried it...
Your cell view is <Grid HorizontalOptions="Center">, but the Grid itself is expanded to fit the cell, so the HorizontalOptions there is inconsequential.
You need to put a secondary container inside that Grid that will be centered,
something like:
<ViewCell.View>
<Grid>
<StackPanel Orientation="Horizontal" HorizontalOptions="Center">
<Label Grid.Row="0" Grid.Column="0" Text="{Binding FirstName}" />
<Label Grid.Row="0" Grid.Column="1" Text="{Binding LastName}" />
</StackPanel>
</Grid>
</ViewCell.View>
You could also try (if the above doesn't work) adding 3 columns (and 3 rows for vertical alignment) to the Grid with sizes (auto)-(*)-(auto) and putting the StackPanel in the center cell.
Maybe this way:
<Label Grid.Row="0" Grid.Column="0" Text="{Binding FirstName}" HorizontalOptions="Center"/>
<Label Grid.Row="0" Grid.Column="1" Text="{Binding LastName}" HorizontalOptions="Center"/>
EDITED:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="{Binding FirstName}" HorizontalOptions="Center"/>
<Label Grid.Row="0" Grid.Column="1" Text="{Binding LastName}" HorizontalOptions="Center"/>
Just by adding HorizontalOptions="Center" to Label worked for me, good luck
<ListView Grid.Row="1" Grid.Column="0" ItemsSource="{Binding Results}" HorizontalOptions="Center">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid HorizontalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Label HorizontalOptions="Center" Grid.Row="0" Grid.Column="0" Text="{Binding FirstName}" />
<Label HorizontalOptions="Center" Grid.Row="0" Grid.Column="1" Text="{Binding LastName}" />
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>