How to make "RefreshView" friends with "AbsoluteLayout"

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.

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 31,976 Reputation points Microsoft Vendor

2024-10-09T06:22:53.58+00:00

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

On which platform? iOS/ Android or Windows? I see your page is derived from base(), would you mind sharing more code snippets? And how did you add the refresh view?

валера карманов 361

public class DashboardPage : ContentPage
{
	protected ImageButton 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
	};
	protected Border fabBorder = new Border
	{
		Stroke = Color.FromRgba("#567ea7"),
		StrokeShape = new RoundRectangle {
			CornerRadius = 50
		}
	};
	protected RefreshView refresh = new RefreshView();
	private VerticalStackLayout _content;
    public DashboardPage()
    {
        _content = new VerticalStackLayout {
			Spacing = 15,
			Padding = new Thickness(15),
			HorizontalOptions = LayoutOptions.Fill
        };
		CollectionView collectionView = new CollectionView();
		collectionView.ItemsSource = new List<Person> {
			new  Person { Name="Tom", Age=38, Company ="Microsoft" },
			new  Person { Name="Sam", Age=25,  Company ="Google" },
			new  Person { Name="Bob", Age=42,  Company ="JetBrains" },
			new  Person { Name="Alice", Age=33,  Company ="Microsoft" },
			new  Person { Name="Kate", Age=29,  Company ="Google" },
			new  Person { Name="Amelia", Age=35,  Company ="JetBrains" },
		};
		collectionView.ItemTemplate = new DataTemplate(() => {
			var nameLabel = new Label {
				FontSize = 20,
				TextColor = Color.FromArgb("#006064"),
				Margin = 10
			};
			nameLabel.SetBinding(Label.TextProperty, "Name");
			var ageLabel = new Label();
			ageLabel.SetBinding(Label.TextProperty, new Binding {
				Path = "Age", StringFormat = "Age: {0}"
			});
			var companyLabel = new Label();
			companyLabel.SetBinding(Label.TextProperty, "Company");
			return new StackLayout {
				Children = { nameLabel, ageLabel, companyLabel },
				Margin = new Thickness(15, 10)
			};
		});
		refresh.Content = collectionView;
		AbsoluteLayout.SetLayoutBounds(
			fabBorder, new Rect(.9, .95, 50, 50)
		);
		AbsoluteLayout.SetLayoutFlags(
			fabBorder, AbsoluteLayoutFlags.PositionProportional
		);
		fabBorder.Content = fabButton;
		Content = new AbsoluteLayout {
			Children = { refresh, fabBorder }
		};
    }
}
public class Person
{
	public string Name { get; set; } = "";
	public int Age { get; set; }
	public string Company { get; set; } = "";
}

валера карманов 361 Reputation points

2024-10-09T16:56:19.1966667+00:00

Here is an example of code for one page. As I said, the "RefreshView" element is displayed on the page, but it seems to me that you need to specify the desired position for it so that it appears on the page. But it needs to be displayed in full width and height
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

1 answer

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 31,976 Reputation points Microsoft Vendor

2024-10-10T09:10:45.2433333+00:00
Hello,

After testing, the RefreshView(with Collectionview) will display the full width when changing the Content from AbsoluteLayout to StackLayout.

Content = new StackLayout { Children = { refresh, fabBorder } };

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.
Please sign in to rate this answer.
валера карманов 361 Reputation points

2024-10-10T12:27:09.37+00:00

Then how to display "fabBorder" on the bottom right?

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 31,976 Reputation points Microsoft Vendor

2024-10-11T01:23:51.65+00:00

Children = { refresh, fabBorder }, the fabBorder will be the bottom. Please see the appearance on my side. If you have any questions, please feel free to let me know.

валера карманов 361 Reputation points

2024-10-11T04:51:19.4866667+00:00

No, that's not it. The button should be placed on the bottom right, but it's just at the bottom.

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 31,976 Reputation points Microsoft Vendor

2024-10-11T07:18:54.1766667+00:00

I got it. The refreshview display normally now, but you need the border on the left of the page. Could you describe in detailed about your expected UI so that we can determine if we can set another layout?

валера карманов 361 Reputation points

2024-10-11T11:37:16.5766667+00:00

I want the same button in the same place, but so that the page content is in all sizes

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 31,976 Reputation points Microsoft Vendor

2024-10-14T05:29:46.6133333+00:00

I see, you want the refreshview(with CollectionView) to fill the entire screen, and the button on the right to float above the refreshview, right?

валера карманов 361 Reputation points

2024-10-14T12:08:18.4666667+00:00

Yes, that's exactly it.

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 31,976 Reputation points Microsoft Vendor

2024-10-15T09:48:35.75+00:00

Thanks for your confirmation. I tried to create the overlay button by setting ZIndex and IWindowOverlay, but without results so far. You could try adding a PageOverLay, and I will investigate further.

валера карманов 361 Reputation points

2024-10-15T16:11:17.25+00:00

Sorry, but I have no idea what you're talking about.

Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 31,976 Reputation points Microsoft Vendor

2024-10-17T08:06:29.4+00:00

I mean creating a PageOverLay. Do you only need the feature on Android platform?

валера карманов 361 Reputation points

2024-10-17T12:25:57.8366667+00:00

For now yes

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 31,976 Reputation points Microsoft Vendor

2024-10-18T09:48:06.23+00:00

Ok, I still try to create handler to add a new window. Also, I noticed that you could add the button on Windows platform, would you mind telling me how you implement this feature on Windows?

валера карманов 361 Reputation points

2024-10-19T05:58:03.72+00:00

Also, I noticed that you could add the button on Windows platform, would you mind telling me how you implement this feature on Windows?

I'm embarrassed to ask where you dug this up?
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

How to make "RefreshView" friends with "AbsoluteLayout"

1 answer

Your answer