How to make "RefreshView" friends with "AbsoluteLayout"

Question

public CollectionPage() : base()
{
	collection.SelectionChanged += _OnSelectionChanged;
	collection.ItemTemplate = GetDataTemplate();

	LoadedCollection();

	refresh.Command = new Command(LoadedCollection);
	refresh.Content = collection;

	var fabButton = new ImageButton {
		Padding = new Thickness(5),
		BackgroundColor = Color.FromRgba("#567ea7"),
		Source = ImageSource.FromFile("add_icon.png"),
		HorizontalOptions = LayoutOptions.Center,
		VerticalOptions = LayoutOptions.Center,
		WidthRequest = 60, HeightRequest = 60
	};

	AbsoluteLayout.SetLayoutBounds(
		fabButton, new Rect(.9, .95, 60, 60)
	);

	AbsoluteLayout.SetLayoutFlags(
		fabButton, AbsoluteLayoutFlags.PositionProportional
	);

	Content = new AbsoluteLayout {
		Children = { refresh, fabButton }
	};
}

I can't display the "RefreshView" element in full size. It seems to me that I need to set the "SetLayoutBounds" and "SetLayoutFlags" properties for "RefreshView" so that this element fills the entire layout size.

The element itself is displayed, but it is somewhere in negative positions.

Answer 1

Hello,

Please use Gird and columspan to implement the overlay feature, and you can refer to the following structure. I understand you write the UI in C# instead of Xaml, so I added some comments on the code snippets, you can refer to it.

<ContentPage ...>
<!--This Grid is the Page's Content  -->
<Grid>

<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<!--set some Rows and columns -->
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>

<ContentView 
            x:Name="MyBackGround"
          Grid.ColumnSpan="10"
          Grid.RowSpan="5"
          BackgroundColor="Green"
          HorizontalOptions="FillAndExpand"
          VerticalOptions="FillAndExpand">
 <!--this ContentView is for the RefreshView with CollectionView. You could set MyBackGround.Content = refresh in C#-->
            
</ContentView>
 
 
        <!--the overlay  -->
<ContentView 
                 Grid.Column="8"
                 Grid.Row="3"
                 BackgroundColor="Transparent"
                 HorizontalOptions="FillAndExpand"
                 VerticalOptions="FillAndExpand">
  <!--this view is for your border with the button, you can replace the following button  -->
            <Button 
                    HeightRequest="40"  WidthRequest="40" />
</ContentView>
 
    </Grid>
</ContentPage>
 

Best Regards,

Wenyan Zhang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.