Xamarin.Forms IndicatorView

IndicatorView是一個控件，顯示指標，表示中的CarouselView項目數和目前位置：

IndicatorView 會定義下列屬性：

Count型 int別為的指標數目。
HideSingle型 bool別為的，表示當只有一個指標存在時，是否應該隱藏指標。預設值是 true。
IndicatorColor類型 Color為的，表示指標的色彩。
IndicatorSize型 double別為的指標大小。預設值為 6.0。
IndicatorLayout型 Layout<View>別為的，定義用來轉譯的版面配置 IndicatorView類別。此屬性是由 Xamarin.Forms設定，而且通常不需要由開發人員設定。
IndicatorTemplate類型 DataTemplate為的範本，定義每個指標的外觀。
IndicatorsShape，類型 IndicatorShape為，每個指標的形狀。
ItemsSource型 IEnumerable別為的集合，將會顯示指標的集合。設定屬性時 CarouselView.IndicatorView ，會自動設定這個屬性。
MaximumVisible型 int別為的可見指標數目上限。預設值是 int.MaxValue。
Position，類型 int為，目前選取的指標索引。這個屬性會使用系 TwoWay 結。設定屬性時 CarouselView.IndicatorView ，會自動設定這個屬性。
SelectedIndicatorColor，類型 Color為，表示中 CarouselView目前專案的指標色彩。

這些屬性是由 BindableProperty 物件所支援，這表示這些屬性可以是數據系結的目標，並設定樣式。

建立 IndicatorView

下列範例示範如何在 XAML 中具現化 IndicatorView 。

<StackLayout>
    <CarouselView ItemsSource="{Binding Monkeys}"
                  IndicatorView="indicatorView">
        <CarouselView.ItemTemplate>
            <!-- DataTemplate that defines item appearance -->
        </CarouselView.ItemTemplate>
    </CarouselView>
    <IndicatorView x:Name="indicatorView"
                   IndicatorColor="LightGray"
                   SelectedIndicatorColor="DarkGray"
                   HorizontalOptions="Center" />
</StackLayout>

在此範例中， IndicatorView 會在下方 CarouselView轉譯，其中包含中 CarouselView每個專案的指標。會將 IndicatorView 屬性設定 CarouselView.IndicatorView 為 IndicatorView 物件，以填入數據。每個指標都是淺灰色圓圈，而代表中 CarouselView 目前專案的指標為深灰色。

重要

設定屬性會導致CarouselView.IndicatorViewIndicatorView.Position屬性系結至 CarouselView.Position 屬性，並將IndicatorView.ItemsSource屬性系結至 CarouselView.ItemsSource 屬性。

變更指標圖形

類別 IndicatorView 具有 IndicatorsShape 屬性，可決定指標的形狀。這個屬性可以設定為其中 IndicatorShape 一個列舉成員：

Circle 指定指標圖形會是圓形的。此為 IndicatorView.IndicatorsShape 屬性的預設值。
Square 表示指標圖形會是正方形的。

下列範例顯示 IndicatorView 已設定為使用正方形指標的：

<IndicatorView x:Name="indicatorView"
               IndicatorsShape="Square"
               IndicatorColor="LightGray"
               SelectedIndicatorColor="DarkGray" />

變更指標大小

類別 IndicatorView 具有 IndicatorSize 類型的 double屬性，可決定裝置獨立單位中的指標大小。此屬性的預設值為 6.0。

下列範例顯示 IndicatorView 設定為顯示較大指標的：

<IndicatorView x:Name="indicatorView"
               IndicatorSize="18" />

限制顯示的指標數目

類別 IndicatorView 具有 MaximumVisible 類型的 int屬性，可決定可見指標數目上限。

下列範例顯示設定為顯示最多六個 IndicatorView 指標的：

<IndicatorView x:Name="indicatorView"
               MaximumVisible="6" />

定義指標外觀

您可以將屬性設定 IndicatorView.IndicatorTemplate 為 DataTemplate，以定義每個指標的外觀：

<StackLayout>
    <CarouselView ItemsSource="{Binding Monkeys}"
                  IndicatorView="indicatorView">
        <CarouselView.ItemTemplate>
            <!-- DataTemplate that defines item appearance -->
        </CarouselView.ItemTemplate>
    </CarouselView>
    <IndicatorView x:Name="indicatorView"
                   Margin="0,0,0,40"
                   IndicatorColor="Transparent"
                   SelectedIndicatorColor="Transparent"
                   HorizontalOptions="Center">
        <IndicatorView.IndicatorTemplate>
            <DataTemplate>
                <Label Text="&#xf30c;"
                       FontFamily="{OnPlatform iOS=Ionicons, Android=ionicons.ttf#}, Size=12}" />
            </DataTemplate>
        </IndicatorView.IndicatorTemplate>
    </IndicatorView>
</StackLayout>

中指定的 DataTemplate 項目會定義每個指標的外觀。在這裡範例中，每個指標都是 Label 顯示字型圖示的。

下列螢幕快照顯示使用字型圖示呈現的指標：

設定視覺狀態

IndicatorViewSelected具有視覺狀態，可用來起始對中IndicatorView目前位置的指標進行視覺變更。常見的使用案例 VisualState 是變更代表目前位置的指標色彩：

<ContentPage ...>
    <ContentPage.Resources>
        <Style x:Key="IndicatorLabelStyle"
               TargetType="Label">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter Property="TextColor"
                                        Value="LightGray" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="TextColor"
                                        Value="Black" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </ContentPage.Resources>

    <StackLayout>
        ...
        <IndicatorView x:Name="indicatorView"
                       Margin="0,0,0,40"
                       IndicatorColor="Transparent"
                       SelectedIndicatorColor="Transparent"
                       HorizontalOptions="Center">
            <IndicatorView.IndicatorTemplate>
                <DataTemplate>
                    <Label Text="&#xf30c;"
                           FontFamily="{OnPlatform iOS=Ionicons, Android=ionicons.ttf#}, Size=12}"
                           Style="{StaticResource IndicatorLabelStyle}" />
                </DataTemplate>
            </IndicatorView.IndicatorTemplate>
        </IndicatorView>
    </StackLayout>
</ContentPage>

在此範例中 Selected ，視覺狀態會指定表示目前位置的指標將 TextColor 設為黑色。否則 TextColor ，指標的會是淺灰色：

IndicatorView 選取視覺狀態的螢幕快照

如需視覺狀態的詳細資訊，請參閱 Xamarin.Forms Visual State Manager。

Last updated on 2021-02-24

共用方式為