Xamarin.Forms: ShellのFlyout(メニュー)の選択時の背景色を変更する
各項目が選択されたときの色(Selcted Color)を変更する方法はこちら↓
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>
ふむふむ.
ソースコード
↓で使っている.