I want to remove the spacing between the group headers in the ListView
.
I want to get rid of that space to make my UI more compact. I tried everything, from setting Spacing=0
, RowSpacing=0
, ItemSpacing=0
etc. Really don't know what to do now.
This is the list view GroupHeader
template and some other settings for the ListView
private void SetListViewDataAsync()
{
string PageTerm = GradesPage.PageTermGlobal;
List<Data> ItemSourceData = Globals.Dataset.FindAll(item => item.TermCode == PageTerm);
listView.ItemsSource = ItemSourceData;
listView.AllowGroupExpandCollapse = true;
listView.Loaded += ListView_Loaded;
listView.PropertyChanged += ListView_PropertyChanged;
listView.GroupExpanding += ListView_GroupExpanding;
listView.GroupCollapsing += ListView_GroupCollapsing;
listView.ItemSpacing = 0;
listView.ItemSize = 200;
listView.GroupHeaderSize = 80;
SetItemTemplate();
listView.DataSource.GroupDescriptors.Add(new GroupDescriptor()
{
PropertyName = "CourseName",
KeySelector = (object obj1) =>
{
var item = (obj1 as Data);
return item;
}
});
listView.GroupHeaderTemplate = new DataTemplate(() =>
{
/*
* Remove mail text, change name to a mailto:
* Remove vertical whitespacing.
*
*/
var MainGrid = new Grid() { VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.FillAndExpand, HeightRequest = 50 };
MainGrid.BackgroundColor = Xamarin.Forms.Color.FromRgba(0, 0, 0, 0.60);
MainGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
MainGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
MainGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
Binding binding1 = new Binding("Key");
binding1.Converter = new GroupHeaderConverter();
binding1.ConverterParameter = 0;
var label = new Label() { VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Start, FontSize = 17, FontAttributes = FontAttributes.Bold, TextColor = Color.White, Margin = new Thickness(5, 0, 0, 0) };
label.SetBinding(Label.TextProperty, binding1);
Binding binding4 = new Binding("Key");
binding4.Converter = new GroupHeaderConverter();
binding4.ConverterParameter = 3;
var classType = new Label() { VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Center, FontSize = 10, TextColor = Color.White };
classType.SetBinding(Label.TextProperty, binding4);
var stackLayout = new StackLayout();
stackLayout.Orientation = StackOrientation.Horizontal;
stackLayout.Children.Add(label);
stackLayout.Children.Add(classType);
Binding binding2 = new Binding("Key");
binding2.Converter = new GroupHeaderConverter();
binding2.ConverterParameter = 1;
Frame border = new Frame() { Padding = 0, WidthRequest = 75, HeightRequest = 50, Margin = 10, VerticalOptions = LayoutOptions.CenterAndExpand, HorizontalOptions = LayoutOptions.End };
StackLayout score = new StackLayout() { VerticalOptions = LayoutOptions.CenterAndExpand, HorizontalOptions = LayoutOptions.Center };
Label scoreLabel = new Label() { TextColor = Color.White, FontAttributes = FontAttributes.Bold, VerticalOptions = LayoutOptions.Center, VerticalTextAlignment = TextAlignment.Center };
scoreLabel.SetBinding(Label.TextProperty, binding2);
score.Children.Add(scoreLabel);
Binding binding3 = new Binding("Key");
binding3.Converter = new GroupHeaderConverter();
binding3.ConverterParameter = 2;
border.SetBinding(BackgroundColorProperty, binding3);
border.Content = score;
MainGrid.Children.Add(stackLayout);
Grid.SetColumn(stackLayout, 0);
Grid.SetColumnSpan(stackLayout, 2);
MainGrid.Children.Add(border);
Grid.SetColumn(border, 2);
return MainGrid;
});
}
This is the ListView
s ItemTemplate
private void SetItemTemplate()
{
listView.ItemTemplate = new DataTemplate(() => {
SfEffectsView effectsView = new SfEffectsView();
effectsView.TouchDownEffects = SfEffects.Ripple;
effectsView.CornerRadius = new Thickness(25, 0);
var grid = new StackLayout() { VerticalOptions = LayoutOptions.Start };
grid.BackgroundColor = Xamarin.Forms.Color.FromRgba(0, 0, 0, 0.35);
SfListView embeddedView = new SfListView() { VerticalOptions = LayoutOptions.Start };
embeddedView.AutoFitMode = AutoFitMode.Height;
embeddedView.LayoutManager = new GridLayout();
embeddedView.SelectionMode = Syncfusion.ListView.XForms.SelectionMode.None;
embeddedView.LayoutManager.SetBinding(GridLayout.SpanCountProperty, new Binding("NoOfCat"));
embeddedView.SetBinding(SfListView.ItemsSourceProperty, new Binding("CatInfoSet"));
embeddedView.ItemTemplate = new DataTemplate(() => {
var MainGrid = new StackLayout() { VerticalOptions = LayoutOptions.Start };
SfCircularProgressBar circularProgressBar = new SfCircularProgressBar() { VerticalOptions = LayoutOptions.End, HorizontalOptions = LayoutOptions.Center };
circularProgressBar.SetBinding(ProgressBarBase.ProgressProperty, new Binding("Percent"));
circularProgressBar.AnimationDuration = 0;
circularProgressBar.IndicatorOuterRadius = 0.7;
circularProgressBar.IndicatorInnerRadius = 0.6;
Binding bind = new Binding("Percent");
bind.Converter = new ColorGradientConverter();
circularProgressBar.SetBinding(ProgressBarBase.ProgressColorProperty, bind);
Grid content = new Grid();
content.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });
Label score = new Label() { FontAttributes = FontAttributes.Bold, TextColor = Color.White };
score.BindingContext = circularProgressBar;
Binding scoreBinding = new Binding();
scoreBinding.Path = "Progress";
scoreBinding.StringFormat = "{0}%";
score.SetBinding(Label.TextProperty, scoreBinding);
score.HorizontalTextAlignment = TextAlignment.Center;
score.VerticalOptions = LayoutOptions.Center;
score.TextColor = Color.White;
score.FontSize = 14;
content.Children.Add(score);
circularProgressBar.Content = content;
Label label = new Label() { HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Start, FontAttributes = FontAttributes.Bold, FontSize = 14, TextColor = Color.White };
label.SetBinding(Label.TextProperty, new Binding("Description"));
MainGrid.Children.Add(circularProgressBar);
MainGrid.Children.Add(label);
return MainGrid;
});
grid.Children.Add(embeddedView);
Label l = new Label() { FontAttributes = FontAttributes.Bold, VerticalOptions = LayoutOptions.End, FontSize = 13, TextColor = Color.White, Margin = new Thickness(5, 0, 0, 0) };
l.SetBinding(Label.TextProperty, new Binding("TeachersName"));
grid.Children.Add(l);
Label l2 = new Label() { FontAttributes = FontAttributes.Italic, VerticalOptions = LayoutOptions.Center, FontSize = 12, TextColor = Color.White, Margin = new Thickness(5, 0, 0, 5) };
Binding periodB = new Binding("Period");
periodB.StringFormat = "Period {0}";
l2.SetBinding(Label.TextProperty, periodB);
grid.Children.Add(l2);
effectsView.Content = grid;
return effectsView;
});
}
Just a feeling:
In your SetListViewDataAsync()
method you set:
listView.GroupHeaderSize = 80;
but on the other hand, when you set the value for listView.GroupHeaderTemplate
you declare:
var MainGrid = new Grid()
{
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.FillAndExpand,
HeightRequest = 50
};
Which means you are telling the ListView
that the GroupHeaderSize
should be set a value of 80
, and next you are telling the GroupeHeaderTemplate
that it should be sized to 50
, and the view to be vertically centered.
Not sure, but it might be that that extra space you are seeing is just those 80-50=30
units being set as 15
units on top and 15
at the button of your Group header.
If that is the case, there is a number of ways to solve the issue, one of them being simply changing GroupHeaderSize
from 80
to 50
, that is, changing your code like:
listView.GroupHeaderSize = 50;
Hope this helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.