選択時の背景色を変更する方法はこちらの記事に書きました.

shuhelohelo.hatenablog.com

背景色を変更しましたが,文字の色によっては見えにくくなることもあります.

このため,選択時の背景色に合わせて文字色も変更されるようにします.

選択時の色のときは,FlyoutItemが選択されたときにFlyoutItem直下のGridの背景色を変えることで,選択時の色を任意の色に変えることができました.

しかし,今回はGridの中のLabelです.これをGridの背景色の変化に合わせて変化させるにはどうするかというと,DataTriggerの出番です.

<Shell.ItemTemplate>
    <DataTemplate>
        <Grid x:Name="grid" Style="{StaticResource FloutItemStyle}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.2*" />
                <ColumnDefinition Width="0.8*" />
            </Grid.ColumnDefinitions>
            <Image Source="{Binding Icon}"
                       x:Name="img"
                       Margin="5"
                       HeightRequest="45" />
            <Label Grid.Column="1"
                       TextColor="Black"
                       Text="{Binding Title}"
                       FontAttributes="Italic"
                       VerticalTextAlignment="Center" >
                <Label.Triggers>
                    <DataTrigger TargetType="Label" Binding="{Binding Source={x:Reference grid},Path=BackgroundColor}" Value="Accent">
                        <Setter Property="TextColor" Value="White"/>
                    </DataTrigger>
                </Label.Triggers>
            </Label>
        </Grid>
    </DataTemplate>
</Shell.ItemTemplate>