Im working on styling up my ListView. In my ItemTemplate are only two Labels in a Stacklayout with Vertical Orientation. As you can see in the Picture there are some spacing between the two Labels. I dont want this space and have the Labels direct under each other. Has someone an advice?
ListView with Label-Background
<ListView x:Name="ItemList"
ItemSelected="ItemList_ItemSelected"
HasUnevenRows="True"
IsGroupingEnabled="true"
GroupDisplayBinding="{Binding LongName}"
GroupShortNameBinding="{Binding ShortName}"
SeparatorVisibility="None">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Orientation="Horizontal"
BackgroundColor="{StaticResource LightGreyColor}"
Padding="20,10,0,10">
<Label Text="{Binding LongName}"
Style="{DynamicResource DateLabel}"/>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Orientation="Vertical"
Padding="20,10,0,10">
<Label Text="{Binding Name}"
Style="{DynamicResource ItemTitleLabel}"
BackgroundColor="Bisque"/>
<Label Text="{Binding Description}"
Style="{DynamicResource SubTitleLabel}"
BackgroundColor="Bisque"/>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I remember that default spacing between items in StackLayout (and between rows in a Grid) is more than 0. If you want no space between items you can simply add Spacing="0" attribute in your StackLayout.
StackLayout has a default Spacing of 10, you need to set it to 0 if you don't want the spacing between items.
Related
I have one list and i don't want to use listview inside it as how can i make it scrollable, data is binding but i am not able to scroll it.
<Grid Grid.Row="0" IsVisible="{Binding SearchListLayout}" Margin="0" Padding="0" BackgroundColor="White">
<ScrollView>
<StackLayout BindableLayout.ItemsSource="{Binding ProductsList}" x:Name="SearchLayoutItemList" HeightRequest="255">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid RowDefinitions="37,Auto">
<Image Grid.Row="0" Source="searchingicon.png" Style="{DynamicResource icons}"/>
<Label Grid.Row="0" Text="{Binding name}" FontSize="14" TextColor="Black" Margin="50,0,0,0" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand"/>
<Image Grid.Row="0" Source="reload.png" Style="{DynamicResource icons}" HorizontalOptions="EndAndExpand" Margin="0,0,15,0"/>
<BoxView Grid.Row="1" Style="{DynamicResource DarkSeparator}" />
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</ScrollView>
</Grid>
Although the BindableLayout technically can display your list of items via the StackLayout, and the StackLayout height is being restraint to your height request; the encompassing ScrollViewer has nothing to scroll since it fully contains your StackLayout.
To achieve what you probably want (a fixed 255 pixel StackLayout that scrolls your items) the ScrollViewer should be inside the StackLayout as the rendered ItemsPanel for you Items. Again, you could achieve this with custom BindableLayouts, but this is exactly what Xamarin Forms ListView does by default.
You probably simply want to change your BindableLayout implementation to a ListView:
<Grid Grid.Row="0" IsVisible="{Binding SearchListLayout}" Margin="0" Padding="0" BackgroundColor="White">
<ListView ItemsSource="{Binding ProductsList}" x:Name="SearchLayoutItemList" HeightRequest="255">
<ListView.ItemTemplate>
<DataTemplate>
<Grid RowDefinitions="37,Auto">
<Image Grid.Row="0" Source="searchingicon.png" Style="{DynamicResource icons}"/>
<Label Grid.Row="0" Text="{Binding name}" FontSize="14" TextColor="Black" Margin="50,0,0,0" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand"/>
<Image Grid.Row="0" Source="reload.png" Style="{DynamicResource icons}" HorizontalOptions="EndAndExpand" Margin="0,0,15,0"/>
<BoxView Grid.Row="1" Style="{DynamicResource DarkSeparator}" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
The scrollview could not scroll as you set the HeightRequest="255" for the stacklayout in the scrollview. That because the display content's height is equal with the Scrollview, left content was covered.
Then I remove the HeightRequest
in StackLayout, the ScrollView could scroll. But the scrollview will fill the whole page which I thought is not what you want. So you could add parent layout Stacklayout outside the scrollview which set the size of scrollview equal to 255 and let it scroll at the same time. I just made an example :
<StackLayout>
<ScrollView HeightRequest="255">
<StackLayout BindableLayout.ItemsSource="{Binding ItemCollection}" x:Name="SearchLayoutItemList" >
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid RowDefinitions="37,Auto">
<Image Grid.Row="0" Source=""searchingicon.png"" />
<Label Grid.Row="0" Text="{Binding name}" FontSize="14" TextColor="Black" Margin="50,0,0,0" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand"/>
<Image Grid.Row="0" Source="reload.png" HorizontalOptions="EndAndExpand" Margin="0,0,15,0"/>
<BoxView Grid.Row="1" BackgroundColor="Yellow"/>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</ScrollView>
</StackLayout>
For more info, you could refer to Xamarin.Forms ScrollView.
Hope it works for you.
I have a slight problem with XamarinForms, which I am fairly new with.
I do have a grid with several Items in it (ListView, Label, Stacklayout, Listview).
I thought setting RowDefinitions = "Auto" for each row, would make the whole Page scrollable.
But instead I have a scrollbar on each individual listView.
I have added a snippet of my code with one of the listViews inside.
How do I get the listViews shown in their full size and the scrollbar be for the whole page?
I have already tried a scrollview instead of the grid, but it did not work.
Picture of Content in Emulator
Picture of Whole Page
Xamarin Forms:
<Grid
Padding="10"
RowDefinitions="Auto,Auto,Auto,Auto"
ColumnDefinitions="*"
>
<Label Padding="20" FontAttributes="Bold" FontSize="40" Text="{Binding DisplayName}" Grid.Row="0"/>
<ListView ItemsSource="{Binding News}"
HasUnevenRows="True"
IsPullToRefreshEnabled="False"
Grid.Row="1">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="10">
<Label Text="{Binding DateTimeString}"/>
<Label Text="{Binding Text}" MaxLines="4"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Header>
<Grid ColumnDefinitions="*,Auto"
Padding="10"
VerticalOptions="Center">
<Label Text="News"
Grid.Column="0"
FontAttributes="Bold"
FontSize="32"/>
<Label Text="mehr Anzeigen"
Grid.Column="1"
HorizontalTextAlignment="End"/>
</Grid>
</ListView.Header>
</ListView>
You can put the items in ScrollView which is capable of scrolling its content.
refer to: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/scrollview
I have a List view with fixed Row Height. Inside List view there is Label with large description. I am trying to make this label scroll able. Can anyone help please.
<ListView ItemsSource="{Binding ServiceList, Mode=TwoWay}" RowHeight="100">
<ListView.ItemTemplate>
<DataTemplate x:DataType="models:ServiceModel">
<ViewCell>
<ScrollView
Margin="0"
Padding="0"
HeightRequest="50">
<Label
LineBreakMode="WordWrap"
Style="{StaticResource blackColorLabel}"
Text="{Binding ServiceDescription}" />
</ScrollView>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
As mentioned in the comments, you shouldn't nest scrollviews because the behavior is erratic. You can use BindableLayout though.
<StackLayout BindableLayout.ItemsSource="{Binding ServiceList}">
<BindableLayout.ItemTemplate>
<DataTemplate x:DataType="models:ServiceModel">
<ScrollView
Margin="0"
Padding="0"
HeightRequest="50">
<Label
LineBreakMode="WordWrap"
Style="{StaticResource blackColorLabel}"
Text="{Binding ServiceDescription}" />
</ScrollView>
</DataTemplate>
</BindableLayout.ItemTemplate>
RowHeight is not a thing for BindableLayouts, but you could probably wrap your Label in a ContentView and set the HeightReqeust of the ContentView to 100. Or maybe even just set your Label Height Request to 100 and see what that does.
I am trying to change the background color of GroupDisplayBinding only that is inside the list view without affecting the list. As you can see in the image, the background is lightgray, also I want to change the margin of it too if that's possible.
<ListView
IsVisible="{Binding ShowList}"
IsGroupingEnabled="True"
HasUnevenRows="True"
SelectionMode="None"
SeparatorVisibility="None"
BackgroundColor="#ffffff"
GroupDisplayBinding="{Binding GroupName}"
GroupShortNameBinding="{Binding ShortName}"
ItemsSource="{Binding List}">
<ListView.Behaviors>
<behaviors:EventToCommandBehavior Command="{Binding ListItemTappedCommand}"
EventName="ItemTapped" />
</ListView.Behaviors>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame HasShadow="False"
CornerRadius="0"
Margin="2"
Padding="10"
BackgroundColor="#ffffff"
BorderColor="#000000">
<StackLayout Orientation="Horizontal"
Spacing="0"
Padding="0"
Margin="0">
<Label Text="{Binding Name}"
HorizontalOptions="StartAndExpand"
Style="{StaticResource ListTextStyle}"
TextColor="#2278B5"/>
<Label Text=">"
Style="{StaticResource ListTextStyle}"
TextColor="#2278B5"
HorizontalOptions="End"
FontSize="24" />
</StackLayout>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
We could take it one step further and implement our own custom header cell with a nice background color.
The demo is very simple and just contains a Label, which binds to GroupName and I am placing it inside of a StackLayout with a bit of custom padding and a background color.
<ListView IsVisible="{Binding ShowList}"
IsGroupingEnabled="True"
HasUnevenRows="True"
SelectionMode="None"
SeparatorVisibility="None"
BackgroundColor="#ffffff"
GroupDisplayBinding="{Binding GroupName}"
GroupShortNameBinding="{Binding ShortName}"
ItemsSource="{Binding List}">
// set the appearance of Header here as you want
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell Height="25">
<StackLayout VerticalOptions="FillAndExpand" Padding="5" BackgroundColor="#3498DB">
<Label Text="{Binding GroupName}" TextColor="White" Margin="10" VerticalOptions="Center"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
//...
</ListView.ItemTemplate>
</ListView>
I'm making a simple listview and got a problem with iOS header - I want to make it transparent, but the problem is, that listview items are sliding under heading. What I want to achieve, is that heading will slide up with listview items.
This is how it looks now
And this is how current code looks like:
<ListView x:Name="SingleBeanView"
ItemsSource="{Binding Beans}"
IsGroupingEnabled="true"
Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
BackgroundColor="Transparent">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell ios:Cell.DefaultBackgroundColor="Transparent" Height="52">
<Label Text="{Binding Heading}" TextColor="{StaticResource LightTextColor}" FontSize="Large" HorizontalOptions="Start" VerticalOptions="Start" Margin="15,10,0,0"/>
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BackgroundColor="Transparent" Orientation="Vertical">
<StackLayout Orientation="Horizontal">
<Label Text="{Binding Field1}"/>
<Label Text="{Binding Field2}"/>
<Label Text="{Binding Field3}"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Unfortunately , if using GroupHeader in ListView , this can not achieve your want.This effect is designed by Apple . If want to modify ,this need more things and time to do about customing listview.
Here is a solution for native ios, you can have a try with custom renderer to do.However, after testing this can not work in Xamarin.
So the last way maybe need custom cell to realize it--Puttinng header in Cell . Then That means you can not use GroupHeaderTemplate.
Another discussion.