ScrollView + RelativeLayout + ActivityIndicator = ActivityIndicator != center after scrolling

ManhaoChenManhaoChen NZMember ✭✭
edited May 2016 in Xamarin.Forms

hi all,

i'm trying to do something very basic,
i have a page which displays users profile (see screenshot) i'm trying to make it so that when the user taps "Save" the animation appears in the middle of the content page (do not need to account for the sidebar(drawer)

but at the same time, the data will be in a scrollview and when the user scrolls the ActivityIndicator also moves its position, this is clearly visible in landscape view

2nd thing is i'm also trying to make my entry to use the entire space of the page, but it seems to only use 1/2 any ideas why?

<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:SA="clr-namespace:App1.Resources.layout.CustomControls;assembly=App1" x:Class="App1.ProfilePage"> <ContentPage.ToolbarItems> <ToolbarItem Text="Save" Activated="OnClick" Order="Primary" /> <ToolbarItem Text="Refresh" Activated="OnClick" Order="Secondary" /> <ToolbarItem Text="Discard" Activated="OnClick" Order="Secondary" /> </ContentPage.ToolbarItems> <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"> <ScrollView> <RelativeLayout> <StackLayout x:Name="tblProfile" VerticalOptions="StartAndExpand" Padding="50" HorizontalOptions="FillAndExpand"> <StackLayout Padding="0,20,0,0"> <Label Text="Profile" HorizontalOptions="CenterAndExpand" FontSize="50" FontAttributes="Bold" /> </StackLayout> <StackLayout Padding="0,20,0,0"> <Label Text="Personal Information" FontSize="20" FontAttributes="Bold" TextColor="#33ccff" /> <Label Text="Given name"/> <Entry x:Name="txtGivenName" Text="{Binding GivenName}"/> <Label Text="Family name"/> <Entry x:Name="txtFamilyName" Text="{Binding FamilyName}"/> <Label Text="Email"/> <Entry x:Name="txtEmail" Text="{Binding EmailAddress}"/> </StackLayout> <StackLayout Padding="0,20,0,20"> <Label Text="Phone" FontSize="20" FontAttributes="Bold" TextColor="#33ccff" /> <Label Text="STD"/> <Entry x:Name="txtPhoneSTD" Text="{Binding Phone.STD}" Keyboard="Telephone" /> <Label Text="Local"/> <Entry x:Name="txtPhoneLocal" Text="{Binding Phone.Local}" Keyboard="Telephone"/> <Label Text="IDD"/> <Entry x:Name="txtPhoneIDD" Text="{Binding Phone.IDD}" Keyboard="Telephone"/> </StackLayout> <StackLayout Padding="0,20,0,0"> <Label Text="Address" FontSize="20" FontAttributes="Bold" TextColor="#33ccff" /> <Label Text="Line 1"/> <Entry x:Name="txtAddressLine1" Text="{Binding Address.Line1}"/> <Label Text="Line 2"/> <Entry x:Name="txtAddressLine2" Text="{Binding Address.Line2}"/> <Label Text="Suburb"/> <Entry x:Name="txtSuburb" Text="{Binding Address.Suburb}"/> <Label Text="City"/> <Entry x:Name="txtCity" Text="{Binding Address.City}"/> <Label Text="PostCode"/> <Entry x:Name="txtPostCode" Text="{Binding Address.PostCode}"/> </StackLayout> </StackLayout> <StackLayout x:Name="vwLoading" IsVisible="False" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.4}" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.4}"> <Frame Padding="50" AbsoluteLayout.LayoutFlags="All" Opacity="1.0" BackgroundColor="Blue" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"> <StackLayout> <ActivityIndicator x:Name="actIndicator" /> <Label x:Name="lblProgressStatus" /> </StackLayout> </Frame> </StackLayout> </RelativeLayout> </ScrollView> <SA:FooterNavLayout SelectedPage="profile" /> </StackLayout> </ContentPage>

imageimageimageimage

1.PNG 183.3K
3.PNG 185K
4.PNG 177.4K
2.PNG 184.2K

Best Answers

Answers

  • ManhaoChenManhaoChen NZMember ✭✭
    edited May 2016

    YOU DA MAN!
    thanks for that!!!!

    i now noticed when i click save, i have the animation all working but the scrollview is also scroll-able and when i tap the entry fields the keyboard comes up,
    how can i make it when i tap save it greys the background of the page and make the ui not touchable until the action has completed?

    EDITED:
    i got the idea but i seems the Opacity is being inherited from the RelativeLayout to the Frame, any ideas if i could not inherit it?
    <RelativeLayout x:Name="vwLoading" IsVisible="False" Opacity="0.3" BackgroundColor="#f2f2f2"> <StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.4}" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.4}"> <Frame Padding="50" AbsoluteLayout.LayoutFlags="All" Opacity="1.0" BackgroundColor="Black" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"> <StackLayout> <ActivityIndicator x:Name="actIndicator" /> <Label x:Name="lblProgressStatus" /> </StackLayout> </Frame> </StackLayout> </RelativeLayout>
    image

  • marcfermarcfer BRMember ✭✭

    @ManhaoChen said:
    YOU DA MAN!
    thanks for that!!!!

    i now noticed when i click save, i have the animation all working but the scrollview is also scroll-able and when i tap the entry fields the keyboard comes up,
    how can i make it when i tap save it greys the background of the page and make the ui not touchable until the action has completed?

    EDITED:
    i got the idea but i seems the Opacity is being inherited from the RelativeLayout to the Frame, any ideas if i could not inherit it?
    <RelativeLayout x:Name="vwLoading" IsVisible="False" Opacity="0.3" BackgroundColor="#f2f2f2"> <StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.4}" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.4}"> <Frame Padding="50" AbsoluteLayout.LayoutFlags="All" Opacity="1.0" BackgroundColor="Black" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"> <StackLayout> <ActivityIndicator x:Name="actIndicator" /> <Label x:Name="lblProgressStatus" /> </StackLayout> </Frame> </StackLayout> </RelativeLayout>
    image

    Did you get ?

Sign In or Register to comment.