自定义指标视图中所选项目的 UI .NET Maui

Question

我想使用数据模板在指标视图中制作所选项目的 UI。 对于所选项目，指示器视图应拉长，其余部分应为球形。 用户界面如下：

这在 .net Maui 中可能吗

Answer 1

是的，您可以使用

Frame

和

VisualState

来实现：

<ContentPage ...>
    <ContentPage.Resources>
        <Style x:Key="IndicatorFrameStyle"
           TargetType="Frame">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor"
                                    Value="LightGray" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor"
                                    Value="#FF000F" />
                                <Setter Property="WidthRequest"
                                    Value="45" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </ContentPage.Resources>
    <StackLayout Margin="10">
        ...
        <IndicatorView x:Name="indicatorView"
                   Margin="0,0,0,40"
                   IndicatorColor="Transparent"
                   SelectedIndicatorColor="Transparent"
                   HorizontalOptions="Center">
            <IndicatorView.IndicatorTemplate>
                <DataTemplate>
                    <Frame Margin="10"
                       CornerRadius="50"
                       HeightRequest="20"
                       WidthRequest="20"
                       Style="{StaticResource IndicatorFrameStyle}"/>
                </DataTemplate>
            </IndicatorView.IndicatorTemplate>
        </IndicatorView>
    </StackLayout>
</ContentPage>

这是效果。