Grid in Menu with 2 different Gradient views . Is this possible

[mobileguy]

Hi

I have a menu that is divided in 3 parts (Header-body-Footer) now I want header and Body with 2 different gradient views.

I have tried few options and  I cannot get my wanted outcome.

Sometimes the gradient took over the all grid.

Can you assign each gradientview to each grid.row? if not possible how do you do it ?

Many thanks for your suggestions

Let s take a noddy example

    <Grid RowSpacing="0">

        <Grid.RowDefinitions>

            <RowDefinition Height="25*" />

            <RowDefinition Height="65*" />

            <RowDefinition Height="10*" />

        </Grid.RowDefinitions>

        <BoxView Grid.Row="0" Color="Green">

            <!--This is my header I would like another gradietn -->

        </BoxView>

        <BoxView Grid.Row="1" Color="Blue">

            <!--in this section I will put a collection view and I want particular gradient -->

        </BoxView>

        <BoxView Grid.Row="2" Color="Red">

            <!--in this section will be my footer with another gradient -->

        </BoxView>

    </Grid>

which produces 

[Rachel A]

Hi Dev, 

 

We cannot add the SfGradientView inside BoxView as it is also type of View. So, you can add the SfGradientView inside the Grid instead of BoxView as in the below code snippet. 

 

<Grid RowSpacing="0"> 

        <Grid.RowDefinitions> 

            <RowDefinition Height="25*" /> 

            <RowDefinition Height="65*" /> 

            <RowDefinition Height="10*" /> 

        </Grid.RowDefinitions> 

 

 

        <Grid Grid.Row="0" > 

            <!--This is my header I would like another gradietn --> 

                <sync1:SfGradientView > 

                <sync1:SfGradientView.BackgroundBrush> 

                    <sync1:SfLinearGradientBrush> 

                        <sync1:SfLinearGradientBrush.GradientStops> 

                            <sync1:SfGradientStop Color="#2d265b" Offset="0.0" /> 

                            <sync1:SfGradientStop Color="#b8495c" Offset="1.0" /> 

                        </sync1:SfLinearGradientBrush.GradientStops> 

                    </sync1:SfLinearGradientBrush> 

                </sync1:SfGradientView.BackgroundBrush> 

            </sync1:SfGradientView> 

            </Grid> 

        

        <Grid Grid.Row="1" > 

 

            <!--in this section I will put a collection view and I want particular gradient --> 

            <sync1:SfGradientView > 

                <sync1:SfGradientView.BackgroundBrush> 

                    <sync1:SfLinearGradientBrush> 

                        <sync1:SfLinearGradientBrush.GradientStops> 

                           

                            <sync1:SfGradientStop Color="Red" Offset="0.25" /> 

                            <sync1:SfGradientStop Color="Gold" Offset="1" /> 

                        </sync1:SfLinearGradientBrush.GradientStops> 

                    </sync1:SfLinearGradientBrush> 

                </sync1:SfGradientView.BackgroundBrush> 

            </sync1:SfGradientView> 

        </Grid> 

        <Grid Grid.Row="2"> 

 

            <!--in this section will be my footer with another gradient --> 

            <sync1:SfGradientView > 

                <sync1:SfGradientView.BackgroundBrush> 

                    <sync1:SfLinearGradientBrush> 

                        <sync1:SfLinearGradientBrush.GradientStops> 

                           

                            <sync1:SfGradientStop Color="Blue" Offset="0.25" /> 

                            <sync1:SfGradientStop Color="Orange" Offset="0.75" /> 

                            

                        </sync1:SfLinearGradientBrush.GradientStops> 

                    </sync1:SfLinearGradientBrush> 

                </sync1:SfGradientView.BackgroundBrush> 

            </sync1:SfGradientView> 

        </Grid> 

    </Grid> 

 

Output: 

 

 

Note: If you want to add any other views, you can add it as a child to the Grid but the gradient view as to be the last child. 

 

You can refer the documentation to know information about gradient view. 

https://help.syncfusion.com/xamarin/sfgradientview/getting-started 

 

Please let us know if you have any concerns. 

 

Thanks, 

Rachel.

[mobileguy]

Brilliant!!!

That is exactly what I was after

Many thanks

[Rachel A]

Hi Dev, 

 

We are glad that the reported problem resolved at your end.  

 

Please let us know if you have any further queries. 

 

Thanks, 

Rachel. 

[mobileguy]

Hi

