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);
}
我正在使用 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);
}