如何实现此设计XAMARIN XAML

tcomlyy6  于 2022-12-07  发布在  其他
关注(0)|答案(1)|浏览(142)

如何在xamarin中实现这个设计?我正在尝试实现一个列表,第0列的所有行在水平滚动时固定,第1列的所有行将水平滚动。请参见图片。
我有列表数据。你知道任何插件/组件来实现这一点吗?

我在努力...

<StackLayout Grid.ColumnSpan="2" Grid.RowSpan="4">
                          
    <StackLayout  Orientation="Horizontal" Padding="10" Spacing="50" BackgroundColor="Gray" HorizontalOptions="FillAndExpand">
        <Label Text="List Header" HorizontalOptions="Start" FontSize="Small" TextColor="White" FontAttributes="Bold" />

        <Label Text="18:00" HorizontalOptions="End" FontSize="Small" TextColor="White" FontAttributes="Bold"  />
        <Label Text="18:30" HorizontalOptions="End" FontSize="Small" TextColor="White" FontAttributes="Bold"  />
        <Label Text="19:00" HorizontalOptions="End" FontSize="Small" TextColor="White" FontAttributes="Bold"  />
    </StackLayout>

    <ListView ItemsSource="{Binding DataTypes}" ItemTapped="DataType_Selected" >

        <ListView.ItemTemplate>
            <DataTemplate>
               
                <ViewCell>
                   
                        <StackLayout BackgroundColor="#eee" Orientation="Vertical">
                            <Grid >

                                <Label Text="{Binding DataName}" Grid.Column="0" Grid.ColumnSpan="3" TextColor="#f35e20" FontAttributes="Bold" />
                                <Label Text="Avail" Grid.Column="3" TextColor="Black" FontAttributes="Bold" />
                                <Label Text="Not" Grid.Column="4" TextColor="Black" FontAttributes="Bold" />
                                <Label Text="Avail" Grid.Column="5" TextColor="Black" FontAttributes="Bold" />

                            </Grid>
                        </StackLayout>
                
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

</StackLayout>
vh0rcniy

vh0rcniy1#

您可以使用网格或stacklayout作为父布局,然后使用包含stacklayout的滚动视图,其中包含一个listview。

正如图片所示,您可以使用scrollview使列表视图同时垂直和水平滚动。

<ScrollView Orientation="Horizontal" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">

  <StackLayout>
       
       //the listview
  </StackLayout>

</ScrollView>

相关问题