Wondering if you can help. Cannot see any text in the menu,as if the gradient covers it.

I get this error only on a phisical device and not on emulator. Simplified code for clarity and readability

hopefully I am doing somethig silly.below is same sample code. All I did was to put the listview . I have just put some silly colors for testing.

I have attached a file as it was not pasting correctly.

Is there an order in which the gradient has to be put in? Many thanks for any suggestions

Attachment: GridWithGradient_74d4fb5e.zip

[Rachel A]

Hi Dev, 

 

As we have already mentioned in the previous response the gradient view as to be the last child in the children collection of the Grid. Please find the modified code snippet below. 

 

[XAML] 

 

  <Grid RowSpacing="0"> 

        <Grid.RowDefinitions> 

            <RowDefinition Height="25*" /> 

            <RowDefinition Height="65*" /> 

            <RowDefinition Height="10*" /> 

        </Grid.RowDefinitions> 

 

        <Grid Grid.Row="0" > 

            <sync1:SfGradientView > 

                <sync1:SfGradientView.BackgroundBrush> 

                    <sync1:SfLinearGradientBrush> 

                        <sync1:SfLinearGradientBrush.GradientStops> 

                            <sync1:SfGradientStop Color="white" Offset="0.0" /> 

                            <sync1:SfGradientStop Color="white" Offset="1.0" /> 

                        </sync1:SfLinearGradientBrush.GradientStops> 

                    </sync1:SfLinearGradientBrush> 

                </sync1:SfGradientView.BackgroundBrush> 

            </sync1:SfGradientView> 

        </Grid> 

 

        <Grid Grid.Row="1" > 

            <sync1:SfGradientView > 

                                    <sync1:SfGradientView.BackgroundBrush> 

                                           <sync1:SfLinearGradientBrush> 

                                                  <sync1:SfLinearGradientBrush.GradientStops> 

 

                                                         <sync1:SfGradientStop Color="White" Offset="0.0" /> 

                                                         <sync1:SfGradientStop Color="PaleTurquoise" Offset="1.0" /> 

                                                  </sync1:SfLinearGradientBrush.GradientStops> 

                                           </sync1:SfLinearGradientBrush> 

                                    </sync1:SfGradientView.BackgroundBrush> 

                             </sync1:SfGradientView> 

 

            <ListView  x:Name="list"  

                             WidthRequest="40" 

                             HeightRequest="40"  

                             SeparatorVisibility="None" 

                             HasUnevenRows="True"> 

                <ListView.ItemTemplate> 

                    <DataTemplate> 

                        <ViewCell> 

                            <StackLayout VerticalOptions="FillAndExpand" 

                                                                                Orientation="Horizontal" 

                                                                                Padding="20,10,0,10" 

                                                                                Spacing="20"> 

 

                                <Image Source="{Binding Icon}" 

                                                                           WidthRequest="20" 

                                                                           HeightRequest="20" 

                                                                           VerticalOptions="Center" /> 

 

                                <Label Text="{Binding Title}" 

                                                                           FontSize="Medium" 

                                                                           VerticalOptions="Center" 

                                                                           TextColor="Black"/> 

                            </StackLayout> 

                        </ViewCell> 

                    </DataTemplate> 

                </ListView.ItemTemplate> 

            </ListView>            

        </Grid> 

 

        <Grid Grid.Row="2"> 

            <!--in this section will be my footer with another gradient --> 

            <sync1:SfGradientView > 

                <sync1:SfGradientView.BackgroundBrush> 

                    <sync1:SfLinearGradientBrush> 

                        <sync1:SfLinearGradientBrush.GradientStops> 

                            <sync1:SfGradientStop Color="White" Offset="0.0" /> 

                            <sync1:SfGradientStop Color="GreenYellow" Offset="1.0" /> 

                        </sync1:SfLinearGradientBrush.GradientStops> 

                    </sync1:SfLinearGradientBrush> 

                </sync1:SfGradientView.BackgroundBrush> 

            </sync1:SfGradientView> 

            <Label Text="AAAAA"></Label> 

        </Grid> 

    </Grid> 

 

 

Output: 

 

 

 

 

Please let us know if you have any concerns. 

 

Thanks, 

Rachel. 

[Mobile Team]

Apologies.Missed that "NOTE"!!.

Got it now. Grateful for your response

[Rachel A]

Hi Dev, 

 

Thanks for the confirmation. 

 

Please let us know if you need any further assistance. 

 

Thanks, 

Rachel.