question

JesseKnott-2239 avatar image
0 Votes"
JesseKnott-2239 asked JesseKnott-2239 answered

AboluteLayout not overlaying controls.

Hello, I am trying to get a BusyIndicator to overlay the content of my screen.
When executing long DB Queries, I want to display a busy indicator.
To display the indicator I am attempting to use an absolute layout tag, but it is only shifting the rest of the content to below the content that it being waited on.

This is the code I am using for the display

   <ScrollView AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
             <StackLayout HorizontalOptions="Fill" Orientation="Vertical">
                 <busyindicator:SfBusyIndicator x:Name="busyindicator"
                     AbsoluteLayout.LayoutBounds="0.5,0.5,0.5,0.5"
                     AbsoluteLayout.LayoutFlags="All"
                     AnimationType="DoubleCircle"
                     IsBusy="{Binding Path=IsBusy, Mode=TwoWay}"
                     IsEnabled="{Binding Path=IsBusy, Mode=TwoWay}"
                     IsVisible="{Binding Path=IsBusy, Mode=TwoWay}"
                     ViewBoxHeight="150"
                     ViewBoxWidth="150" />
    
                 <!--  KIWI Need to get GetStringResource working in here.  -->
                 <Label x:Name="lblNoInventory"
                     FontSize="18"
                     HorizontalOptions="CenterAndExpand"
                     HorizontalTextAlignment="Center"
                     IsVisible="{Binding Converter={StaticResource VisibleFromCount}, Path=Bullets}"
                     Style="{StaticResource Key=BorderLabel}"
                     Text="{x:Static resx:Resources.labelSuppliesBulletsNoInventory}"
                     VerticalOptions="Start" />
    
                 <datagrid:SfDataGrid x:Name="dgBullets"
                     AbsoluteLayout.LayoutBounds="0,0,1,1"
                     AbsoluteLayout.LayoutFlags="None"
                     AllowEditing="True"
                     AllowMultiSorting="True"
                     AllowSorting="True"
                     AutoGenerateColumns="False"
                     ColumnSizer="Star"
                     ItemsSource="{Binding Path=Bullets}"
                     VerticalOptions="FillAndExpand" />
             </StackLayout>
         </ScrollView>

The control is just pushing the other content down, and not overlaying the controls.
I have tried to post this multiple times, but the site will not let me post it, so I am trying to post this in multiple parts now.
This of course would be part one.

dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

JesseKnott-2239 avatar image
0 Votes"
JesseKnott-2239 answered

I have finally figured it out. I went back to using the AbsoluteLayout but I have the desired outcome.

Here is the code I am using.

 <ContentPage.Content>
         <ScrollView>
    
             <StackLayout HorizontalOptions="FillAndExpand" Orientation="Vertical">
                 <!--  KIWI Need to get GetStringResource working in here.  -->
                 <Label x:Name="lblNoInventory"
                     FontSize="{DynamicResource BorderFont}"
                     HorizontalOptions="CenterAndExpand"
                     HorizontalTextAlignment="Center"
                     IsVisible="{Binding Converter={StaticResource VisibleFromCount}, Path=BrassInventoryList}"
                     Style="{StaticResource Key=BorderLabel}"
                     Text="{x:Static resx:Resources.labelSuppliesBrassNoInventory}"
                     VerticalOptions="Start" />
                 <AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
    
                     <datagrid:SfDataGrid x:Name="dgBrass"
                         AbsoluteLayout.LayoutBounds="0,0,1,1"
                         AbsoluteLayout.LayoutFlags="All"
                         AllowEditing="True"
                         AllowMultiSorting="True"
                         AllowSorting="True"
                         AutoGenerateColumns="False"
                         ColumnSizer="Star"
                         HorizontalOptions="FillAndExpand"
                         IsVisible="{Binding Path=!IsBusy, Mode=TwoWay}"
                         ItemsSource="{Binding Path=BrassInventoryList, Mode=TwoWay}"
                         VerticalOptions="FillAndExpand" />
    
                     <busyindicator:SfBusyIndicator x:Name="busyindicator"
                         AbsoluteLayout.LayoutBounds="0.5,0.5,0.5,0.5"
                         AbsoluteLayout.LayoutFlags="All"
                         AnimationType="DoubleCircle"
                         IsBusy="{Binding Path=IsBusy, Mode=TwoWay}"
                         IsEnabled="{Binding Path=IsBusy, Mode=TwoWay}"
                         IsVisible="{Binding Path=IsBusy, Mode=TwoWay}"
                         ViewBoxHeight="250"
                         ViewBoxWidth="250" />
                 </AbsoluteLayout>
             </StackLayout>
         </ScrollView>
     </ContentPage.Content>

Thanks for the help!

Cheers!

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

JesseKnott-2239 avatar image
0 Votes"
JesseKnott-2239 answered

Here is the second part of this post.

To control the display of the BusyIndicator I use this code, which is within the base class for my viewmodels


         private bool isBusy;
    
         /// <summary>
         /// Gets or sets a value indicating whether IsBusy
         /// Gets a value indicating whether IsBusy set flag if form is busy..
         /// </summary>
         public bool IsBusy
         {
             get => isBusy;
    
             set
             {
                 SetProperty(ref isBusy, value, nameof(IsBusy));
                 OnPropertyChanged(nameof(IsBusy));
             }
         }

         /// <summary>
         /// Waiting Display.
         /// </summary>
         internal async Task DisplayBusyIndicator()
         {
             try
             {
                 if (IsBusy == true)
                     return;
    
                 IsBusy = true;
                 OnPropertyChanged(nameof(IsBusy));
                 RaisePropertyChanged(nameof(IsBusy));
    
                 await CoreGlobals.dbSemaphore.WaitAsync();
    
                 IsBusy = !IsBusy;
                 OnPropertyChanged(nameof(IsBusy));
                 RaisePropertyChanged(nameof(IsBusy));
             }
             catch (Exception ex)
             {
                 DebugTools.LogException(ex);
             }
         }

When I load a page and have to execute a long query, I execute this code (this is in the inherited class viewmodel)

         /// <summary>
         /// The ExecuteLoadItemsCommand
         /// </summary>
         /// <returns>The <see cref="Task"/></returns>
         internal async Task ExecuteLoadItemsCommand()
         {
             try
             {
                 await DisplayBusyIndicator();
    
                 Powders = await PowderRepo.GetItems();
                 foreach (var b in Powders)
                 {
                     b.Photos = new ObservableCollection<Photos>(await PhotoRepo.GetItemByParentID(b.Id, (int)RecordCatagory.Supplies, (int)RecordType.Powder).ConfigureAwait(true));
                 }
    
                 CoreGlobals.dbSemaphore.Release();

                 //Refresh the items list for the main screen
                 OnPropertyChanged(nameof(Powders));
             }
             catch (Exception ex)
             {
                 DebugTools.LogException(ex);
             }
         }


The process of displaying the busy indicator seems to perform (albeit a bit unpredictably. The queries are executing quickly, and the indicator is sometimes displaying when I would expect it not to. I need to take a look at it in more detail to make sure the semaphores are behaving as I expected. )

I am sure I am simply missing something with the implementation for the AbsoluteLayout. I was hoping for the BusyIndicator to overlay the table, but it is shifting the table down and showing the indicator above it.

Any ideas or pointers would be most appreciated! (as a side note, if anyone has a better way that I can go about handling the BusyIndicator that would be appreciated too!)

Cheers!

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

JessieZhang-2116 avatar image
0 Votes"
JessieZhang-2116 answered JesseKnott-2239 commented

Hello,


Welcome to our Microsoft Q&A platform!

I was hoping for the BusyIndicator to overlay the table, but it is shifting the table down and showing the indicator above it.

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

A RelativeLayout is used to position and size children relative to properties of the layout or sibling elements. This allows UIs to be created that scale proportionally across device sizes. In addition, unlike some other layout classes, RelativeLayout is able to position children so that overlap.

