locked
How to position a Circle Image above and between 2 ScrollLayout RRS feed

  • Question

  • User167645 posted

    Hello,

    I work on a Xamarin.Forms app containing a HomePage based on: - an Image at the top background of the screen - a list of items displayed in a ScrollView

    The ScrollView can recover the Image if the list contain many informations.

    This looks like this:

    Video

    The XAML looks like this:

    <Grid RowSpacing="0"
            BackgroundColor="{StaticResource Gray-050}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid Grid.Row="1">
            <!--  Header view  -->
            <ScrollView>
                <ContentView x:Name="headerView"
                             HorizontalOptions="FillAndExpand"
                             VerticalOptions="FillAndExpand">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <!-- the BoxView will be replaced by an Image -->
                        <BoxView x:Name="headerImage"
                                    HeightRequest="280"
                                    BackgroundColor="Yellow" />
                    </Grid>
                </ContentView>
            </ScrollView>
    
            <!--  List view  -->
            <ScrollView HorizontalOptions="FillAndExpand"
                        VerticalOptions="FillAndExpand">
                <Grid ColumnSpacing="0"
                      RowSpacing="0"
                      VerticalOptions="FillAndExpand">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="140" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Grid Grid.Row="1">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <!-- Main container -->
                        <yummy:PancakeView CornerRadius="16,16,0,0"
                                           Padding="0,10,0,0"
                                           BackgroundColor="{StaticResource Gray-050}"
                                           Grid.Row="1">
                            <StackLayout BackgroundColor="Transparent"
                                         Spacing="16" Margin="16">
    
                                <!-- Phone container -->
                                <yummy:PancakeView Style="{StaticResource YummyHomeFrame}"
                                                    Padding="16">
                                    <Grid RowSpacing="0">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="*" />
                                            <RowDefinition Height="*" />
                                        </Grid.RowDefinitions>
                                        <Label Style="{StaticResource HomePageHeaderLabelStyle}"
                                                Text="Phone Number" />
                                        <Label Grid.Row="1"
                                                Style="{StaticResource HomePageLabelStyle}"
                                                Text="+33 6 20 10 70 40"  />
                                    </Grid>
                                </yummy:PancakeView>
    
                                <!-- Other containers -->
    
                            </StackLayout>
                        </yummy:PancakeView>
                    </Grid>
                </Grid>
            </ScrollView>
        </Grid>
    </Grid>
    

    I would like to display a circle logo between the 2 ScrollViews, just above the MainContainer, something like this:

    Expected rendering

    But I don't have managed to achieve this, and I don't know if it's possible...

    Thursday, November 12, 2020 7:31 PM

