我正在代码中为我的代码编写代码 . 这是我的代码:
public class View1 : ContentView
{
public View1()
{
Content = new StackLayout
{
Children = {
new Label { Text = "CATEGORY 1", Margin = new Thickness(20, 0, 0, 10), TextColor = Color.Black, FontSize = 18, FontAttributes = FontAttributes.Bold }
}
};
BoxView piece_ofLine = new BoxView
{
HeightRequest = 1,
WidthRequest = 80,
Color = Color.FromHex("#E0E0E0")
};
var grid = new Grid();
grid.Margin = new Thickness(10, 0, 0, 0);
grid.Padding = 0;
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(30) });
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1) });
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(30) });
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1) });
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(30) });
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1) });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(40) });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
var image1 = new Image { Source = "food1" };
var label1 = new Label { Text = "Vendor Name 1" };
BoxView piece_ofLine1 = new BoxView
{
HeightRequest = 1,
WidthRequest = 80,
Color = Color.FromHex("#E0E0E0")
};
var image2 = new Image { Source = "food1" };
var label2 = new Label { Text = "Vendor Name 2" };
BoxView piece_ofLine2 = new BoxView
{
HeightRequest = 1,
WidthRequest = 80,
Color = Color.FromHex("#E0E0E0")
};
var image3 = new Image { Source = "food1" };
var label3 = new Label { Text = "Vendor Name 3" };
BoxView piece_ofLine3 = new BoxView
{
HeightRequest = 1,
WidthRequest = 80,
Color = Color.FromHex("#E0E0E0")
};
grid.Children.Add(image1, 0, 0);
grid.Children.Add(label1, 0, 1);
Grid.SetColumnSpan(piece_ofLine1, 2);
grid.Children.Add(piece_ofLine1, 1, 0);
grid.Children.Add(image2, 0, 0);
grid.Children.Add(label2, 0, 1);
Grid.SetColumnSpan(piece_ofLine2, 2);
grid.Children.Add(piece_ofLine2, 1, 0);
grid.Children.Add(image3, 0, 0);
grid.Children.Add(label3, 0, 1);
Grid.SetColumnSpan(piece_ofLine3, 2);
grid.Children.Add(piece_ofLine3, 1, 0);
Content = grid;
}
}
这是我需要的UI
这是我的观点 . 如你所见,那里只能看到一幅图像 -
我以前在XAML中进行设计,但由于它是内容视图,我必须在代码后面编写设计代码 . 这就是为什么我对此不熟悉的原因 . 而且我不能像在XAML中那样将整个视图放在堆栈布局中 . 这是我在XAML中编写的视图的代码:
<StackLayout>
<Label Text="CATEGORY 1" Margin="20,0,0,10" TextColor="Black" Font="Bold,18"/>
<BoxView Color="#E0E0E0" WidthRequest ="80" HeightRequest="1"/>
<Grid
Margin="10,0,0,0"
Padding="0"
>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="1"/>
<RowDefinition Height="30" />
<RowDefinition Height="1"/>
<RowDefinition Height="30" />
<RowDefinition Height="1"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" x:Name="foodimage1"/>
<Label TextColor="Black" Text="Vendor Name 1" Grid.Row="0" Grid.Column="1"/>
<BoxView Color="#E0E0E0" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" />
<Image Grid.Row="2" Grid.Column="0" x:Name="foodimage2"/>
<Label TextColor="Black" Grid.Row="2" Grid.Column="1" Text="Vendor Name 2"/>
<BoxView Color="#E0E0E0" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" />
<Image Grid.Row="4" Grid.Column="0" x:Name="foodimage3"/>
<Label TextColor="Black" Grid.Row="4" Grid.Column="1" Text="Vendor Name 3"/>
<BoxView Color="#E0E0E0" Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2" />
</Grid>
<Label Text="CATEGORY 2" Margin="20,0,0,10" TextColor="Black" Font="Bold,18"/>
<BoxView Color="#E0E0E0" WidthRequest ="80" HeightRequest="1"/>
<Grid
Margin="10,0,0,0"
Padding="0"
>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="1"/>
<RowDefinition Height="30" />
<RowDefinition Height="1"/>
<RowDefinition Height="30" />
<RowDefinition Height="1"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" x:Name="foodimage4"/>
<Label TextColor="Black" Text="Vendor Name 1" Grid.Row="0" Grid.Column="1"/>
<BoxView Color="#E0E0E0" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" />
<Image Grid.Row="2" Grid.Column="0" x:Name="foodimage5"/>
<Label TextColor="Black" Grid.Row="2" Grid.Column="1" Text="Vendor Name 2"/>
<BoxView Color="#E0E0E0" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" />
<Image Grid.Row="4" Grid.Column="0" x:Name="foodimage6"/>
<Label TextColor="Black" Grid.Row="4" Grid.Column="1" Text="Vendor Name 3"/>
<BoxView Color="#E0E0E0" Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2" />
</Grid>
</StackLayout>
我必须将相同的XAML代码实现到C# . 有什么建议?
1 回答
如果我正确理解了这段代码,那么您将在同一行中添加所有项:
Add方法接受视图,然后是列和行 .
现在,所有的Add调用都具有相同的值,因此所有元素都将放在同一行中 . 应该更像这样: