XAML 在指标视图中自定义选定项目的UI,NET Maui

uxh89sit  于 9个月前  发布在  其他
关注(0)|答案(1)|浏览(83)

我想用数据模板在指标视图中制作所选项目的UI,对于所选项目,指标视图应该是细长的,其余部分应该是球形的。UI如下:
elongated view for selected Item
这在.net毛伊岛是可能的吗

k5ifujac

k5ifujac1#

是的,你可以通过使用FrameVisualState来实现它:

<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>

字符串
这是effect

相关问题