Answers

  • User167645 posted

    There are 2 solutions: with or without RelativeLayout.

    The version without RelativeLayout looks like:

    <Grid RowSpacing="0"
            BackgroundColor="LightGray"
            x:Name="mainGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid Grid.Row="1">
            <!--  Header view  -->
            <ScrollView>
                <ContentView x:Name="headerView"
                                HorizontalOptions="FillAndExpand"
                                VerticalOptions="FillAndExpand">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <!-- the BoxView can be replaced by an Image -->
                        <BoxView x:Name="headerImage"
                                    HeightRequest="280"
                                    BackgroundColor="Yellow" />
                    </Grid>
                </ContentView>
            </ScrollView>
                <!-- Content View -->
            <ScrollView HorizontalOptions="FillAndExpand"
                        VerticalOptions="FillAndExpand">
                <Grid ColumnSpacing="0"
                        RowSpacing="0"
                        VerticalOptions="FillAndExpand">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="140" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Grid Grid.Row="1">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <!-- Frame Container-->
                        <Frame x:Name="MainFrame"
                                CornerRadius="16"
                                Padding="0,10,0,0"
                                BackgroundColor="LightGray"
                                Grid.Row="1">
                            <StackLayout BackgroundColor="Transparent"
                                            Spacing="16" Margin="16,48,16,16">
                                <!-- Phone Frame -->
                                <Frame Padding="16">
                                    <Grid RowSpacing="0">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="*" />
                                            <RowDefinition Height="*" />
                                        </Grid.RowDefinitions>
                                        <Label Text="Phone Number" />
                                        <Label Grid.Row="1"
                                                Text="+33 6 20 10 70 40"  />
                                    </Grid>
                                </Frame>
                                <!-- Other Frames -->
                                <!-- ... -->
                            </StackLayout>
                        </Frame>
                        <!-- No RelativeLayout positioned item -->
                        <BoxView Grid.Row="1"
                                    CornerRadius="45"
                                    BackgroundColor="DarkBlue"
                                    WidthRequest="90" HeightRequest="90"
                                    VerticalOptions="Start" HorizontalOptions="Center"
                                    Margin="0,-45,0,0" />
                    </Grid>
                </Grid>
            </ScrollView>
        </Grid>
    </Grid>
    

    The version with RelativeLayout looks like:

    <Grid RowSpacing="0"
            BackgroundColor="LightGray"
            x:Name="mainGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid Grid.Row="1">
            <!--  Header View  -->
            <ScrollView>
                <ContentView x:Name="headerView"
                                HorizontalOptions="FillAndExpand"
                                VerticalOptions="FillAndExpand">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <!-- the BoxView can be replaced by an Image -->
                        <BoxView x:Name="headerImage"
                                    HeightRequest="280"
                                    BackgroundColor="Yellow" />
                    </Grid>
                </ContentView>
            </ScrollView>
            <!-- Content View -->
            <ScrollView HorizontalOptions="FillAndExpand"
                        VerticalOptions="FillAndExpand">
                <Grid ColumnSpacing="0"
                        RowSpacing="0"
                        VerticalOptions="FillAndExpand">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="140" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <StackLayout Grid.Row="1">
                        <RelativeLayout>
                            <!-- Frame container -->
                            <Frame x:Name="MainFrame"
                                    CornerRadius="16"
                                    Padding="0,10,0,0"
                                    BackgroundColor="LightGray"
                                            Grid.Row="1">
                                <StackLayout BackgroundColor="Transparent"
                                            Spacing="16" Margin="16,48,16,16">
                                    <!-- Phone Frame -->
                                    <Frame Padding="16">
                                        <Grid RowSpacing="0">
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="*" />
                                                <RowDefinition Height="*" />
                                            </Grid.RowDefinitions>
                                            <Label Text="Phone Number" />
                                            <Label Grid.Row="1"
                                                Text="+33 6 20 10 70 40"  />
                                        </Grid>
                                    </Frame>
                                    <!-- Other Frames -->
                                    <!-- ... -->
                                </StackLayout>
                            </Frame>
                            <!-- RelativeLayout positioned item -->
                            <BoxView CornerRadius="45"
                                    BackgroundColor="DarkBlue"
                                    WidthRequest="90" HeightRequest="90"
                                    VerticalOptions="Center" HorizontalOptions="Center"
                                    RelativeLayout.XConstraint="{ConstraintExpression 
                                                                    Type=RelativeToParent,
                                                                    Property=Width, 
                                                                    Factor=0.5,
                                                                    Constant=-45}"
                                    RelativeLayout.YConstraint="{ConstraintExpression
                                                                    Type=RelativeToView,
                                                                    ElementName=MainFrame,
                                                                    Property=Y,Constant=-45}" />
                        </RelativeLayout>
                    </StackLayout>
                </Grid>
            </ScrollView>
        </Grid>
    </Grid>
    
    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Friday, November 13, 2020 3:47 PM

