Любая идея, как добавить индикаторы CarouselView внутри CarouselView самостоятельно?

Question

Я использую CarouselView для отображения нескольких представлений

каждый из них в основном имеет 2 StackLayouts, например, так:

На данный момент я создал CarouselView с шаблоном для обоих этих Stacklayouts

 <CarouselView
                    x:Name="MyCarouselView"
                    IsVisible="{Binding ShouldShow}" 
                    ItemsSource="{Binding MyItemSource}"
                    Scrolled="CarouselView_Scrolled">
                    <CarouselView.ItemTemplate>
                        <DataTemplate>
                            <ContentView>
                                <FlexLayout Direction="Column" JustifyContent="SpaceBetween">
                                    <StackLayout FlexLayout.Basis="25%">
                                        <elements:TopView Data="{Binding}"/>
                                    </StackLayout>

                                    <StackLayout FlexLayout.Basis="75%">
                                        <elements:BottomView Data="{Binding}"/>
                                    </StackLayout>
                                </FlexLayout>
                            </ContentView>
                        </DataTemplate>
                    </CarouselView.ItemTemplate>
                </CarouselView>

Примечание. Представления привязываются к различным значениям, но для простоты я написал здесь более простой DataTemplate.

он работает нормально, и нет проблем с привязкой или чем-либо еще.

Я пытаюсь добавить индикаторы, показывающие пользователю, что есть больше элементов, и какой он есть. видя сейчас. (маленькие кружки или что-то в этом роде).

дело в том, что я хочу отображать их между двумя видами, например, так:

Есть идеи, как это сделать? Любой другой способ достижения желаемого результата также приветствуется

Пожалуйста и спасибо.

Answer 1

Простой способ реализовать, использующий Сетка , чтобы сделать это:

<Grid>
    <!-- Place new controls here -->
    <CarouselView x:Name="CustomCarouselView"
                  IndicatorView="indicatorView"
                  VerticalOptions="FillAndExpand"
                  >
        <CarouselView.ItemTemplate>
            <DataTemplate>
                <StackLayout>
                    <ContentView BackgroundColor="LightBlue" >
                        <Label Text="{Binding TopViewTitle}" FontSize="Header" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" HeightRequest="250"/>
                    </ContentView>
                    <ContentView BackgroundColor="LightGray" Margin="0,80,0,0">
                        <Label Text="{Binding BottomViewTitle}" FontSize="Header" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" HeightRequest="250" />
                    </ContentView>   
                </StackLayout>
            </DataTemplate>
        </CarouselView.ItemTemplate>
    </CarouselView>
    <IndicatorView x:Name="indicatorView"
                   IndicatorsShape="Square"
                   IndicatorColor="LightGray"
                   SelectedIndicatorColor="DarkGray"
                   VerticalOptions="Center"
                   Margin="0,-150,0,0" />
</Grid>

Выше приведен мой пример кода xaml, нужно только настроить Маржа свойство IndicatorView и низ ContentView после привязки ItemSource для CarouselView :

List<CarouselModel> carouselModels = new List<CarouselModel>();
carouselModels.Add(new CarouselModel { TopViewTitle = "first top", BottomViewTitle = "first bottom" });
carouselModels.Add(new CarouselModel { TopViewTitle = "second top", BottomViewTitle = "second bottom" });
carouselModels.Add(new CarouselModel { TopViewTitle = "third top", BottomViewTitle = "third bottom" });

CustomCarouselView.ItemsSource = carouselModels;

Эффект отображается, как и ожидалось:

Другой способ , который вы можете использовать RelativeLayout для реализации этого:

<RelativeLayout>
    <!-- Place new controls here -->
    <CarouselView x:Name="CustomCarouselView"
                    IndicatorView="indicatorView"
                    >
        <CarouselView.ItemTemplate>
            <DataTemplate>
                <StackLayout>
                    <ContentView BackgroundColor="LightBlue">
                        <Label Text="{Binding TopViewTitle}"
                                FontSize="Header"
                                HorizontalTextAlignment="Center"
                                VerticalTextAlignment="Center"
                                HeightRequest="250" />
                    </ContentView>
                    <ContentView BackgroundColor="LightGray"
                                    Margin="0,80,0,0">
                        <Label Text="{Binding BottomViewTitle}"
                                FontSize="Header"
                                HorizontalTextAlignment="Center"
                                VerticalTextAlignment="Center"
                                HeightRequest="250" />
                    </ContentView>
                </StackLayout>
            </DataTemplate>
        </CarouselView.ItemTemplate>
    </CarouselView>
    <IndicatorView x:Name="indicatorView"
                    IndicatorsShape="Square"
                    IndicatorColor="LightGray"
                    SelectedIndicatorColor="DarkGray"
                    RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=0.5,Constant=-25}"
                    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=0.5,Constant=-75}"
                    />
</RelativeLayout>

Здесь вы можно изменить RelativeLayout.XConstraint и RelativeLayout.YConstraint из IndicatorView , чтобы установить пространство между двумя ContentView. Свойство Margin Bottom ContentView также необходимо установить, его эффект заключается в отображении пробела между двумя ConentView .

Answer 2

Вы можете достичь этого двумя способами: -

1. Grid, где вы можете поместить оба элемента управления в один Grid.Row. Назначьте VerticalOptions="FillAndExpand" для CarouselView и VerticalOptions="Center" для IndicatorView.
2. Используя AbsoluteLayout.

Дайте мне знать, если у вас есть дополнительные запросы.