Forum Xamarin Xamarin.Forms

how to set flyout selecteditem color to gradient in xamarin forms shell

udaysuddhalaudaysuddhala USMember ✭✭

Hi,

is there anyway to set the selected flyout item color to gradient color in xamarin forms shell?

Answers

  • jezhjezh Member, Xamarin Team Xamurai
    edited June 22

    If you want to change the Flyoutitem background color, you can add a style of Item .

    In Shell.Resource

    <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="Red"/>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>
    

    And use it in Shell.ItemTemplate

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

    For Gradient Flyout, you can refer to this article: https://medium.com/@benetskyybogdan/xf-shell-gradient-flyout-with-magic-gradients-e9f0eb46bae0

  • udaysuddhalaudaysuddhala USMember ✭✭

    thanks @jezh . I did the same(visual state) to implement selected color, but i am unable to set gradient color to the item selected. we can set gradient color to the views . In this case , we have to get the selectedItem in the flyout and set its background color to some gradient color. i think it needs some cutom renderer for shell and should set it so. :( .

  • odaikurdodaikurd Member

    @jezh Thank You!

Sign In or Register to comment.