选定(当前)FlyoutItem 的服装样式

问题描述

我注意到，当我像这里所说的那样自定义弹出项目外观时

否则选择项未标记:

====================================更新==================================

解决方案:

如果给模板添加样式，选择后可以保持选中状态.

Shell.Resources:添加 FloutItemStyle.

<Setter Property="VisualStateManager.VisualStateGroups"><VisualStateGroupList><VisualStateGroup x:Name=CommonStates"><VisualState x:Name="Normal";/><VisualState x:Name=已选择"><VisualState.Setters><Setter 属性 =背景颜色"值=口音"/></VisualState.Setters></VisualState></VisualStateGroup></VisualStateGroupList></Setter></风格>

在 Shell.ItemTemplate 中的使用如下:

<数据模板><网格样式={StaticResource FloutItemStyle}"><Grid.ColumnDefinitions><ColumnDefinition Width=0.2*"；/><ColumnDefinition Width=0.8*"；/></Grid.ColumnDefinitions><Image Source="{Binding FlyoutIcon}";边距=5"高度请求=45"/><Label Grid.Column="1";文本={绑定标题}"FontAttributes=斜体"VerticalTextAlignment=居中"/></网格></数据模板></Shell.ItemTemplate>

最后展示效果:

I've noticed that when I customize flyout item appearance like it says here in the docs, the current FlyoutItem is not marked anymore.

Snip of the code from docs to change the item appearance:

<Shell ...>
    ...
    <Shell.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.2*" />
                    <ColumnDefinition Width="0.8*" />
                </Grid.ColumnDefinitions>
                <Image Source="{Binding FlyoutIcon}"
                       Margin="5"
                       HeightRequest="45" />
                <Label Grid.Column="1"
                       Text="{Binding Title}"
                       FontAttributes="Italic"
                       VerticalTextAlignment="Center" />
            </Grid>
        </DataTemplate>
    </Shell.ItemTemplate>
</Shell>

Screenshot before Shell.ItemTemplate
Screenshot after Shell.ItemTemplate

One would assume there must also be some kind of Shell.Current/Active/SelectedItemTemplate customization, but I can not find it.

Any ideas how I can customize current shell item appearance, or at least make the default item marking work with Shell.ItemTemplate?

解决方案

Unfortunately.From Xamarin.Forms - Xaminals sample , also occurs this phenomenon. This should be a limit of Shell FlyoutItem in Current version of XF.

<Shell.ItemTemplate>
    <DataTemplate >
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.2*" />
                <ColumnDefinition Width="0.8*" />
            </Grid.ColumnDefinitions>
            <Image Source="{Binding FlyoutIcon}"
                Margin="5"
                HeightRequest="45" />
            <Label Grid.Column="1"
                Text="{Binding Title}"
                FontAttributes="Italic"
                VerticalTextAlignment="Center" />
        </Grid>
    </DataTemplate>
</Shell.ItemTemplate>

If not using Shell.ItemTemplate , selectitem is marked:

Else selectitem is not marked :

===================================UPDATE================================

Solution:

If adding style to the template , can hold the selected state after selecting.

Shell.Resources: adding a FloutItemStyle.

<Style x:Key="FloutItemStyle" TargetType="Grid">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="Selected">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Accent"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

Using in Shell.ItemTemplate as follow:

<Shell.ItemTemplate>
    <DataTemplate >
        <Grid Style="{StaticResource FloutItemStyle}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.2*" />
                <ColumnDefinition Width="0.8*" />
            </Grid.ColumnDefinitions>
            <Image Source="{Binding FlyoutIcon}"
        Margin="5"
        HeightRequest="45" />
            <Label Grid.Column="1"
        Text="{Binding Title}"
        FontAttributes="Italic"
        VerticalTextAlignment="Center" />
        </Grid>
    </DataTemplate>
</Shell.ItemTemplate>

Finally showing the effect:

这篇关于选定(当前)FlyoutItem 的服装样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！