I created a simple demo to simulate this function using the following code:

 <RelativeLayout HorizontalOptions="Fill" >
     <!--  KIWI Need to get GetStringResource working in here.  -->
     <Label x:Name="lblNoInventory"
              FontSize="18"
              HorizontalOptions="CenterAndExpand"
              HorizontalTextAlignment="Center"
              Text="labelSuppliesBulletsNoInventory"
              VerticalOptions="Start" />

     <ListView  x:Name="lstView" RowHeight="60" 
                IsVisible="true"
                VerticalOptions="FillAndExpand"
              RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}"
              RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}"
                >
         <ListView.ItemTemplate>
             <DataTemplate>
                 <ViewCell>
                     <StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="Olive">
                         <StackLayout Orientation="Vertical">
                             <Label Text = "{Binding Name}" FontSize="24" AbsoluteLayout.LayoutBounds="0.25, 0.25, 400, 40"/>
                             <Label Text = "{Binding Type}" AbsoluteLayout.LayoutBounds="50, 35, 200, 25"/>
                         </StackLayout>
                         <Image Source="{Binding Image}"  IsVisible="{Binding IsVisible}"  HorizontalOptions="End" AbsoluteLayout.LayoutBounds="250.25, 0.25, 50, 50 "/>
                     </StackLayout>
                 </ViewCell>
             </DataTemplate>
         </ListView.ItemTemplate>
     </ListView>

     <syncfusion:SfBusyIndicator x:Name="busyindicator"
              AnimationType="DoubleCircle"
              ViewBoxHeight="150"
              ViewBoxWidth="150"
              RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.33}"
              RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}"
      />

 </RelativeLayout>

The result is:

97776-image.png


Best Regards,


Jessie Zhang


If the response is helpful, please click "Accept Answer" and upvote it.



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.



image.png (38.8 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

For some reason once again this is not overlaying the controls?

0 Votes 0 ·
JesseKnott-2239 avatar image
0 Votes"
JesseKnott-2239 answered

When I tried placing the content within a RelativeLayout but when I do so, all of the content stops filling the page.
No matter what options I specify the content will not fill the page.
Here is the code.

   <ContentPage.Content>
         <ScrollView>
             <StackLayout HorizontalOptions="FillAndExpand">
    
                 <Label x:Name="lblNoInventory"
                     FontSize="18"
                     HorizontalOptions="CenterAndExpand"
                     HorizontalTextAlignment="Center"
                     IsVisible="{Binding Converter={StaticResource VisibleFromCount}, Path=PrimersList}"
                     Style="{StaticResource Key=BorderLabel}"
                     Text="{x:Static resx:Resources.labelNoInventory}"
                     VerticalOptions="Start" />
    
                 <RelativeLayout HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand">
                     <datagrid:SfDataGrid x:Name="DataGrid"
                         AllowEditing="True"
                         AllowMultiSorting="True"
                         AllowSorting="True"
                         AutoGenerateColumns="False"
                         ColumnSizer="Star"
                         HorizontalOptions="FillAndExpand"
                         ItemsSource="{Binding Path=PrimersList}"
                         RelativeLayout.XConstraint="{ConstraintExpression Type=Constant,
                                                                           Constant=0}"
                         RelativeLayout.YConstraint="{ConstraintExpression Type=Constant,
                                                                           Constant=0}"
                         VerticalOptions="FillAndExpand" />
    
                     <busyindicator:SfBusyIndicator x:Name="busyindicator"
                         AnimationType="DoubleCircle"
                         IsBusy="{Binding Path=IsBusy, Mode=TwoWay}"
                         IsEnabled="{Binding Path=IsBusy, Mode=TwoWay}"
                         IsVisible="{Binding Path=IsBusy, Mode=TwoWay}"
                         RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                           Property=Width,
                                                                           Factor=0.33}"
                         RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
                                                                           Property=Height,
                                                                           Factor=0.33}"
                         ViewBoxHeight="150"
                         ViewBoxWidth="150" />
                 </RelativeLayout>
             </StackLayout>
         </ScrollView>
     </ContentPage.Content>
 </ContentPage>

98669-screenshot-1621638716.png



5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.