首页 文章

如果我在我的代码中以xamarin形式编写代码,为什么我的视图不可见?

提问于
浏览
0

我正在代码中为我的代码编写代码 . 这是我的代码:

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 回答

  • 2

    如果我正确理解了这段代码,那么您将在同一行中添加所有项:

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

相关问题