IndicatorView

샘플 찾아보기

.NET 다중 플랫폼 앱 UI(.NET MAUI) IndicatorView 는 항목 수와 현재 위치를 나타내는 표시기를 다음과 같이 표시하는 컨트롤입니다 CarouselView.

IndicatorView는 다음 속성을 정의합니다.

• Count형식의 int표시기 수입니다.
• HideSingle형식 bool의 는 표시기가 하나만 있을 때 표시기를 숨겨야 하는지 여부를 나타냅니다. 기본값은 true입니다.
• IndicatorColor형식의 Color표시기 색입니다.
• IndicatorSize형식의 double표시기 크기입니다. 기본값은 6.0입니다.
• IndicatorLayout형식 Layout<View>의 < a0/>은 .를 렌더링하는 데 사용되는 레이아웃 클래스를 정의합니다 IndicatorView. 이 속성은 .NET MAUI에 의해 설정되며 일반적으로 개발자가 설정할 필요가 없습니다.
• IndicatorTemplate각 표시기의 모양을 정의하는 템플릿인 형식 DataTemplate의 입니다.
• IndicatorsShape형식의 IndicatorShape각 표시기의 모양입니다.
• ItemsSource형식의 IEnumerable표시기가 표시될 컬렉션입니다. 이 속성은 속성이 설정되면 자동으로 설정 CarouselView.IndicatorView 됩니다.
• MaximumVisible형식의 int최대 표시기 수입니다. 기본값은 int.MaxValue입니다.
• Position형식 int의 현재 선택한 표시기 인덱스입니다. 이 속성은 바인딩을 TwoWay 사용합니다. 이 속성은 속성이 설정되면 자동으로 설정 CarouselView.IndicatorView 됩니다.
• SelectedIndicatorColor형식 Color의 , 에 있는 현재 항목을 CarouselView나타내는 표시기의 색입니다.

이러한 속성은 BindableProperty 개체에서 지원하며, 따라서 데이터 바인딩의 대상이 될 수 있고 스타일이 지정될 수 있습니다.

IndicatorView 만들기

페이지에 표시기를 추가하려면 개체를 IndicatorView 만들고 해당 IndicatorColor 개체 및 SelectedIndicatorColor 속성을 설정합니다. 또한 개체의 CarouselView.IndicatorViewIndicatorView 이름으로 속성을 설정합니다.

다음 예제에서는 XAML에서 만드는 IndicatorView 방법을 보여줍니다.

<Grid RowDefinitions="*,Auto">
    <CarouselView ItemsSource="{Binding Monkeys}"
                  IndicatorView="indicatorView">
        <CarouselView.ItemTemplate>
            <!-- DataTemplate that defines item appearance -->
        </CarouselView.ItemTemplate>
    </CarouselView>
    <IndicatorView x:Name="indicatorView"
                   Grid.Row="1"
                   IndicatorColor="LightGray"
                   SelectedIndicatorColor="DarkGray"
                   HorizontalOptions="Center" />
</Grid>

이 예제에서는 IndicatorView 아래의 각 항목CarouselView에 대한 표시기를 사용하여 렌더링CarouselView됩니다. 속성을 IndicatorView 개체로 설정 CarouselView.IndicatorView 하여 데이터로 IndicatorView 채워집니다. 각 표시기는 연한 회색 원이며, 현재 항목을 CarouselView 나타내는 표시기는 진한 회색입니다.

Important

속성을 설정하면 CarouselView.IndicatorView 속성에 IndicatorView.Position 대한 속성 바인딩 CarouselView.Position 과 속성에 IndicatorView.ItemsSource 대한 속성 바인딩이 발생합니다 CarouselView.ItemsSource .

표시기 모양 변경

클래스에는 IndicatorViewIndicatorsShape 표시기의 모양을 결정하는 속성이 있습니다. 이 속성은 열거형 멤버 중 IndicatorShape 하나로 설정할 수 있습니다.

• Circle 는 표시기 셰이프가 원형이 되도록 지정합니다. IndicatorView.IndicatorsShape 속성의 기본값입니다.
• Square 는 표시기 셰이프가 정사각형임을 나타냅니다.

다음 예제에서는 사각형 표시기를 IndicatorView 사용하도록 구성된 것을 보여 줍니다.

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

표시기 크기 변경

클래스에는 IndicatorViewIndicatorSize 디바이스 독립적 단위의 표시기 크기를 결정하는 형식 double의 속성이 있습니다. 이 속성의 기본값은 6.0입니다.

다음 예제에서는 더 큰 표시기를 IndicatorView 표시하도록 구성된 것을 보여 줍니다.

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

표시되는 표시기 수 제한

클래스에는 IndicatorViewMaximumVisible 표시되는 표시기의 최대 수를 결정하는 형식 int의 속성이 있습니다.

다음 예제에서는 최대 6개의 표시기를 표시하도록 구성된 것을 보여 IndicatorView 줍니다.

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

표시기 모양 정의

속성을 다음으로 설정하여 각 표시기의 IndicatorView.IndicatorTemplate 모양을 정의할 DataTemplate수 있습니다.

<Grid RowDefinitions="*,Auto">
    <CarouselView ItemsSource="{Binding Monkeys}"
                  IndicatorView="indicatorView">
        <CarouselView.ItemTemplate>
            <!-- DataTemplate that defines item appearance -->
        </CarouselView.ItemTemplate>
    </CarouselView>
    <IndicatorView x:Name="indicatorView"
                   Grid.Row="1"
                   Margin="0,0,0,40"
                   IndicatorColor="Transparent"
                   SelectedIndicatorColor="Transparent"
                   HorizontalOptions="Center">
        <IndicatorView.IndicatorTemplate>
            <DataTemplate>
                <Label Text="&#xf30c;"
                       FontFamily="ionicons"
                       FontSize="12" />
            </DataTemplate>
        </IndicatorView.IndicatorTemplate>
    </IndicatorView>
</Grid>

각 표시기의 모양 정의에 지정된 DataTemplate 요소입니다. 이 예제에서 각 표시기는 글꼴 아이콘을 표시하는 표시기입니다 Label .

다음 스크린샷은 글꼴 아이콘을 사용하여 렌더링된 표시기를 보여 줍니다.

시각적 상태 설정

IndicatorView 의 Selected 현재 위치에 대한 표시기를 시각적으로 변경하는 데 사용할 수 있는 시각적 상태가 있습니다 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>

    <Grid RowDefinitions="*,Auto">
        ...
        <IndicatorView x:Name="indicatorView"
                       Grid.Row="1"
                       Margin="0,0,0,40"
                       IndicatorColor="Transparent"
                       SelectedIndicatorColor="Transparent"
                       HorizontalOptions="Center">
            <IndicatorView.IndicatorTemplate>
                <DataTemplate>
                    <Label Text="&#xf30c;"
                           FontFamily="ionicons"
                           FontSize="12"
                           Style="{StaticResource IndicatorLabelStyle}" />
                </DataTemplate>
            </IndicatorView.IndicatorTemplate>
        </IndicatorView>
    </Grid>
</ContentPage>

이 예제 Selected 에서 시각적 상태는 현재 위치를 나타내는 표시기가 검은색으로 설정되도록 TextColor 지정합니다. 그렇지 않으면 표시기가 TextColor 연한 회색으로 표시됩니다.

시각적 상태에 대한 자세한 내용은 시각적 상태를 참조 하세요.