Xaml ListView 以编程方式 C# 导致奇怪的行为

Question

我需要以编程方式添加一个动态变化的列表视图......但我遇到了一个非常奇怪的布局。我觉得我忽略了一些东西。我需要每一行分别显示射手姓名、球队名称和他们的分数。签出代码。对此进行了编辑，以使其更易于阅读和理解。即使只有一个射击者名字的标签，它也有奇怪的 UI 问题。

    private Grid grid = new Grid() { BackgroundColor = Color.White };
    private BoxView boxview = new BoxView() { BackgroundColor = Color.LightGray };
    private Grid grid2 = new Grid() { BackgroundColor = Color.White, Margin = new Thickness(0, 0, 0, 1), Padding = new Thickness(0, 10, 0, 0) };




        var shooterlabel = new Label() { HorizontalTextAlignment = TextAlignment.Start, Padding = PaddingLeft };
        shooterlabel.SetBinding(Label.TextProperty, new Binding("Shooter_Name"));  

        grid2.Children.Add(shooterlabel, 0, 0);

        //grid.Children.Add(boxview);
        grid.Children.Add(grid2);

        ListView ShooterListView = new ListView() { BackgroundColor = Color.White, SeparatorVisibility = SeparatorVisibility.None, HasUnevenRows = true, VerticalScrollBarVisibility = ScrollBarVisibility.Always };

        var ShooterDataTemplate = new DataTemplate(() =>
        {
            return new ViewCell { View = grid };
        });

        var connect = new ConnectionQuery("Select * From Shooters");
        var list = await connect.GetShooters();
        ShooterListView.ItemsSource = list;

        ShooterListView.ItemTemplate = ShooterDataTemplate;
        ShooterGrid.Children.Add(ShooterListView);

        connect.CloseConnection();

下面是正在发生的事情的屏幕截图。它应该是每一行的名称。我只在 c# 中遇到这个问题，而不是在 xaml 中。不过，我必须让这个在代码后面工作......

weird ui picture

在下面附加 xaml，它确实适用于包含的图片。

 <StackLayout x:Name="Test">
            <Grid x:Name="ShooterGrid" >
                <ListView x:Name="ShooterListView" >
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <Grid>
                                    <Label Text="{Binding Shooter_Name}" />
                                </Grid>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
               </Grid>
        </StackLayout>

下面附上在 xaml 中正确的用户界面。

Normal Ui Image

Answer 1

您可以将 HasUnevenRows 设置为 true 以删除您不想要的空间。

完整代码：

public class Page1 : ContentPage
{
    public static ObservableCollection<Names> names { get; set; }
    public Page1()
    {
        ObservableCollection<Names> names = new ObservableCollection<Names>()
        {
             new Names(){ Shooter_Name="Brain Palmer"},
             new Names(){ Shooter_Name="John Hagee"},
             new Names(){ Shooter_Name="Anget Jones"},
             new Names(){ Shooter_Name="Ron Kelly"},
             new Names(){ Shooter_Name="Jay Knight"},
             new Names(){ Shooter_Name="Jamie Redferm"},
             new Names(){ Shooter_Name="John Randolf"},
             new Names(){ Shooter_Name="Johnny Reddings"},
             new Names(){ Shooter_Name="Johnny john"},
             new Names(){ Shooter_Name="James Dun"},
             new Names(){ Shooter_Name="James Green"},
             new Names(){ Shooter_Name="Sunny Perdue"},
             new Names(){ Shooter_Name="John Gree"},
             new Names(){ Shooter_Name="Jamoe Parrott"},
        };

        ListView ShooterListView = new ListView() { HasUnevenRows = true };
        ShooterListView.ItemsSource = names;
        ShooterListView.ItemTemplate = new DataTemplate(() =>
        {
            Grid grid = new Grid();


            Label NameLabel = new Label();

            NameLabel.SetBinding(Label.TextProperty, "Shooter_Name");

            grid.Children.Add(NameLabel);
            return new ViewCell { View = grid };
        });
        //DataTemplate dt = new DataTemplate(typeof(TextCell));
        //dt.SetBinding(TextCell.TextProperty, new Binding("Shooter_Name"));
        //ShooterListView.ItemTemplate= dt;


        Content = new StackLayout
        {

            Children = {
              ShooterListView
            }
        };

        this.BindingContext = this;
    }
}

public class Names
{
    public string Shooter_Name { get; set; }
}

之前：

之后：

Answer 2

我每次使用内联 DataTemplate 时都无法正常工作，UI 完全搞砸了 customviewcell 中使用的网格与我尝试在内联代码中设置的网格相同。

唯一的解决方案是为每个回合创建一个自定义视图单元。附上以下代码和一个自定义视图单元示例。

调用代码来设置布局：

public async Task<ListView> SetShooterListView(int Rounds)
        {

            var shooterlistview = new ListView() { HorizontalOptions = LayoutOptions.Fill };

            var headergrid = Rounds == 1 ? await Get_Round_1() : Rounds == 2 ? await Get_Round_2() : Rounds == 3 ? await Get_Round_3() : Rounds == 4 ? await Get_Round_4() : Rounds == 5 ? await Get_Round_5() : Rounds == 6 ? await Get_Round_6() : Rounds == 7 ? await Get_Round_7() : Rounds == 8 ? await Get_Round_8() : Rounds == 9 ? await Get_Round_9() : await Get_Round_10();

            var viewcellgrid = Rounds == 1 ? new DataTemplate(typeof(Round_1_View)) : Rounds == 2 ? new DataTemplate(typeof(Round_2_View)) : Rounds == 3 ? new DataTemplate(typeof(Round_3_View)) : Rounds == 4 ? new DataTemplate(typeof(Round_4_View)) : Rounds == 5 ? new DataTemplate(typeof(Round_5_View)) : Rounds == 6 ? new DataTemplate(typeof(Round_6_View)) : Rounds == 7 ? new DataTemplate(typeof(Round_7_View)) : Rounds == 8 ? new DataTemplate(typeof(Round_8_View)) : Rounds == 9 ? new DataTemplate(typeof(Round_9_View)) : new DataTemplate(typeof(Round_10_View));            


            shooterlistview.Header = headergrid;


            shooterlistview.ItemTemplate = viewcellgrid;
            return shooterlistview;
           

        }

