移動應用界面美化有妙招！在Xamarin表單中使用指示器視圖

使應用程序更有趣並同時顯示更多信息而不需要額外空間，其中一種方式是將其呈現在同一頁面的輪播中。

如果添加定位指標，這種情況下的用戶體驗會好得多。例如如果正在查看圖像相冊，那麼用戶可以看到指示符，在本文中我們將看到如何使用IndicatorView實現這一目標！

點擊獲取工具下載

什麼是IndicatorView（指標視圖）？

該控件允許我們顯示指標來表示 CarouselView 中項目的總數和當前位置。 它包含由 BindableProperty 對象支持的屬性，允許我們使用數據綁定。 重要的是要知道此控件在 iOS 和 Android 平臺上的 Xamarin.Forms 4.4 和通用 Windows 平臺上的 4.5 中可用。

開始創建 IndicatorView

要開始創建此控件，瞭解所需的結構很重要：

代碼實現：

<StackLayout>
<CarouselView ItemsSource="{Binding Food}"
IndicatorView="indicatorView">
<CarouselView.ItemTemplate>
<!-- Here define the item appearance -->
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView x:Name="indicatorView"
IndicatorColor="LightGray"
SelectedIndicatorColor="DarkGray"
HorizontalOptions="Center" />
</StackLayout>

瞭解一些屬性

IndicatorView提供了許多可以用來創建實用功能的屬性：

最後，添加這些屬性的示例：

<IndicatorView x:Name="indicatorView"
IndicatorColor="Pink"
SelectedIndicatorColor="White"
HorizontalOptions="Center"
IndicatorsShape="Square"
IndicatorSize="18"
MaximumVisible="6"
.... Here you can add all the properties that you need..../>

定義指標外觀

要定義指標元素，您只需將 IndicatorView.IndicatorTemplateproperty 設置爲 DataTemplate。

在以下示例中，默認圖像已更改爲另一個名爲 Star.jpg 的圖像。

 

<IndicatorView.IndicatorTemplate>
<DataTemplate>
<Image Source="Star.jpg" />
</DataTemplate>
</IndicatorView.IndicatorTemplate>

 

要實現完整的實現，只需將前一個塊添加到此：

 

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

<!-- Here add the block explained above-->
</IndicatorView>
</StackLayout>

 

添加可視化狀態

可視化狀態非常重要，它幫助我們以圖形方式識別特定操作所做的任何更改。 例如，在指示器視圖中，我們可以通過與其他項目不同的顏色或大小來突出顯示項目被選中的時間，這使得可以快速識別所在的位置。

爲了開發這個例子，一步一步地解釋：

1. 創建樣式。

<Style x:Key="IndicatorsStyle"
TargetType="Label">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="TextColor"
Value="Pink" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="TextColor"
Value="Blue" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>

2. 創建樣式後，您只需添加一個簡單的樣式，如下所述：

<IndicatorView x:Name="indicatorView"
Margin="0,0,0,40"
IndicatorColor="Transparent"
SelectedIndicatorColor="Transparent"
HorizontalOptions="Center">
<IndicatorView.IndicatorTemplate>
<DataTemplate>
<Label Text="-" Style="{StaticResource IndicatorsStyle}" />
</DataTemplate>
</IndicatorView.IndicatorTemplate>
</IndicatorView>

Telerik UI for Xamarin是一個構建跨平臺移動應用程序的原生UI。Telerik UI for Xamarin使用Xamarin.Forms技術，它可以讓開發人員從一個單一的共享C#代碼庫中創建原生的iOS、Android和Windows Phone應用程序。不僅如此，UI for Xamarin建立在iOS和Android的原生控件之上的，爲Xamarin用戶的應用程序提供真正的原生UI。

---

瞭解最新Kendo UI最新資訊，請關注Telerik中文網！