I'm trying to do add a right border to my label. In CSS, you can to this with a few lines of code:
label {
border-right : 2px solid #000;
}
This seems to be different in Xamarin.Forms XAML as there are no border properties on any of the elements. This is similar to what I'm trying to achieve:
Here is my code:
<ListView x:Name="listview" SeparatorVisibility="None"
HasUnevenRows="True" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="20, 10">
<Label Text="{Binding LoremIpsum}"
HorizontalOptions="Start"/>
<Label Text="{Binding LoremIpsum1}" />
<Label Text="{Binding LoremIpsum2}" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Is there any way I can add a right border to the label? I tried using a BoxView with WidthRequest = 1 and HeightRequest = 10 but it did not work. I even tried using an image but that is not good practice. Any help would be appreciated.
Use Grid Layout and BoxView to show the right border with color green and width 2
eg.
<ListView x:Name="listview" SeparatorVisibility="None"
HasUnevenRows="True" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<BoxView Grid.Column="0" Color="Green"/>
<StackLayout Grid.Column="1" Padding="20, 10">
<Label Text="{Binding LoremIpsum}"
HorizontalOptions="Start"/>
<Label Text="{Binding LoremIpsum1}" />
<Label Text="{Binding LoremIpsum2}" />
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Output:
As an alternate solution to using a Grid, you could also accomplish this with a StackLayout. The key here being to nest your original StackLayout inside another, with Orientation="Horizontal".
<ListView
x:Name="listview"
SeparatorVisibility="None"
HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout
Orientation="Horizontal">
<StackLayout
Padding="20, 10"
HorizontalOptions="FillAndExpand">
<Label
Text="{Binding LoremIpsum}"
HorizontalOptions="Start"/>
<Label
Text="{Binding LoremIpsum1}" />
<Label
Text="{Binding LoremIpsum2}" />
</StackLayout>
<BoxView
WidthRequest="1"
Color="Green" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Related
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
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>
Using xamarin forms.
I have list view contains header and group header like below.
<ListView x:Name="Groups" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
SeparatorVisibility="Default" RowHeight="100" HasUnevenRows="True" IsGroupingEnabled="True" Header="">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<TextCell Height="50" Text="{Binding GroupName}" TextColor="White" />
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.Header>
<Grid BackgroundColor="#941a24" Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" TextColor="White" x:Name="Order" />
<Label Grid.Column="1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" TextColor="White" x:Name="Name"/>
</Grid>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
//items
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
What is happen is the header of the List View appears Vertically Above the Group Header but I want to show the group header above the header (without changing the list view Binding object) such that every time the group header appears the List view header appears below.
No matters where you define the header/group header in your XAML, it'll be compiled and you'll always get the list header above the group header and items (see more on official docs).
If you want that every time the group header appears the List view header appears below, just change the group header template to be a ViewCell and code the actual 'list header' content inside it.
Something like this:
<ListView x:Name="Groups"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
SeparatorVisibility="Default"
RowHeight="100"
HasUnevenRows="True"
IsGroupingEnabled="True">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Spacing="0">
<Label Text="{Binding GroupName}"
TextColor="White"
VerticalTextAlignment="Center"
VerticalOptions="Fill"
HeightRequest="50"/>
<Grid BackgroundColor="#941a24"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label x:Name="Order"
Grid.Column="0"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
TextColor="White"/>
<Label x:Name="Name"
Grid.Column="1"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
TextColor="White"/>
</Grid>
</StackLayout>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
//items
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I hope it helps you.
I have this list in xamarin portable app and i cant seem to be able to remove or at least reduce spacing between items ,and disable item selection also .
<ListView x:Name="ListGroups"
ItemsSource="{Binding Source={x:Static local:Stash.Groups}}"
HorizontalOptions="Center" >
<ListView.ItemTemplate>
<DataTemplate >
<ViewCell>
<Label Text="{Binding Name}" TextColor="Aqua" FontSize="10" HorizontalOptions="Center" />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
then some labels
<Label Text="If you feel you're missing"
FontSize="15"
VerticalOptions="Center"
HorizontalOptions="Center"
TextColor="White"
/>
<Label Text="a group or two, please contact"
FontSize="15"
VerticalOptions="Center"
HorizontalOptions="Center"
TextColor="White"
/>
<Label Text="your manager"
FontSize="15"
VerticalOptions="Center"
HorizontalOptions="Center"
TextColor="White"
/>
</StackLayout>
ImageBackgroundcolor
you can try with
HasUnevenRows = "true"
for "Disable selection" you can follow these
Disabling selection
SelectionDemoList.ItemSelected += (sender, e) => {
((ListView)sender).SelectedItem = null;
};
Note that on Windows Phone, some cells, including SwitchCell don't update their visual state in response to selection.
To reduce the ListView's height you can use a Grid. This is a sample
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TestRelativeLayout.MyPage2">
<ContentPage.Content>
<StackLayout>
<StackLayout>
<Grid VerticalOptions = "FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*" />
<ColumnDefinition Width = "1*"/>
</Grid.ColumnDefinitions>
<Entry Placeholder="MyEntry" Grid.Column = "0" Grid.Row="0" Grid.ColumnSpan = "2"/>
<Image Source="icon.png" Grid.Column="1" Grid.Row = "0" Margin="0,0,20,0"/>
</Grid>
</StackLayout>
<Grid VerticalOptions = "FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="150" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ListView x:Name="ListGroups"
Grid.Row = "0"
Grid.Column = "0"
ItemsSource="{Binding myList}"
HorizontalOptions="Center"
VerticalOptions="Start"
BackgroundColor = "Red">
<ListView.ItemTemplate>
<DataTemplate >
<ViewCell>
<Label Text="{Binding Name}" TextColor="Aqua" FontSize="10" HorizontalOptions="Center" />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackLayout Grid.Row = "1" Grid.Column = "0" >
<Label Text="If you feel you're missing"
FontSize="15"
VerticalOptions="StartAndExpand"
HorizontalOptions="Center"
TextColor="Black" />
<Label Text="a group or two, please contact"
FontSize="15"
VerticalOptions="StartAndExpand"
HorizontalOptions="Center"
TextColor="Black" />
<Label Text="your manager"
FontSize="15"
VerticalOptions="StartAndExpand"
HorizontalOptions="Center"
TextColor="Black" />
</StackLayout>
</Grid>
</StackLayout>
</ContentPage.Content>
</ContentPage>
you have this (on Emulator / Android)
I was trying to write a Xamarin.Forms chat-app.
The problem is: On Android, as soon as the keyboard shows up the whole page (including the ActionBar) moves upwards. I could fix the problem on IOS by using a NuGet package that resizes the page.
I already tried to set WindowSoftInputMode = Android.Views.SoftInput.AdjustResize in the MainActivity.cs in the Android project but it didn't work.
I also tried to resize the page manually by recalculating the screen size, but I haven't found a solution to get the keyboard size for an exact calculation on different devices.
Has anyone had the same problem before?
Is there an official Xamarin.Forms solution for all supported platforms?
This is my chat layout so far:
<ContentPage.Content>
<StackLayout Padding="0">
<ScrollView>
<ListView HasUnevenRows="true" x:Name="lvChat" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Vertical" VerticalOptions="Fill" HorizontalOptions="Fill" Padding="5">
<Label Text="{Binding Author, StringFormat='{0}: '}" TextColor="Navy" FontSize="14" />
<Label Text="{Binding Text}" TextColor="Black" FontSize="15" />
<Label Text="{Binding Time}" TextColor="Black" FontSize="14" />
<!-- Format for time.. , StringFormat='{0:HH:mm}' -->
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollView>
<StackLayout Orientation="Horizontal" Padding="0" Margin="5, 5, 5, 5">
<Entry Keyboard="Chat" x:Name="tbxChatInput" HorizontalOptions="FillAndExpand" Placeholder="Send a Message..." />
<Button x:Name="btnSendMsg" HorizontalOptions="End" Text="Send" Margin="5"/>
</StackLayout>
</StackLayout>
Thanks in advance!
Hi try putting the stacklayout that contains your input and send button inside the scrollview, that way when you tap on the input it pushes the keyboard up shows you your input and the rest of your chat works fine on both iOS and Android. Try this:
<ContentPage.Content>
<StackLayout Padding="0">
<ScrollView>
<StackLayout>
<ListView HasUnevenRows="true" x:Name="lvChat" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Vertical" VerticalOptions="Fill" HorizontalOptions="Fill" Padding="5">
<Label Text="{Binding Author, StringFormat='{0}: '}" TextColor="Navy" FontSize="14" />
<Label Text="{Binding Text}" TextColor="Black" FontSize="15" />
<Label Text="{Binding Time}" TextColor="Black" FontSize="14" />
<!-- Format for time.. , StringFormat='{0:HH:mm}' -->
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackLayout Orientation="Horizontal" Padding="0" Margin="5, 5, 5, 5">
<Entry Keyboard="Chat" x:Name="tbxChatInput" HorizontalOptions="FillAndExpand" Placeholder="Send a Message..." />
<Button x:Name="btnSendMsg" HorizontalOptions="End" Text="Send" Margin="5"/>
</StackLayout>
</StackLayout>
</ScrollView>
</StackLayout>
</ContentPage.Content>
Try setting windowSoftInputMode in your Android Manifest for example:
<application ... >
<activity
android:windowSoftInputMode="adjustResize" ... >
...
</activity>
...
</application>