自定义视图单元格示例：

    public class Round_7_View : ViewCell
    {
        private Thickness PaddingLeft;
        private Thickness PaddingRight;
        private Grid grid = new Grid() { BackgroundColor = Color.White };
        private BoxView boxview = new BoxView() { BackgroundColor = Color.LightGray };
        private Grid grid2 = new Grid() { BackgroundColor = Color.White, Margin = new Thickness(0, 0, 0, 1), Padding = new Thickness(0, 10, 0, 0) };

        public Round_7_View()
        {
            var column1 = new ColumnDefinition() { Width = new GridLength(15, GridUnitType.Star) };
            var column2 = new ColumnDefinition() { Width = new GridLength(15, GridUnitType.Star) };
            var column3 = new ColumnDefinition() { Width = new GridLength(10, GridUnitType.Star) };
            var column4 = new ColumnDefinition() { Width = new GridLength(10, GridUnitType.Star) };
            var column5 = new ColumnDefinition() { Width = new GridLength(10, GridUnitType.Star) };
            var column6 = new ColumnDefinition() { Width = new GridLength(10, GridUnitType.Star) };
            var column7 = new ColumnDefinition() { Width = new GridLength(10, GridUnitType.Star) };
            var column8 = new ColumnDefinition() { Width = new GridLength(10, GridUnitType.Star) };
            var column9 = new ColumnDefinition() { Width = new GridLength(10, GridUnitType.Star) };

            var smallfont = Device.GetNamedSize(NamedSize.Micro, typeof(Label));

            if (Device.Idiom == TargetIdiom.Tablet || Device.Idiom == TargetIdiom.Phone)
            {
                PaddingLeft = new Thickness(20, 0, 0, 0);
            }
            else
            {
                PaddingLeft = new Thickness(60, 0, 0, 0);
            }


            if (Device.Idiom == TargetIdiom.Tablet || Device.Idiom == TargetIdiom.Phone)
            {
                PaddingRight = new Thickness(0, 0, 20, 0);
            }
            else
            {
                PaddingRight = new Thickness(0, 0, 60, 0);
            }

            var shooterlabel = new Label() { HorizontalTextAlignment = TextAlignment.Start, FontSize = smallfont, Padding = PaddingLeft };
            shooterlabel.SetBinding(Label.TextProperty, new Binding("Shooter_Name"));
            var team_name_label = new Label() { HorizontalTextAlignment = TextAlignment.Center, FontSize = smallfont };
            team_name_label.SetBinding(Label.TextProperty, new Binding("Team_Name"));
            var round1_label = new Label() { HorizontalTextAlignment = TextAlignment.Center, FontSize = smallfont };
            round1_label.SetBinding(Label.TextProperty, new Binding("Round_1"));
            var round2_label = new Label() { HorizontalTextAlignment = TextAlignment.Center, FontSize = smallfont };
            round2_label.SetBinding(Label.TextProperty, new Binding("Round_2"));
            var round3_label = new Label() { HorizontalTextAlignment = TextAlignment.Center, FontSize = smallfont };
            round3_label.SetBinding(Label.TextProperty, new Binding("Round_3"));
            var round4_label = new Label() { HorizontalTextAlignment = TextAlignment.Center, FontSize = smallfont };
            round4_label.SetBinding(Label.TextProperty, new Binding("Round_4"));
            var round5_label = new Label() { HorizontalTextAlignment = TextAlignment.Center, FontSize = smallfont };
            round5_label.SetBinding(Label.TextProperty, new Binding("Round_5"));
            var round6_label = new Label() { HorizontalTextAlignment = TextAlignment.Center, FontSize = smallfont };
            round6_label.SetBinding(Label.TextProperty, new Binding("Round_6"));
            var round7_label = new Label() { HorizontalTextAlignment = TextAlignment.End, FontSize = smallfont, Padding = PaddingRight };
            round7_label.SetBinding(Label.TextProperty, new Binding("Round_7"));

            grid2.ColumnDefinitions.Add(column1);
            grid2.ColumnDefinitions.Add(column2);
            grid2.ColumnDefinitions.Add(column3);
            grid2.ColumnDefinitions.Add(column4);
            grid2.ColumnDefinitions.Add(column5);
            grid2.ColumnDefinitions.Add(column6);
            grid2.ColumnDefinitions.Add(column7);
            grid2.ColumnDefinitions.Add(column8);
            grid2.ColumnDefinitions.Add(column9);

            grid2.Children.Add(shooterlabel, 0, 0);
            grid2.Children.Add(team_name_label, 1, 0);
            grid2.Children.Add(round1_label, 2, 0);
            grid2.Children.Add(round2_label, 3, 0);
            grid2.Children.Add(round3_label, 4, 0);
            grid2.Children.Add(round4_label, 5, 0);
            grid2.Children.Add(round5_label, 6, 0);
            grid2.Children.Add(round6_label, 7, 0);
            grid2.Children.Add(round7_label, 8, 0);

            grid.Children.Add(boxview);
            grid.Children.Add(grid2);

            View = grid;
        }
    }