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?
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
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>
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)