Skip to content

Commit

Permalink
Fix display position and size of Popup (#1320)
Browse files Browse the repository at this point in the history 
* Fix display position and size of Popup

* Consider the height of the status bar and navigation bar

* Update Formatting, Change `NullReferenceException` -> `InvalidOperationException`, Add message to `InvalidOperationException`

* Changed how to get the height of Navigation Bar and Status Bar

* Fix conflict

* Add PopupLayoutPage

* Rename `PopupLayout` -> `PopupLayoutAlignment`

* Update Formatting

* Throw exception for unsupported switch case

* Remove `UIEdgeInserts`

---------

Co-authored-by: Brandon Minnick <[email protected]>
  • Loading branch information
@cat0363 @brminnick
cat0363 and brminnick authored Aug 8, 2023
1 parent 141dc32 commit bc38859
Show file tree
Hide file tree
Showing 11 changed files with 415 additions and 37 deletions.
3 changes: 2 additions & 1 deletion samples/CommunityToolkit.Maui.Sample/AppShell.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,9 +124,10 @@ public partial class AppShell : Shell

CreateViewModelMapping<MultiplePopupPage, MultiplePopupViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
CreateViewModelMapping<PopupAnchorPage, PopupAnchorViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
CreateViewModelMapping<PopupLayoutAlignmentPage, PopupLayoutAlignmentViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
CreateViewModelMapping<PopupPositionPage, PopupPositionViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
CreateViewModelMapping<ShowPopupInOnAppearingPage, ShowPopupInOnAppearingPageViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
CreateViewModelMapping<SemanticOrderViewPage, SemanticOrderViewPageViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
CreateViewModelMapping<ShowPopupInOnAppearingPage, ShowPopupInOnAppearingPageViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
});

public AppShell() => InitializeComponent();
Expand Down
3 changes: 2 additions & 1 deletion samples/CommunityToolkit.Maui.Sample/MauiProgram.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,9 +187,10 @@ static void RegisterViewsAndViewModels(in IServiceCollection services)

services.AddTransientWithShellRoute<MultiplePopupPage, MultiplePopupViewModel>();
services.AddTransientWithShellRoute<PopupAnchorPage, PopupAnchorViewModel>();
services.AddTransientWithShellRoute<PopupLayoutAlignmentPage, PopupLayoutAlignmentViewModel>();
services.AddTransientWithShellRoute<PopupPositionPage, PopupPositionViewModel>();
services.AddTransientWithShellRoute<ShowPopupInOnAppearingPage, ShowPopupInOnAppearingPageViewModel>();
services.AddTransientWithShellRoute<SemanticOrderViewPage, SemanticOrderViewPageViewModel>();
services.AddTransientWithShellRoute<ShowPopupInOnAppearingPage, ShowPopupInOnAppearingPageViewModel>();

// Add Popups
services.AddTransient<CsharpBindingPopup, CsharpBindingPopupViewModel>();
Expand Down
213 changes: 213 additions & 0 deletions samples/CommunityToolkit.Maui.Sample/Pages/Views/Popup/PopupLayoutAlignmentPage.xaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,213 @@
<?xml version="1.0" encoding="utf-8" ?>
<pages:BasePage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="CommunityToolkit.Maui.Sample.Pages.Views.PopupLayoutAlignmentPage"
xmlns:pages="clr-namespace:CommunityToolkit.Maui.Sample.Pages"
xmlns:viewModels="clr-namespace:CommunityToolkit.Maui.Sample.ViewModels.Views"
x:TypeArguments="viewModels:PopupLayoutAlignmentViewModel"
x:DataType="viewModels:PopupLayoutAlignmentViewModel"
Title="Popup Layout Alignment">

<Grid RowDefinitions="64,44,32,44,24,44,*"
ColumnDefinitions="*,*,*,*,*,*,*,*"
ColumnSpacing="5">
<Label Grid.Row="0"
Grid.ColumnSpan="8"
HorizontalTextAlignment="Center"
Text="Popup allows you to position it on the page using its LayoutAlignmentOptions, HorizontalOptions and VerticalOptions" />

