shuhelohelo’s blog

Xamarin.Forms多めです.

Xamarin.Forms: ShellのFlyout(メニュー)の選択時の背景色を変更する

各項目が選択されたときの色(Selcted Color)を変更する方法はこちら↓

forums.xamarin.com

ShellにはItemTemplateがあって,ここで指定したDataTemplateはFlyoutの各アイテムの見た目の定義になる.

これを定義しなければデフォルトのスタイルが使用される.

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

選択色の変更は,VisualStateMangerを使い,選択されたときのBackgroundColorプロパティを変更する.

            <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="{StaticResource AppPrimaryColor}" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </Setter>
            </Style>

ふむふむ.

ソースコード

↓で使っている.

github.com