请您推荐一些示例代码来创建框架线,如图所示。正如您在图像中看到的那样,例如对于第一行,M应该在一个帧中,而该行中的所有其他3个项应该在另一行中。
下面请看我的代码,感谢任何帮助。
<?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="XYZclass.Views.Exams.ExamsPage"
Title="{Binding PageTitle}">
<StackLayout VerticalOptions="FillAndExpand">
<Image Source="XYZclassHeader.png" Aspect="AspectFit" />
<Grid BackgroundColor="#0075c1">
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="1" Text="" TextColor="White" HorizontalOptions="Center"/>
<Label Grid.Row="0" Grid.Column="2" Text="Type:" TextColor="White" HorizontalOptions="Center"/>
<Label Grid.Row="0" Grid.Column="3" Text="Created:" TextColor="White" HorizontalOptions="Center"/>
<Label Grid.Row="0" Grid.Column="4" Text="Finished:" TextColor="White" HorizontalOptions="Center"/>
</Grid>
<ListView Grid.Row="1" Grid.Column="0" ItemsSource="{Binding Exams}" HorizontalOptions="Center">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Frame OutlineColor="Accent" Grid.Row="0" Grid.Column="1" HorizontalOptions="Center">
<Frame.Content>
<Label Text="{Binding DisplayName}" />
</Frame.Content>
</Frame>
<Label Grid.Row="0" Grid.Column="2" Text="{Binding Type}" HorizontalOptions="Center"/>
<Label Grid.Row="0" Grid.Column="3" Text="{Binding CreationDate}" HorizontalOptions="Center"/>
<Label Grid.Row="0" Grid.Column="4" Text="{Binding CompletionDateInfo}" HorizontalOptions="Center"/>
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackLayout BackgroundColor="#0075c1" VerticalOptions="FillAndExpand">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding DeleteSelectedExamsCommand}"/>
</StackLayout.GestureRecognizers>
<Label Text="Delete Selected(3) "
TextColor="White" />
<Label Text=""
TextColor="White"
FontSize="Large" />
</StackLayout>
<StackLayout BackgroundColor="#0075c1" VerticalOptions="FillAndExpand">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding CreateNewExamCommand}"/>
</StackLayout.GestureRecognizers>
<Label Text="Create New Exam "
TextColor="White"/>
<Label Text=""
TextColor="White"
FontSize="Large"
FontFamily="FontAwesome"/>
<!--Note about FontAwesome for iOS: The FontFamily reference is for iOS. On android it will be ignored-->
</StackLayout>
</StackLayout>
</ContentPage>
答案 0 :(得分:1)
首先,网格列索引从&#39; 0开始(即,如果你有4列,它们的索引将是[0,1,2,3])。
回到问题:
你的方法看起来很奇怪:你将4个元素放在4个网格单元格中,而且这些元素中有3个必须放在公共边界内。您可以尝试将此3个元素放在另一个容器中(例如,在堆栈布局中),然后向此容器添加边框。帧类本身很差,but here is some workaround使用自定义渲染器。
因此,listview单元格可能如下所示:
<StackLayout Orientation="Horizontal">
<local:FrameWithBorder>
<Label Text="{Binding DisplayName}" />
</local:FrameWithBorder>
<local:FrameWithBorder HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal">
<Label Text="{Binding Type}" />
<Label Text="{Binding CreationDate}" />
<Label Text="{Binding CompletionDateInfo}" />
</StackLayout>
</local:FrameWithBorder>
</StackLayout>
PS&GT;我在Xamarin方面经验不足,因此,我们将非常感谢任何建议和更正。
答案 1 :(得分:1)
感谢您的回答,但这是我实现了它,我主要使用网格控件,我在这里分享它,以防您需要类似的屏幕:
<?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="XYZclass.Views.Exams.ExamsPage"
BackgroundColor="White"
xmlns:controls="clr-namespace:XYZclass.Controls">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness"
iOS="10, 20, 10, 10"
Android="0,0,0,10"/>
</ContentPage.Padding>
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="LabelStyle" TargetType="Label">
<Setter Property="TextColor" Value="White"/>
<Setter Property="Font" Value="Medium"/>
<Setter Property="VerticalOptions" Value="Center"/>
<Setter Property="HorizontalOptions" Value="Center"/>
</Style>
<Style x:Key="LabelStyleSmall" TargetType="Label">
<Setter Property="TextColor" Value="#41a4dc"/>
<Setter Property="Font" Value="Small"/>
<Setter Property="VerticalOptions" Value="Center"/>
<Setter Property="HorizontalOptions" Value="Center"/>
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="10*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<controls:Navigation/>
</Grid>
<Grid RowSpacing="0" Grid.Row="1" Padding="10,10,10,0">
<Grid.RowDefinitions>
<RowDefinition Height="145*" />
<RowDefinition Height="415*" />
<RowDefinition Height="2*" />
<RowDefinition Height="88*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" RowSpacing="10" BackgroundColor="#ed004a">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" BackgroundColor="#ed004a" Padding="30,0,0,0">
<Label Text="Your personal exam history information"
Style="{StaticResource LabelStyle}"
HorizontalOptions="StartAndExpand"/>
</Grid>
<Grid Grid.Row="1"
BackgroundColor="#0075c1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
Text=""
Style="{StaticResource LabelStyle}"/>
<Label Grid.Column="1"
Text="Type:"
Style="{StaticResource LabelStyle}"/>
<Label Grid.Column="2"
Text="Created:"
Style="{StaticResource LabelStyle}"/>
<Label Grid.Column="3"
Text="Finished:"
Style="{StaticResource LabelStyle}"/>
</Grid>
</Grid>
<ScrollView Grid.Row="1">
<ListView x:Name="ExamList"
ItemsSource="{Binding Exams}"
HorizontalOptions="Center"
RowHeight="70">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="4*"/>
</Grid.ColumnDefinitions>
<Frame OutlineColor="#ed004a" Grid.Column="0">
<Frame.Content>
<Label Text="{Binding Name}"
Font="Large"
Style="{StaticResource LabelStyle}"
TextColor="#ed004a"
FontAttributes="Bold"/>
</Frame.Content>
</Frame>
<Frame OutlineColor="#ed004a" Grid.Column="1">
<Frame.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
Text="{Binding Type}"
Style="{StaticResource LabelStyleSmall}"/>
<Label Grid.Column="1"
Text="{Binding StartDateText}"
Style="{StaticResource LabelStyleSmall}"/>
<Label Grid.Column="2"
Text="{Binding FinishedDateText}"
Style="{StaticResource LabelStyleSmall}"/>
</Grid>
</Frame.Content>
</Frame>
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollView>
<BoxView Grid.Row="2" Color="#0075c1" WidthRequest="100" HeightRequest="2"/>
<Grid Grid.Row="3">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="40*" />
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0"
BackgroundColor="{Binding DeleteButtonBackgroundColor}"
Padding="30,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
x:Name="LabelDeleteSelectedExamsPartOne"
Text="{Binding DeleteButtonText}"
Style="{StaticResource LabelStyle}"/>
<Label Grid.Column="1"
x:Name="LabelDeleteSelectedExamsPartTwo"
Text=""
Style="{StaticResource LabelStyle}"
Font="Large"/>
<Grid.GestureRecognizers IsEnabled="{Binding DeleteButtonIsEnabled}">
<TapGestureRecognizer
Command="{Binding DeleteSelectedExamsCommand}"/>
</Grid.GestureRecognizers>
</Grid>
<Grid Grid.Column="2"
BackgroundColor="#0075c1"
Padding="30,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
x:Name="LabelCreateNewExamPartOne"
Text="Create New Exam "
Style="{StaticResource LabelStyle}"/>
<Label Grid.Column="1"
x:Name="LabelCreateNewExamPartTwo"
Text=""
Style="{StaticResource LabelStyle}"
Font="Large"/>
<Grid.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding CreateNewExamCommand}"/>
</Grid.GestureRecognizers>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</ContentPage>
答案 2 :(得分:1)
请忽略我之前的回答,这是对我自己的问题的一个更好的答案:我已经改进了我的代码,现在我在后面的代码中动态创建项目,如果你需要类似的屏幕,请使用以下代码:< / p>
请注意我正在创建&#34; GridExams&#34;动态地在后面的代码中:
<?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="XYZProject.Views.Exams.ExamsPage"
BackgroundColor="White"
xmlns:controls="clr-namespace:XYZProject.Controls">
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness"
iOS="10, 20, 10, 10"
Android="0,0,0,0"/>
</ContentPage.Padding>
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="LabelStyle" TargetType="Label">
<Setter Property="TextColor" Value="White"/>
<Setter Property="Font" Value="Medium"/>
<Setter Property="VerticalOptions" Value="Center"/>
<Setter Property="HorizontalOptions" Value="Center"/>
</Style>
<Style x:Key="LabelStyleSmall" TargetType="Label">
<Setter Property="TextColor" Value="#41a4dc"/>
<Setter Property="Font" Value="Small"/>
<Setter Property="VerticalOptions" Value="Center"/>
<Setter Property="HorizontalOptions" Value="Center"/>
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="10*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<controls:Navigation/>
</Grid>
<Grid RowSpacing="0" Grid.Row="1" Padding="10,10,10,0">
<Grid.RowDefinitions>
<RowDefinition Height="145*" />
<RowDefinition Height="415*" />
<RowDefinition Height="2*" />
<RowDefinition Height="88*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" RowSpacing="10" BackgroundColor="#ed004a">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" BackgroundColor="#ed004a" Padding="30,0,0,0">
<Label Text="Your personal exam history information"
Style="{StaticResource LabelStyle}"
HorizontalOptions="StartAndExpand"/>
</Grid>
<Grid Grid.Row="1"
BackgroundColor="#0075c1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
Text=""
Style="{StaticResource LabelStyle}"/>
<Label Grid.Column="1"
Text="Type:"
Style="{StaticResource LabelStyle}"/>
<Label Grid.Column="2"
Text="Created:"
Style="{StaticResource LabelStyle}"/>
<Label Grid.Column="3"
Text="Finished:"
Style="{StaticResource LabelStyle}"/>
</Grid>
</Grid>
<Grid Grid.Row="1">
<ScrollView>
<Grid x:Name="GridExams">
</Grid>
</ScrollView>
</Grid>
<BoxView Grid.Row="2" Color="#0075c1" WidthRequest="100" HeightRequest="2"/>
<Grid Grid.Row="3" Padding="0,0,0,10">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="40*" />
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0"
BackgroundColor="{Binding DeleteButtonBackgroundColor}"
Padding="30,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
x:Name="LabelDeleteSelectedExamsPartOne"
Text="{Binding DeleteButtonText}"
Style="{StaticResource LabelStyle}"/>
<Label Grid.Column="1"
x:Name="LabelDeleteSelectedExamsPartTwo"
Text=""
Style="{StaticResource LabelStyle}"
Font="Large"/>
<Grid.GestureRecognizers IsEnabled="{Binding DeleteButtonIsEnabled}">
<TapGestureRecognizer
Command="{Binding DeleteSelectedExamsCommand}"/>
</Grid.GestureRecognizers>
</Grid>
<Grid Grid.Column="2"
BackgroundColor="#0075c1"
Padding="30,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
x:Name="LabelCreateNewExamPartOne"
Text="Create New Exam "
Style="{StaticResource LabelStyle}"/>
<Label Grid.Column="1"
x:Name="LabelCreateNewExamPartTwo"
Text=""
Style="{StaticResource LabelStyle}"
Font="Large"/>
<Grid.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding CreateNewExamCommand}"/>
</Grid.GestureRecognizers>
</Grid>
</Grid>
</Grid>
</Grid>
<Grid Grid.Row="1"
IsVisible="{Binding IsLoading}"
BackgroundColor="Black"
Opacity="0.25">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<ActivityIndicator Grid.Row="0"
IsVisible="{Binding IsLoading}"
IsRunning="{Binding IsLoading}"
VerticalOptions="End"
HorizontalOptions="Center"/>
<Label Grid.Row="1"
Text="Please wait..."
TextColor="White"
VerticalOptions="Start"
HorizontalOptions="Center"/>
</Grid>
</Grid>
</ContentPage>
动态创建网格的方法详细信息:
private void CrateExamsGridDynamically()
{
GridExams.RowDefinitions = new RowDefinitionCollection();
GridExams.BackgroundColor = Color.White;
GridExams.Padding = new Thickness(0, 5, 0, 5);
Grid childContainer = new Grid();
childContainer.HorizontalOptions = LayoutOptions.CenterAndExpand;
childContainer.VerticalOptions = LayoutOptions.CenterAndExpand;
childContainer.BackgroundColor = Color.White;
childContainer.RowDefinitions = new RowDefinitionCollection();
childContainer.ColumnDefinitions = new ColumnDefinitionCollection()
{
new ColumnDefinition
{
Width =new GridLength(1, GridUnitType.Star)
},
new ColumnDefinition
{
Width=new GridLength(4, GridUnitType.Star)
}
};
GridExams.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
List<Exam> exams = App.ExamService.GetExams();
int top = 0;
foreach (var exam in exams)
{
childContainer.RowDefinitions.Add(new RowDefinition
{
Height = new GridLength(60, GridUnitType.Absolute)
});
exam.StartDateText = exam.StartDate.HasValue ? exam.StartDate.Value.ToString("dd/MM/yy") : string.Empty;
exam.FinishedDateText = exam.FinishedDate.HasValue ? exam.FinishedDate.Value.ToString("dd/MM/yy") : "In Progress >";
string examType = string.Empty;
switch (exam.Type)
{
case ExamTypes.Undefined:
break;
case ExamTypes.Part1:
examType = "Part 1";
break;
case ExamTypes.Part2:
examType = "Part 2";
break;
case ExamTypes.Both:
break;
default:
break;
}
#region [ Left Grandchild Container ]
Grid grandChildContainerLeft = new Grid();
grandChildContainerLeft.BackgroundColor = Constants.CustomColour.RcpPurple;
grandChildContainerLeft.Padding = new Thickness(1, 1, 1, 1);
#region [ Left Great Grandchild Container ]
Grid greatGrandChildContainerLeft = new Grid();
// TapGestureRecognizer for Left Container
var grandChildContainerLeftTapGestureRecognizer = new TapGestureRecognizer();
grandChildContainerLeftTapGestureRecognizer.Tapped += GrandChildContainerLeftTapGestureRecognizer_Tapped;
greatGrandChildContainerLeft.GestureRecognizers.Add(grandChildContainerLeftTapGestureRecognizer);
greatGrandChildContainerLeft.BackgroundColor = Color.White;
greatGrandChildContainerLeft.Children.Add(new Label
{
Text = exam.Name,
TextColor = Constants.CustomColour.RcpPurple,
FontAttributes = FontAttributes.Bold,
BackgroundColor = Color.White,
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.CenterAndExpand
}, 0, 0);
// This is to carry exam id
greatGrandChildContainerLeft.Children.Add(new Label
{
Text = exam.Id.ToString(),
IsVisible = false
}, 0, 0);
#endregion
grandChildContainerLeft.Children.Add(greatGrandChildContainerLeft, 0, 0);
#endregion
#region [ Right Grandchild Container ]
Grid grandChildContainerRight = new Grid();
grandChildContainerRight.BackgroundColor = Constants.CustomColour.RcpBlue;
grandChildContainerRight.Padding = new Thickness(1, 1, 1, 1);
#region [ Right Great Grandchild Container ]
Grid greatGrandChildContainerRight = new Grid();
// TapGestureRecognizer for Right Container
var grandChildContainerRightTapGestureRecognizer = new TapGestureRecognizer();
grandChildContainerRightTapGestureRecognizer.Tapped += GrandChildContainerRightTapGestureRecognizer_Tapped;
greatGrandChildContainerRight.GestureRecognizers.Add(grandChildContainerRightTapGestureRecognizer);
greatGrandChildContainerRight.BackgroundColor = Color.White;
// We need three columns for each child grid
greatGrandChildContainerRight.ColumnDefinitions = new ColumnDefinitionCollection()
{
new ColumnDefinition
{
Width =new GridLength(1, GridUnitType.Star)
},
new ColumnDefinition
{
Width=new GridLength(1, GridUnitType.Star)
},
new ColumnDefinition
{
Width=new GridLength(2, GridUnitType.Star)
}
};
// This is for type
greatGrandChildContainerRight.Children.Add(new Label
{
Text = examType,
TextColor = Constants.CustomColour.RcpBlue,
BackgroundColor = Color.White,
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.CenterAndExpand,
}, 0, 0); // Exam type: the first column
// This is to carry exam id
greatGrandChildContainerRight.Children.Add(new Label
{
Text = exam.Id.ToString(),
IsVisible = false
}, 0, 0);
// This is for created date
greatGrandChildContainerRight.Children.Add(new Label
{
Text = exam.StartDateText,
TextColor = Constants.CustomColour.RcpBlue,
BackgroundColor = Color.White,
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.CenterAndExpand,
}, 1, 0); // Created: the second column
// This is for finished date
greatGrandChildContainerRight.Children.Add(new Label
{
Text = exam.FinishedDateText,
TextColor = Constants.CustomColour.RcpBlue,
BackgroundColor = Color.White,
HorizontalOptions = LayoutOptions.CenterAndExpand,
VerticalOptions = LayoutOptions.CenterAndExpand,
}, 2, 0); // Finished: the third column
#endregion
grandChildContainerRight.Children.Add(greatGrandChildContainerRight, 0, 0);
#endregion
childContainer.Children.Add(grandChildContainerLeft, 0, top); // First Column for grandChildContainerLeft
childContainer.Children.Add(grandChildContainerRight, 1, top); // Second Column for grandChildContainerRight
top++;
}
GridExams.Children.Add(childContainer, 0, 0);
}