<Label Grid.Row="1"
Grid.Column="0"
FontSize="12"
Text="Width"
FontAttributes="Bold"
VerticalOptions="Center"/>

<Entry Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="2"
Text="100"
x:Name="widthEntry"
Keyboard="Numeric"
WidthRequest="100"
HorizontalTextAlignment="End" />

<Label Grid.Row="1"
Grid.Column="4"
FontSize="12"
Text="Height"
FontAttributes="Bold"
VerticalOptions="Center" />

<Entry Grid.Row="1"
Grid.Column="5"
Grid.ColumnSpan="2"
Text="100"
x:Name="heightEntry"
Keyboard="Numeric"
WidthRequest="100"
HorizontalTextAlignment="End" />

<Label
Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="8"
Text="HorizontalOptions"
VerticalOptions="End"
FontAttributes="Bold" />

<Label
Grid.Row="3"
Grid.Column="0"
FontSize="13"
Text="Start"
VerticalOptions="Center"
HorizontalOptions="End"/>

<RadioButton
Grid.Row="3"
Grid.Column="1"
x:Name="HorizontalOptionsStartRadioButton"
IsChecked="True"
HorizontalOptions="Start"
VerticalOptions="Center"
GroupName="HorizontalLayoutOptions" />

<Label
Grid.Row="3"
FontSize="13"
Grid.Column="2"
Text="Center"
VerticalOptions="Center" />

<RadioButton
Grid.Row="3"
Grid.Column="3"
x:Name="HorizontalOptionsCenterRadioButton"
IsChecked="False"
HorizontalOptions="Start"
VerticalOptions="Center"
GroupName="HorizontalLayoutOptions" />

<Label
Grid.Row="3"
Grid.Column="4"
FontSize="13"
Text="End"
VerticalOptions="Center"
HorizontalOptions="End"/>

<RadioButton
Grid.Row="3"
Grid.Column="5"
x:Name="HorizontalOptionsEndRadioButton"
IsChecked="False"
HorizontalOptions="Start"
VerticalOptions="Center"
GroupName="HorizontalLayoutOptions" />

<Label
Grid.Row="3"
Grid.Column="6"
FontSize="13"
Text="Fill"
VerticalOptions="Center"
HorizontalOptions="End"/>

<RadioButton
Grid.Row="3"
Grid.Column="7"
x:Name="HorizontalOptionsFillRadioButton"
IsChecked="False"
HorizontalOptions="Start"
VerticalOptions="Center"
GroupName="HorizontalLayoutOptions" />

<Label
Grid.Row="4"
Grid.Column="0"
Grid.ColumnSpan="8"
Text="VerticalOptions"
VerticalOptions="End"
FontAttributes="Bold" />

<Label
Grid.Row="5"
Grid.Column="0"
FontSize="13"
Text="Start"
VerticalOptions="Center"
HorizontalOptions="End"/>

<RadioButton
Grid.Row="5"
Grid.Column="1"
x:Name="VerticalOptionsStartRadioButton"
IsChecked="True"
HorizontalOptions="Start"
VerticalOptions="Center"
GroupName="VerticalLayoutOptions" />

<Label
Grid.Row="5"
Grid.Column="2"
FontSize="13"
Text="Center"
VerticalOptions="Center" />

<RadioButton
Grid.Row="5"
Grid.Column="3"
x:Name="VerticalOptionsCenterRadioButton"
IsChecked="False"
HorizontalOptions="Start"
VerticalOptions="Center"
GroupName="VerticalLayoutOptions" />

<Label
Grid.Row="5"
Grid.Column="4"
FontSize="13"
Text="End"
VerticalOptions="Center"
HorizontalOptions="End"/>

