We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

146386 Aug 2,2019 06:14 AM UTC Aug 5,2019 11:26 AM UTC Xamarin.Forms 7
loading
Tags: SfGradientView
mobileguy
Asked On August 2, 2019 06:14 AM UTC

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 [Syncfusion]
Replied On August 2, 2019 10:28 AM UTC

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. 
 
Please let us know if you have any concerns. 
 
Thanks, 
Rachel.

mobileguy
Replied On August 2, 2019 11:27 AM UTC

Brilliant!!!
That is exactly what I was after
Many thanks


Rachel A [Syncfusion]
Replied On August 2, 2019 11:59 AM UTC

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
Replied On August 4, 2019 05:35 PM UTC

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 [Syncfusion]
Replied On August 5, 2019 10:13 AM UTC

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. 


Mark Bateman
Replied On August 5, 2019 10:21 AM UTC

Apologies.Missed that "NOTE"!!.

Got it now. Grateful for your response

Rachel A [Syncfusion]
Replied On August 5, 2019 11:26 AM UTC

Hi Dev, 
 
Thanks for the confirmation. 
 
Please let us know if you need any further assistance. 
 
Thanks, 
Rachel. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon