.NET MAUI에서 TabBar 또는 SegmentedControl 만들기

이것은 .NET MAUI로 구축하고 있는 작은 데모 앱을 위해 방금 만든 경험입니다. Syncfusion 및 Progress와 같은 구성 요소 공급업체는 이 작업을 수행하는 SegmentedControls를 제공하지만 "기본"컨트롤을 사용하는 것이 어떤 것인지 확인하고 싶었습니다. 결과와 코딩이 얼마나 쉬웠는지에 정말 만족합니다. 아마 10분 정도 걸렸을 겁니다.

내가 사용한 것:

처음 두 개의 "컨트롤"은 실제로 솔루션의 핵심입니다. 나머지는 레이아웃/디자인에 필요합니다.

RadioButton

BindableLayout

HorizontalStackLayout

Grid - 아마도 나는 VerticalStackLayout 를 사용할 수 있었지만 Grid 는 나에게 큰 유연성을 제공합니다

Label

BoxView - 부모 컨테이너에 크기를 조정해야 하는 선이나 상자를 페인팅하기 위한 이 간단한 컨트롤이 마음에 듭니다

.

코드

1 - 각 탭에 대해 반복할 데이터 집합으로 컨테이너를 만들었습니다.

<HorizontalStackLayout>
    <BindableLayout.ItemTemplate>
    <!-- Views Here -->
    </BindableLayout.ItemTemplate>
    <BindableLayout.ItemsSource>
        <x:Array Type="{x:Type x:String}">
            <x:String>Hot Dishes</x:String>
            <x:String>Cold Dishes</x:String>
            <x:String>Soups</x:String>
            <x:String>Appetizers</x:String>
            <x:String>Desserts</x:String>
        </x:Array>
    </BindableLayout.ItemsSource>
</HorizontalStackLayout>

2 - RadioButton를 표시하는 항목 템플릿을 만들었습니다.

<BindableLayout.ItemTemplate>
    <DataTemplate>
        <RadioButton Content="{Binding .}" />
    </DataTemplate>
</BindableLayout.ItemTemplate>

이것을 그룹화된 라디오 목록으로 만들기 위해 상위 레이아웃에 이름을 추가했습니다.

<HorizontalStackLayout 
    RadioButtonGroup.GroupName="MenuCategories">

3 - RadioButton 를 사용하여 ControlTemplate 스타일을 지정했습니다.

<RadioButton Content="{Binding .}">
    <RadioButton.ControlTemplate>
        <ControlTemplate>
            <Grid RowDefinitions="30,4">
                <Label Text="{TemplateBinding Content}" />
                <BoxView Grid.Row="1" Color="Transparent"/>
            </Grid>
        </ControlTemplate>
    </RadioButton.ControlTemplate>
</RadioButton>

컨트롤 템플릿 안에 있기 때문에 Binding 를 사용하는 대신 TemplateBinding 를 사용합니다. Content는 무엇이든 될 수 있지만 String를 제공했으므로 레이블 텍스트에 직접 바인딩하는 것이 안전해 보입니다.

4 - 선택된 것과 선택되지 않은 것에 대해 다른 모양을 얻으려면, 나는:

컨트롤 템플릿 레이아웃에 VisualStateManager(VSM) 추가

은 VSM

에서 대상으로 지정할 수 있도록 라벨 및 상자 이름을 제공했습니다.

선택된 상태와 선택되지 않은 상태의 스타일 지정(이상한 이름 ¯_(ツ)_/¯)

<ControlTemplate>
    <Grid RowDefinitions="30,4">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroupList>
                <VisualStateGroup x:Name="CheckedStates">
                    <VisualState x:Name="Checked">
                        <VisualState.Setters>
                            <Setter
                                TargetName="TextLabel"
                                Property="Label.TextColor"
                                Value="{StaticResource Primary}"/>
                            <Setter
                                TargetName="Indicator"
                                Property="BoxView.Color"
                                Value="{StaticResource Primary}"/>
                        </VisualState.Setters>
                    </VisualState>

                    <VisualState x:Name="Unchecked">
                        <VisualState.Setters>
                            <Setter
                                TargetName="TextLabel"
                                Property="Label.TextColor"
                                Value="White"/>
                            <Setter
                                TargetName="Indicator"
                                Property="BoxView.Color"
                                Value="Transparent"/>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </VisualStateManager.VisualStateGroups>
        <Label Text="{TemplateBinding Content}" x:Name="TextLabel" />
        <BoxView x:Name="Indicator" Grid.Row="1" Color="Transparent"/>
    </Grid>
</ControlTemplate>

결론

그게 다야. 이 예제에는 매우 쉽게 구현할 수 있는 유용한 개념이 많이 있습니다. .NET MAUI에서 사용할 수 있는 새로운 기능을 하나 이상 배웠으면 합니다.