<RadioButton
Grid.Row="5"
Grid.Column="5"
x:Name="VerticalOptionsEndRadioButton"
IsChecked="False"
HorizontalOptions="Start"
VerticalOptions="Center"
GroupName="VerticalLayoutOptions" />

<Label
Grid.Row="5"
Grid.Column="6"
FontSize="13"
Text="Fill"
VerticalOptions="Center"
HorizontalOptions="End"/>

<RadioButton
Grid.Row="5"
Grid.Column="7"
x:Name="VerticalOptionsFillRadioButton"
IsChecked="False"
HorizontalOptions="Start"
VerticalOptions="Center"
GroupName="VerticalLayoutOptions" />

<Button
Grid.Row="6"
Grid.Column="0"
Grid.ColumnSpan="8"
x:Name="ShowPopupButton"
Text="Show Popup"
BackgroundColor="Blue"
TextColor="White"
Margin="0,12,0,0"
VerticalOptions="Start"
Clicked="ShowPopupButtonClicked" />
</Grid>
</pages:BasePage>
65 changes: 65 additions & 0 deletions samples/CommunityToolkit.Maui.Sample/Pages/Views/Popup/PopupLayoutAlignmentPage.xaml.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
using CommunityToolkit.Maui.Sample.ViewModels.Views;
using CommunityToolkit.Maui.Sample.Views.Popups;
using CommunityToolkit.Maui.Views;

namespace CommunityToolkit.Maui.Sample.Pages.Views;

public partial class PopupLayoutAlignmentPage : BasePage<PopupLayoutAlignmentViewModel>
{
public PopupLayoutAlignmentPage(PopupLayoutAlignmentViewModel popupLayoutViewModel) : base(popupLayoutViewModel)
{
InitializeComponent();
}

void ShowPopupButtonClicked(object sender, EventArgs e)
{
var redBlueBoxPopup = new RedBlueBoxPopup
{
Size = new Size(double.Parse(widthEntry.Text), double.Parse(heightEntry.Text)),
};

if (VerticalOptionsStartRadioButton.IsChecked)
{
redBlueBoxPopup.VerticalOptions = Microsoft.Maui.Primitives.LayoutAlignment.Start;
}
else if (VerticalOptionsCenterRadioButton.IsChecked)
{
redBlueBoxPopup.VerticalOptions = Microsoft.Maui.Primitives.LayoutAlignment.Center;
}
else if (VerticalOptionsEndRadioButton.IsChecked)
{
redBlueBoxPopup.VerticalOptions = Microsoft.Maui.Primitives.LayoutAlignment.End;
}
else if (VerticalOptionsFillRadioButton.IsChecked)
{
redBlueBoxPopup.VerticalOptions = Microsoft.Maui.Primitives.LayoutAlignment.Fill;
}
else
{
throw new InvalidOperationException("VerticalOptions Radio Button Must Be Selected");
}

if (HorizontalOptionsStartRadioButton.IsChecked)
{
redBlueBoxPopup.HorizontalOptions = Microsoft.Maui.Primitives.LayoutAlignment.Start;
}
else if (HorizontalOptionsCenterRadioButton.IsChecked)
{
redBlueBoxPopup.HorizontalOptions = Microsoft.Maui.Primitives.LayoutAlignment.Center;
}
else if (HorizontalOptionsEndRadioButton.IsChecked)
{
redBlueBoxPopup.HorizontalOptions = Microsoft.Maui.Primitives.LayoutAlignment.End;
}
else if (HorizontalOptionsFillRadioButton.IsChecked)
{
redBlueBoxPopup.HorizontalOptions = Microsoft.Maui.Primitives.LayoutAlignment.Fill;
}
else
{
throw new InvalidOperationException("HorizontalOptions Radio Button Must Be Selected");
}

this.ShowPopup(redBlueBoxPopup);
}
}
5 changes: 5 additions & 0 deletions samples/CommunityToolkit.Maui.Sample/ViewModels/Views/Popup/PopupLayoutAlignmentViewModel.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
namespace CommunityToolkit.Maui.Sample.ViewModels.Views;

