Question

我正在编写此代码，但我看不到按钮，只能看到图像。我在视觉工作室中使用移动应用程序的xamaring表单。我需要看到两个元素，第一行中的按钮和第二行中的de图像

    <ContentPage.Content>
        <ScrollView
            Padding="{ StaticResource MainWrapperPadding }">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

            <Button Grid.Column="0" Grid.Row="0" Text="1" BackgroundColor="#FFE53C25"
                FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />

            <Button Grid.Column="1" Grid.Row="0" Text="2" BackgroundColor="#98A4AE"
                FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />

            <Button Grid.Column="2" Grid.Row="0" Text="3" BackgroundColor="#98A4AE"
                FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />

            <Button Grid.Column="3" Grid.Row="0" Text="4" BackgroundColor="#98A4AE"
                FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />

<artina:GridOptionsView
                    x:Name="promotionsList"
                    Margin="0"
                    ColumnSpacing="0" 
                    RowSpacing="0" 
                    Padding="2" 
                    ColumnCount="{
                        artina:OnOrientationInt 
                            PortraitPhone=2,
                            LandscapePhone=3,

                            PortraitTablet=3,
                            LandscapeTablet=4,

                            PortraitDesktop=4,
                            LandscapeDesktop=4
                    }"
                    VerticalOptions="FillAndExpand">
                    <artina:GridOptionsView.ItemTemplate>
                        <DataTemplate>
                            <local:PromotionItemTemplate HeightRequest="296" />
                        </DataTemplate>
                    </artina:GridOptionsView.ItemTemplate>
                </artina:GridOptionsView>
                </StackLayout>
            </Grid>-->
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

Answer 1

在这里，我将更轻松地添加更多字段

<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="End" Spacing="0" >
  <Grid ColumnSpacing="0" RowSpacing="0" HorizontalOptions="FillAndExpand">

    <Grid.RowDefinitions>
      <RowDefinition Height="1" />
      <RowDefinition Height="2" />
    </Grid.RowDefinitions>

 <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <StackLayout HorizontalOptions="FillAndExpand" Grid.Column="0"  Grid.Row="0" BackgroundColor="Blue" >


           <Button  Text="1" BackgroundColor="#FFE53C25"
                FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />

            <Button  Text="2" BackgroundColor="#98A4AE"
                FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />

            <Button  Text="3" BackgroundColor="#98A4AE"
                FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />

            <Button  Text="4" BackgroundColor="#98A4AE"
                FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />




    </StackLayout>

    <StackLayout HorizontalOptions="FillAndExpand" Grid.Column="0" Grid.Row="1" BackgroundColor="Red" >


               <artina:GridOptionsView
                    x:Name="promotionsList"
                    Margin="0"
                    ColumnSpacing="0" 
                    RowSpacing="0" 
                    Padding="2" 
                    ColumnCount="{
                        artina:OnOrientationInt 
                            PortraitPhone=2,
                            LandscapePhone=3,

                            PortraitTablet=3,
                            LandscapeTablet=4,

                            PortraitDesktop=4,
                            LandscapeDesktop=4
                    }"
                    VerticalOptions="FillAndExpand">
                    <artina:GridOptionsView.ItemTemplate>
                        <DataTemplate>
                            <local:PromotionItemTemplate HeightRequest="296" />
                        </DataTemplate>
                    </artina:GridOptionsView.ItemTemplate>
                </artina:GridOptionsView>


    </StackLayout>
  </Grid>
</StackLayout>

带网格行的堆栈布局

如何查看第一行中的四个按钮和第二行中的图像列表？

1 个答案: