时间戳

首页 > 解决方案 > Xamarin Style IndicatorView 看起来像 TabbedPage

xaml - Xamarin Style IndicatorView 看起来像 TabbedPage

问题描述

我有个问题。我最近遇到了这个问题：Xamarin 在 TabbedPage 中表单添加按钮，但使用接受的 anwser 已修复。简而言之，我正在使用 aCarouselView和 an IndicatorView，因此我可以在多个屏幕上进行叠加。这两个视图都替换了我的TabbedPage，但IndicatorView需要看起来像TabbedPageBar。关于样式化的唯一好页面IndicatorView是这个：https ://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/indicatorview 。

这是我的页面：

<StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1"
            AbsoluteLayout.LayoutFlags="All"
            Padding="0"
            Spacing="0">

    <IndicatorView x:Name="indicatorView">
        <IndicatorView.IndicatorTemplate>
            <DataTemplate>
                <StackLayout HorizontalOptions="FillAndExpand">
                    <Frame Margin="10">
                        <Label/>
                    </Frame>
                </StackLayout>
            </DataTemplate>
        </IndicatorView.IndicatorTemplate>
    </IndicatorView>

    <CarouselView ItemTemplate="{StaticResource templateSelector}"
                IndicatorView="indicatorView">
        <CarouselView.ItemsSource>
            <x:Array Type="{x:Type x:String}">
                <x:String>1</x:String>
                <x:String>2</x:String>
                <x:String>3</x:String>
            </x:Array>
        </CarouselView.ItemsSource>
    </CarouselView>

</StackLayout>

现在我怎样才能让它IndicatorView看起来像一个TabbedPageBar？

标签： xamlxamarinxamarin.forms

解决方案

我觉得这里的重点是去掉Shadowand CornerRadiusof Frame，然后就可以自定义Frame里面的布局了。这是一个例子：

<IndicatorView x:Name="indicatorView" >
    <IndicatorView.IndicatorTemplate>
        <DataTemplate>
            <StackLayout HorizontalOptions="FillAndExpand" Spacing="0">
                <Frame  HasShadow="False" CornerRadius="0">
                    <StackLayout Orientation="Vertical">
                        <Image Source="Images"/>
                        <Label Text="123" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
                    </StackLayout>
                </Frame>
            </StackLayout>
        </DataTemplate>
    </IndicatorView.IndicatorTemplate>
</IndicatorView>

推荐阅读