public class PopupLayoutAlignmentViewModel : BaseViewModel
{
}
1 change: 1 addition & 0 deletions samples/CommunityToolkit.Maui.Sample/ViewModels/Views/ViewsGalleryViewModel.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ public ViewsGalleryViewModel()
SectionModel.Create<MultiplePopupViewModel>("Mutiple Popups Page", Colors.Red, "A page demonstrating multiple different Popups"),
SectionModel.Create<PopupPositionViewModel>("Custom Positioning Popup", Colors.Red, "Displays a basic popup anywhere on the screen using VerticalOptions and HorizontalOptions"),
SectionModel.Create<PopupAnchorViewModel>("Anchor Popup", Colors.Red, "Popups can be anchored to other view's on the screen"),
SectionModel.Create<PopupLayoutAlignmentViewModel>("Popup Layout Page", Colors.Red, "Popup.Content demonstrated using different layouts"),
SectionModel.Create<ShowPopupInOnAppearingPageViewModel>("Show Popup in OnAppearing", Colors.Red, "Proves that we now support showing a popup before the platform is even ready."),
SectionModel.Create<SemanticOrderViewPageViewModel>("Semantic Order View", Colors.Red, "SemanticOrderView allows developers to indicate the focus order of visible controls when a user is navigating via TalkBack (Android), VoiceOver (iOS) or Narrator (Windows)."),
})
Expand Down
12 changes: 12 additions & 0 deletions samples/CommunityToolkit.Maui.Sample/Views/Popups/RedBlueBoxPopup.xaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8" ?>
<mct:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:mct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
x:Class="CommunityToolkit.Maui.Sample.Views.Popups.RedBlueBoxPopup">
<Grid VerticalOptions="Fill" HorizontalOptions="Fill" BackgroundColor="Red">
<Grid WidthRequest="10" HeightRequest="10" VerticalOptions="Start" HorizontalOptions="Start" BackgroundColor="Blue" />
<Grid WidthRequest="10" HeightRequest="10" VerticalOptions="Start" HorizontalOptions="End" BackgroundColor="Blue" />
<Grid WidthRequest="10" HeightRequest="10" VerticalOptions="End" HorizontalOptions="Start" BackgroundColor="Blue" />
<Grid WidthRequest="10" HeightRequest="10" VerticalOptions="End" HorizontalOptions="End" BackgroundColor="Blue" />
</Grid>
</mct:Popup>
11 changes: 11 additions & 0 deletions samples/CommunityToolkit.Maui.Sample/Views/Popups/RedBlueBoxPopup.xaml.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
using CommunityToolkit.Maui.Views;

namespace CommunityToolkit.Maui.Sample.Views.Popups;

public partial class RedBlueBoxPopup : Popup
{
public RedBlueBoxPopup()
{
InitializeComponent();
}
}
18 changes: 18 additions & 0 deletions src/CommunityToolkit.Maui.Core/Handlers/Popup/PopUpHandler.android.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,12 +109,22 @@ protected override MauiPopup CreatePlatformElement()
protected override void ConnectHandler(MauiPopup platformView)
{
Container = platformView.SetElement(VirtualView);

if (Container is not null)
{
Container.LayoutChange += OnLayoutChange;
}
}

/// <inheritdoc/>
protected override void DisconnectHandler(MauiPopup platformView)
{
platformView.Dispose();

if (Container is not null)
{
Container.LayoutChange -= OnLayoutChange;
}
}

void OnShowed(object? sender, EventArgs args)
Expand All @@ -123,4 +133,12 @@ void OnShowed(object? sender, EventArgs args)

VirtualView.OnOpened();
}

void OnLayoutChange(object? sender, EventArgs e)
{
if (VirtualView?.Handler?.PlatformView is Dialog dialog && Container is not null)
{
PopupExtensions.SetSize(dialog, VirtualView, Container);
}
}
}
Loading

0 comments on commit bc38859

Please sign in to comment.