2020年1月4日 12:20:47go评论82阅读模式

英文:

Remove unwanted spacing between ListView GroupHeaders in Xamarin.Forms

问题

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

[![ListView的图像][1]][1]

我想要去掉这个间隙，使我的UI更加紧凑。我尝试了一切，从设置 Spacing=0、RowSpacing=0、ItemSpacing=0 等等。真的不知道现在该怎么办。

这是ListView的GroupHeader模板以及一些其他设置

private void SetListViewDataAsync()
{
    string PageTerm = GradesPage.PageTermGlobal;
    List&lt;Data&gt; ItemSourceData = Globals.Dataset.FindAll(item =&gt; 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 = &quot;CourseName&quot;,
        KeySelector = (object obj1) =&gt;
        {
            var item = (obj1 as Data);
            return item;
        }
    });
    listView.GroupHeaderTemplate = new DataTemplate(() =&gt;
    {
        /*
        * 移除邮件文本，将名称更改为邮件链接：
        * 移除垂直间距。
        * 
        */

        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(&quot;Key&quot;);
        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(&quot;Key&quot;);
        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(&quot;Key&quot;);
        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(&quot;Key&quot;);
        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(() =&gt; {


        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(&quot;NoOfCat&quot;));
        embeddedView.SetBinding(SfListView.ItemsSourceProperty, new Binding(&quot;CatInfoSet&quot;));
        embeddedView.ItemTemplate = new DataTemplate(() =&gt; {
            var MainGrid = new StackLayout() { VerticalOptions = LayoutOptions.Start };

            SfCircularProgressBar circularProgressBar = new SfCircularProgressBar() { VerticalOptions = LayoutOptions.End, HorizontalOptions = LayoutOptions.Center };
            circularProgressBar.SetBinding(ProgressBarBase.ProgressProperty, new Binding(&quot;Percent&quot;));
            circularProgressBar.AnimationDuration = 0;
            circularProgressBar.IndicatorOuterRadius = 0.7;
            circularProgressBar.IndicatorInnerRadius = 0.6;

            Binding bind = new Binding(&quot;Percent&quot;);
            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 = &quot;Progress&quot;;
            scoreBinding.StringFormat = &quot;{0}%&quot;;
            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 = Layout

<details>
<summary>英文:</summary>

I want to remove the spacing between the group headers in the `ListView`.

[![Image of ListView][1]][1]


  [1]: https://i.stack.imgur.com/uhkFv.png

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&#39;t know what to do now.

This is the list view `GroupHeader` template and some other settings for the `ListView`
```c#
private void SetListViewDataAsync()
{
    string PageTerm = GradesPage.PageTermGlobal;
    List&lt;Data&gt; ItemSourceData = Globals.Dataset.FindAll(item =&gt; 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 = &quot;CourseName&quot;,
        KeySelector = (object obj1) =&gt;
        {
            var item = (obj1 as Data);
            return item;
        }
    });
    listView.GroupHeaderTemplate = new DataTemplate(() =&gt;
    {
        /*
        * 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(&quot;Key&quot;);
        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(&quot;Key&quot;);
        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(&quot;Key&quot;);
        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(&quot;Key&quot;);
        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 ListViews ItemTemplate

private void SetItemTemplate()
{
listView.ItemTemplate = new DataTemplate(() =&gt; {
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(&quot;NoOfCat&quot;));
embeddedView.SetBinding(SfListView.ItemsSourceProperty, new Binding(&quot;CatInfoSet&quot;));
embeddedView.ItemTemplate = new DataTemplate(() =&gt; {
var MainGrid = new StackLayout() { VerticalOptions = LayoutOptions.Start };
SfCircularProgressBar circularProgressBar = new SfCircularProgressBar() { VerticalOptions = LayoutOptions.End, HorizontalOptions = LayoutOptions.Center };
circularProgressBar.SetBinding(ProgressBarBase.ProgressProperty, new Binding(&quot;Percent&quot;));
circularProgressBar.AnimationDuration = 0;
circularProgressBar.IndicatorOuterRadius = 0.7;
circularProgressBar.IndicatorInnerRadius = 0.6;
Binding bind = new Binding(&quot;Percent&quot;);
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 = &quot;Progress&quot;;
scoreBinding.StringFormat = &quot;{0}%&quot;;
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(&quot;Description&quot;));
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(&quot;TeachersName&quot;));
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(&quot;Period&quot;);
periodB.StringFormat = &quot;Period {0}&quot;;
l2.SetBinding(Label.TextProperty, periodB);
grid.Children.Add(l2);
effectsView.Content = grid;
return effectsView;
});
}

答案1

得分: 1

在你的 SetListViewDataAsync() 方法中，你设置了：

listView.GroupHeaderSize = 80;

但另一方面，当你为 listView.GroupHeaderTemplate 设置值时，你声明了：

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

这意味着你告诉 ListView 的 GroupHeaderSize 应该设置为 80，然后你告诉 GroupHeaderTemplate 它应该设置为 50，并且视图垂直居中显示。

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

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

listView.GroupHeaderSize = 50;

希望这有所帮助！

英文:

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!

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

在Xamarin.Forms中移除ListView GroupHeaders之间不需要的空格。

问题

答案1

如何获取总元素标签？

Java在从Room数据库查询用户时出现空指针异常

我如何修复我的colors.xml文件中的错误？

Android RecyclerView Java

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论