c# - 删除 Xamarin.Forms 中 ListView GroupHeaders 之间不需要的间距

Question

我想删除 ListView 中组标题之间的间距。

我想摆脱那个空间，使我的UI 更紧凑。 我尝试了所有方法，从设置 Spacing=0、RowSpacing=0、ItemSpacing=0 等。真的不知道现在该怎么办。

这是 ListView GroupHeader 模板和 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;
    });

}

这是ListView的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;
    });
}

Answer 1

只是一种感觉:

在您设置的 SetListViewDataAsync() 方法中:

listView.GroupHeaderSize = 80;

但另一方面，当您为 listView.GroupHeaderTemplate 设置值时，您声明:

var MainGrid = new Grid() 
    { 
        VerticalOptions = LayoutOptions.Center, 
        HorizontalOptions = LayoutOptions.FillAndExpand, 
        HeightRequest = 50 
    };

这意味着您要告诉 ListView GroupHeaderSize 的值应该设置为 80，然后您要告诉 >GroupeHeaderTemplate 它的大小应为 50，并且 View 应垂直居中。

不确定，但您看到的额外空间可能只是那些 80-50=30 单位被设置为顶部的 15 单位和 15 在组标题的按钮处。

如果是这样的话，有很多方法可以解决这个问题，其中之一就是简单地将 GroupHeaderSize 从 80 更改为 50，也就是说，像这样更改您的代码:

listView.GroupHeaderSize = 50;

希望这对您有所帮助!