All replies

  • User371688 posted

    For this, you can use RelativeLayout to achieve this function:

    Please refer to the following code, you can modify the code according to your requirement:

    ```

            </Grid>
        </Grid>
        <ImageButton 
                     BackgroundColor="DodgerBlue"
                     HeightRequest="100"
                     WidthRequest="100"
                     CornerRadius="50"
                     Padding="15"
                     RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=mygrid, Property=Width, Factor=0.4}"
                     RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=mygrid, Property=Height, Factor=0.18}" 
                      />
    </RelativeLayout>
    

    ```

    The result is:

    Friday, November 13, 2020 7:46 AM
  • User167645 posted

    @jezh said: For this, you can use RelativeLayout to achieve this function:

    Please refer to the following code, you can modify the code according to your requirement:

    ```

            </Grid>
        </Grid>
        <ImageButton 
                     BackgroundColor="DodgerBlue"
                     HeightRequest="100"
                     WidthRequest="100"
                     CornerRadius="50"
                     Padding="15"
                     RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=mygrid, Property=Width, Factor=0.4}"
                     RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=mygrid, Property=Height, Factor=0.18}" 
                      />
    </RelativeLayout>
    

    ```

    The result is:

    Hi @jezh
    Thank you for your suggestion. The button is well displayed at startup, but I need that the Circle is scrolling with the ListView, as we can see on the GIF attached in the description.

    Friday, November 13, 2020 8:00 AM
  • User167645 posted

    There are 2 solutions: with or without RelativeLayout.

    The version without RelativeLayout looks like:

    <Grid RowSpacing="0"
            BackgroundColor="LightGray"
            x:Name="mainGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid Grid.Row="1">
            <!--  Header view  -->
            <ScrollView>
                <ContentView x:Name="headerView"
                                HorizontalOptions="FillAndExpand"
                                VerticalOptions="FillAndExpand">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <!-- the BoxView can be replaced by an Image -->
                        <BoxView x:Name="headerImage"
                                    HeightRequest="280"
                                    BackgroundColor="Yellow" />
                    </Grid>
                </ContentView>
            </ScrollView>
                <!-- Content View -->
            <ScrollView HorizontalOptions="FillAndExpand"
                        VerticalOptions="FillAndExpand">
                <Grid ColumnSpacing="0"
                        RowSpacing="0"
                        VerticalOptions="FillAndExpand">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="140" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Grid Grid.Row="1">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <!-- Frame Container-->
                        <Frame x:Name="MainFrame"
                                CornerRadius="16"
                                Padding="0,10,0,0"
                                BackgroundColor="LightGray"
                                Grid.Row="1">
                            <StackLayout BackgroundColor="Transparent"
                                            Spacing="16" Margin="16,48,16,16">
                                <!-- Phone Frame -->
                                <Frame Padding="16">
                                    <Grid RowSpacing="0">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="*" />
                                            <RowDefinition Height="*" />
                                        </Grid.RowDefinitions>
                                        <Label Text="Phone Number" />
                                        <Label Grid.Row="1"
                                                Text="+33 6 20 10 70 40"  />
                                    </Grid>
                                </Frame>
                                <!-- Other Frames -->
                                <!-- ... -->
                            </StackLayout>
                        </Frame>
                        <!-- No RelativeLayout positioned item -->
                        <BoxView Grid.Row="1"
                                    CornerRadius="45"
                                    BackgroundColor="DarkBlue"
                                    WidthRequest="90" HeightRequest="90"
                                    VerticalOptions="Start" HorizontalOptions="Center"
                                    Margin="0,-45,0,0" />
                    </Grid>
                </Grid>
            </ScrollView>
        </Grid>
    </Grid>
    

    The version with RelativeLayout looks like:

    <Grid RowSpacing="0"
            BackgroundColor="LightGray"
            x:Name="mainGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid Grid.Row="1">
            <!--  Header View  -->
            <ScrollView>
                <ContentView x:Name="headerView"
                                HorizontalOptions="FillAndExpand"
                                VerticalOptions="FillAndExpand">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <!-- the BoxView can be replaced by an Image -->
                        <BoxView x:Name="headerImage"
                                    HeightRequest="280"
                                    BackgroundColor="Yellow" />
                    </Grid>
                </ContentView>
            </ScrollView>
            <!-- Content View -->
            <ScrollView HorizontalOptions="FillAndExpand"
                        VerticalOptions="FillAndExpand">
                <Grid ColumnSpacing="0"
                        RowSpacing="0"
                        VerticalOptions="FillAndExpand">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="140" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <StackLayout Grid.Row="1">
                        <RelativeLayout>
                            <!-- Frame container -->
                            <Frame x:Name="MainFrame"
                                    CornerRadius="16"
                                    Padding="0,10,0,0"
                                    BackgroundColor="LightGray"
                                            Grid.Row="1">
                                <StackLayout BackgroundColor="Transparent"
                                            Spacing="16" Margin="16,48,16,16">
                                    <!-- Phone Frame -->
                                    <Frame Padding="16">
                                        <Grid RowSpacing="0">
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="*" />
                                                <RowDefinition Height="*" />
                                            </Grid.RowDefinitions>
                                            <Label Text="Phone Number" />
                                            <Label Grid.Row="1"
                                                Text="+33 6 20 10 70 40"  />
                                        </Grid>
                                    </Frame>
                                    <!-- Other Frames -->
                                    <!-- ... -->
                                </StackLayout>
                            </Frame>
                            <!-- RelativeLayout positioned item -->
                            <BoxView CornerRadius="45"
                                    BackgroundColor="DarkBlue"
                                    WidthRequest="90" HeightRequest="90"
                                    VerticalOptions="Center" HorizontalOptions="Center"
                                    RelativeLayout.XConstraint="{ConstraintExpression 
                                                                    Type=RelativeToParent,
                                                                    Property=Width, 
                                                                    Factor=0.5,
                                                                    Constant=-45}"
                                    RelativeLayout.YConstraint="{ConstraintExpression
                                                                    Type=RelativeToView,
                                                                    ElementName=MainFrame,
                                                                    Property=Y,Constant=-45}" />
                        </RelativeLayout>
                    </StackLayout>
                </Grid>
            </ScrollView>
        </Grid>
    </Grid>
    
    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Friday, November 13, 2020 3:47 PM