如果我在后面的代码中以xamarin形式编写代码，为什么看不到我的视图？

时间：2018-12-10 10:42:25

标签： c# xamarin xamarin.forms

我在后面的代码中为视图编写代码。这是我的代码：

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;
    }
}

这是我需要的用户界面

这是我的观点。如您所见，在那只可见一幅图像-

我曾经在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>

我必须对C＃实施相同的XAML代码。有什么建议吗？

1 个答案:

答案 0 :(得分：3)

如果我正确理解了这段代码，那么您将所有项目添加到同一行：

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);

Add方法获取视图，然后获取列和行。

现在，您所有的Add调用都具有相同的值，因此所有元素都将放置在同一行中。可能应该更像这样：

// Row 1
grid.Children.Add(image1, 0, 0);
grid.Children.Add(label1, 0, 0);
Grid.SetColumnSpan(piece_ofLine1, 2);
grid.Children.Add(piece_ofLine1, 1, 0);

// Row 2
grid.Children.Add(image2, 0, 1);
grid.Children.Add(label2, 0, 1);
Grid.SetColumnSpan(piece_ofLine2, 2);
grid.Children.Add(piece_ofLine2, 1, 1);

// Row 3
grid.Children.Add(image3, 0, 2);
grid.Children.Add(label3, 0, 2);
Grid.SetColumnSpan(piece_ofLine3, 2);
grid.Children.Add(piece_ofLine3, 1, 2);
相关问题
最新问题