Xamarin - XAML 网格 UI 相互覆盖

Xamarin - XAML Grid UI overwriting on each other

我正在使用 Xamarin 中的网格创建一个 UI,我已将其放入 StackLayout。 以下是 xaml.

的以下代码

program.xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="LoginPage.Page">
    <ContentPage.Content>
        <StackLayout Orientation="Vertical">
            <StackLayout BackgroundColor="#3a4851">
                <Label Text="Identifications" TextColor="White" FontSize="15" Margin="10" />
            </StackLayout>
            <StackLayout>
                <Grid x:Name="identificationGridLayout" HorizontalOptions="Center"></Grid>
            </StackLayout>
            <StackLayout BackgroundColor="#3a4851">
                <Label Text="Deciles" TextColor="White" FontSize="15" Margin="10" />
            </StackLayout>
            <StackLayout>
                <Grid x:Name="decileGridLayout" HorizontalOptions="Center"></Grid>
            </StackLayout>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

我正在以编程方式创建网格 header 和数据。

program.cs

public partial class Page : ContentPage
{
    private LoadingPopUp popUp;
    private Repository repository = new Repository();
    private JObject jResult;
    private List<string> rowHeader;
    private List<PrescriberIdentitifcation> prescriberIdentificationValue;
    private List<PrescriberDecile> prescriberDecileValue;

    public Page() { InitializeComponent(); }

    public Page(string guid)
    {
        InitializeComponent();
        FetchDataForDetail(guid);
    }

    async void FetchDataForDetail(string guid)
    {
        try
        {
            popUp = new LoadingPopUp("Loading data ...");
            await PopupNavigation.PushAsync(popUp);
            //Get Identification Data for prescriber
            JObject identificationResult = await GetRepositoryDetailData(guid);

            var identificationdata = JsonConvert.DeserializeObject<PrescriberIdentificationList>(identificationResult.ToString());
            prescriberIdentificationValue = identificationdata.value;
            int index = 0;
            foreach (var obj in identificationResult["value"])
            {
                prescriberIdentificationValue[index].vcm_type_name = (string)obj["vcm_type@OData.Community.Display.V1.FormattedValue"];
                index++;
            }
            drawIdentificationGrid();

            //Get Deciles Data for prescriber
            JObject decileResult = await GetRepositoryDetailData(guid);
            var deciledata = JsonConvert.DeserializeObject<PrescriberIdentificationList>(decileResult.ToString());
            prescriberIdentificationValue = deciledata.value;
            Debug.WriteLine("data prescriberIdentificationValue : " + prescriberIdentificationValue);
            drawDecilesGrid();              
            await PopupNavigation.PopAllAsync();
        }
        catch (Exception ex) { 
            Debug.WriteLine("error in identification loading : " + ex.Message);
            await PopupNavigation.PopAllAsync();
        }

    }

    public async Task<JObject> GetRepositoryDetailData(string guid, string entity, string filter) 
    { 
        try
        {
            jResult = await repository.Retrieve(GlobalVariables.AuthToken, entity, filter + guid);
            return jResult;
        }
        catch (Exception err)
        {
            Debug.WriteLine(err.Message);
            await PopupNavigation.PopAllAsync();
            await DisplayAlert("Error", "Oops something went wrong", "Ok");
        }
        return jResult;
    }

    void drawIdentificationGrid()
    {
        try
        {
            rowHeader = new List<string>{"Type", "Number", "License State", "Sampleability","Expiration Date","License Status" };
            drawGridHeader(identificationGridLayout,1, rowHeader.Count,rowHeader);

            for (int rowIndex = 1; rowIndex <= prescriberIdentificationValue.Count; rowIndex++)
            {
              var datatypeLabel = new Label { Text = prescriberIdentificationValue[rowIndex-1].vcm_type_name.ToString(),FontSize=12, VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Center };
              var datanumberLabel = new Label { Text = prescriberIdentificationValue[rowIndex-1].vcm_name.ToString(),FontSize=12, VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Center };
              var datalicenseStateLabel = new Label { Text = (prescriberIdentificationValue[rowIndex-1]._vcm_licensestate_value != null) ? prescriberIdentificationValue[rowIndex-1]._vcm_licensestate_value : "-" , FontSize=12, VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Center };
              var datasampleabiltiyLabel = new Label { Text = (prescriberIdentificationValue[rowIndex - 1].vcm_sampleability == false) ? "No": "Yes", FontSize=12, VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Center };
              var dataexpirationDateLabel = new Label { Text = (prescriberIdentificationValue[rowIndex-1].vcm_expirationdate != null) ? prescriberIdentificationValue[rowIndex-1].vcm_expirationdate : "-", FontSize=12, VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Center };
              Debug.WriteLine("data datatypeLabel {0} datanumberLabel {1} datalicenseStateLabel {2} datasampleabiltiyLabel {3} dataexpirationDateLabel {4} rowIndex {5}",datatypeLabel.Text,datanumberLabel.Text,datalicenseStateLabel.Text, datasampleabiltiyLabel.Text, dataexpirationDateLabel.Text, rowIndex);

              identificationGridLayout.Children.Add(datatypeLabel, 0, rowIndex);
              identificationGridLayout.Children.Add(datanumberLabel, 1, rowIndex);
              identificationGridLayout.Children.Add(datalicenseStateLabel, 2, rowIndex);
              identificationGridLayout.Children.Add(datasampleabiltiyLabel, 3, rowIndex);      
              identificationGridLayout.Children.Add(dataexpirationDateLabel, 4, rowIndex);

            }

        }
        catch (Exception ex) { Debug.WriteLine("Error in drawing Identifications: "+ ex.Message);}

    }

    void drawDecilesGrid()
    {
        try
        {
            rowHeader = new List<string>{"Quarter", "Decile Type", "Decile", "Rank","Organization Type" };
               drawGridHeader(decileGridLayout,1, rowHeader.Count, rowHeader);

            //for (int rowIndex = 1; rowIndex <= prescriberIdentificationValue.Count; rowIndex++)
            //{
            //  var datatypeLabel = new Label { Text = prescriberIdentificationValue[rowIndex - 1].vcm_type_name.ToString(), FontSize = 12, VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Center };
            //  var datanumberLabel = new Label { Text = prescriberIdentificationValue[rowIndex - 1].vcm_name.ToString(), FontSize = 12, VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Center };
            //  var datalicenseStateLabel = new Label { Text = (prescriberIdentificationValue[rowIndex - 1]._vcm_licensestate_value != null) ? prescriberIdentificationValue[rowIndex - 1]._vcm_licensestate_value : "-", FontSize = 12, VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Center };
            //  var datasampleabiltiyLabel = new Label { Text = (prescriberIdentificationValue[rowIndex - 1].vcm_sampleability == false) ? "No" : "Yes", FontSize = 12, VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Center };
            //  var dataexpirationDateLabel = new Label { Text = (prescriberIdentificationValue[rowIndex - 1].vcm_expirationdate != null) ? prescriberIdentificationValue[rowIndex - 1].vcm_expirationdate : "-", FontSize = 12, VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Center };
            //  Debug.WriteLine("data datatypeLabel {0} datanumberLabel {1} datalicenseStateLabel {2} datasampleabiltiyLabel {3} dataexpirationDateLabel {4} rowIndex {5}",datatypeLabel.Text,datanumberLabel.Text,datalicenseStateLabel.Text, datasampleabiltiyLabel.Text, dataexpirationDateLabel.Text, rowIndex);
            //  identificationGridLayout.Children.Add(datatypeLabel, 0, rowIndex);
            //  identificationGridLayout.Children.Add(datanumberLabel, 1, rowIndex);
            //  identificationGridLayout.Children.Add(datalicenseStateLabel, 2, rowIndex);
            //  identificationGridLayout.Children.Add(datasampleabiltiyLabel, 3, rowIndex);
            //  identificationGridLayout.Children.Add(dataexpirationDateLabel, 4, rowIndex);

            //}

        }
        catch (Exception ex) { Debug.WriteLine("Error in drawing Identifications: "+ ex.Message);}
    }

    void drawGridHeader(Grid gridLayout, int rowIndexLength, int columnIndexLength, List<string> rowHeaders)
    {
        try
        {
            gridLayout.RowDefinitions = new RowDefinitionCollection();
            gridLayout.ColumnDefinitions = new ColumnDefinitionCollection();

            for (int rowIndex = 0; rowIndex < rowIndexLength; rowIndex++)
            {
                gridLayout.RowDefinitions.Add(new RowDefinition());
            }
            for (int columnIndex = 0; columnIndex <= columnIndexLength; columnIndex++)
            {
                gridLayout.ColumnDefinitions.Add(new ColumnDefinition());
            }

            for (int i = 0; i < columnIndexLength; i++)
            {
                var label = new Label { Text = rowHeaders[i], FontSize = 14, VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Center };
                identificationGridLayout.Children.Add(label, i, 0);
            }

        }
        catch (Exception ex) { Debug.WriteLine("Error in drawing grid header: "+ ex.Message);}
    }
}

}

drawGridHeader() is common to creating Header for different grids. Data for the cell is passed in different functions and grid reference is passed to it.

例如:-

rowHeader = new List<string>{"Quarter", "Decile Type", "Decile", "Rank","Organization Type" };
drawGridHeader(decileGridLayout,1, rowHeader.Count, rowHeader);

但是在获取数据后,网格正在相互覆盖。

我尝试用行项目创建手动网格,它们按顺序正确堆叠,但是当以编程方式执行时,网格相互堆叠。

它应该低于 Label Decile。

drawGridHeader() 的最后一个 for 循环中,您在添加标签时没有引用传入的网格:

for (int i = 0; i < columnIndexLength; i++)
{
    var label = new Label { Text = rowHeaders[i], FontSize = 14, VerticalOptions = LayoutOptions.Center, HorizontalOptions = LayoutOptions.Center };
    // This references the wrong Grid
    // identificationGridLayout.Children.Add(label, i, 0);
    gridLayout.Children.Add(label, i, 0);
}