IndicatorView

아티클
08/30/2024

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

Screenshot of a CarouselView and IndicatorView.

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.IndicatorView IndicatorView 이름으로 속성을 설정합니다.

다음 예제에서는 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 .

표시기 모양 변경

클래스에는 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의 속성이 있습니다.

다음 예제에서는 최대 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 .

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

Screenshot of a templated IndicatorView.

시각적 상태 설정

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 연한 회색으로 표시됩니다.

Screenshot of IndicatorView selected visual state.

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

다음을 통해 공유