Skip to content

Commit d2ee835

Browse files
cat0363TheCodeTraveler
cat0363
and
TheCodeTraveler
authored
Fix Popup size on Android and iOS (#1361)
* Fix Popup size on Android * Fix Popup size on Android * Fix Popup size on Android * Fix Popup size on Android and iOS * Invert if * Change local variable to static variable * Fix popup position and closing * Use pattern matching * Change rootViewController * Add CustomSizeAndPositionPopupPage * Update CustomSizeAndPositionPopupPage.xaml * Update CustomSizeAndPositionPopupPage.xaml * Fixed MacCatalyst Popup position * Fixed MacCatalyst Popup size * Fix MacCatalyst Popup margin * Fix Android popup size * Update Formatting --------- Co-authored-by: Brandon Minnick <13558917+brminnick@users.noreply.github.com>
1 parent 7dd409e commit d2ee835

File tree

11 files changed

+461
-98
lines changed

11 files changed

+461
-98
lines changed

‎samples/CommunityToolkit.Maui.Sample/AppShell.xaml.cs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ public partial class AppShell : Shell
122122
CreateViewModelMapping<LazyViewPage, LazyViewViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
123123
CreateViewModelMapping<MediaElementPage, MediaElementViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
124124

125+
CreateViewModelMapping<CustomSizeAndPositionPopupPage, CustomSizeAndPositionPopupViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
125126
CreateViewModelMapping<MultiplePopupPage, MultiplePopupViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
126127
CreateViewModelMapping<PopupAnchorPage, PopupAnchorViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),
127128
CreateViewModelMapping<PopupLayoutAlignmentPage, PopupLayoutAlignmentViewModel, ViewsGalleryPage, ViewsGalleryViewModel>(),

‎samples/CommunityToolkit.Maui.Sample/MauiProgram.cs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,7 @@ static void RegisterViewsAndViewModels(in IServiceCollection services)
185185
services.AddTransientWithShellRoute<LazyViewPage, LazyViewViewModel>();
186186
services.AddTransientWithShellRoute<MediaElementPage, MediaElementViewModel>();
187187

188+
services.AddTransientWithShellRoute<CustomSizeAndPositionPopupPage, CustomSizeAndPositionPopupViewModel>();
188189
services.AddTransientWithShellRoute<MultiplePopupPage, MultiplePopupViewModel>();
189190
services.AddTransientWithShellRoute<PopupAnchorPage, PopupAnchorViewModel>();
190191
services.AddTransientWithShellRoute<PopupLayoutAlignmentPage, PopupLayoutAlignmentViewModel>();

‎samples/CommunityToolkit.Maui.Sample/Pages/Views/Popup/CustomSizeAndPositionPopupPage.xaml‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
3+
<pages:BasePage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
5+
xmlns:pages="clr-namespace:CommunityToolkit.Maui.Sample.Pages"
6+
xmlns:viewModels="clr-namespace:CommunityToolkit.Maui.Sample.ViewModels.Views"
7+
x:Class="CommunityToolkit.Maui.Sample.Pages.Views.CustomSizeAndPositionPopupPage"
8+
Title="Custom Popup Size and Position"
9+
x:TypeArguments="viewModels:CustomSizeAndPositionPopupViewModel"
10+
x:DataType="viewModels:CustomSizeAndPositionPopupViewModel">
11+
12+
<ContentPage.Resources>
13+
<ControlTemplate x:Key="RadioButtonTemplate">
14+
<Border Stroke="#F3F2F1"
15+
StrokeThickness="2"
16+
StrokeShape="RoundRectangle 10"
17+
BackgroundColor="#F3F2F1"
18+
HeightRequest="90"
19+
WidthRequest="90"
20+
HorizontalOptions="Start"
21+
VerticalOptions="Start">
22+
<VisualStateManager.VisualStateGroups>
23+
<VisualStateGroupList>
24+
<VisualStateGroup x:Name="CheckedStates">
25+
<VisualState x:Name="Checked">
26+
<VisualState.Setters>
27+
<Setter TargetName="check"
28+
Property="Opacity"
29+
Value="1" />
30+
</VisualState.Setters>
31+
</VisualState>
32+
<VisualState x:Name="Unchecked">
33+
<VisualState.Setters>
34+
<Setter TargetName="check"
35+
Property="Opacity"
36+
Value="0" />
37+
</VisualState.Setters>
38+
</VisualState>
39+
</VisualStateGroup>
40+
</VisualStateGroupList>
41+
</VisualStateManager.VisualStateGroups>
42+
<Grid Margin="4"
43+
WidthRequest="90"
44+
BackgroundColor="Transparent">
45+
<Grid Margin="0,0,4,0"
46+
WidthRequest="18"
47+
HeightRequest="18"
48+
HorizontalOptions="End"
49+
VerticalOptions="Start">
50+
<Ellipse Stroke="Blue"
51+
Fill="White"
52+
WidthRequest="16"
53+
HeightRequest="16"
54+
HorizontalOptions="Center"
55+
VerticalOptions="Center" />
56+
<Ellipse x:Name="check"
57+
Fill="Blue"
58+
WidthRequest="8"
59+
HeightRequest="8"
60+
HorizontalOptions="Center"
61+
VerticalOptions="Center" />
62+
</Grid>
63+
<ContentPresenter />
64+
</Grid>
65+
</Border>
66+
</ControlTemplate>
67+
68+
<Style TargetType="RadioButton">
69+
<Setter Property="ControlTemplate"
70+
Value="{StaticResource RadioButtonTemplate}" />
71+
</Style>
72+
</ContentPage.Resources>
73+
74+
<Grid RowDefinitions="24,100,24,100,24,36,24,36,44"
75+
ColumnDefinitions="*,*,*,*"
76+
RowSpacing="8"
77+
ColumnSpacing="4">
78+
79+
<Label Grid.Row="0"
80+
Grid.ColumnSpan="4"
81+
Text="HorizontalOptions"
82+
VerticalOptions="Center"
83+
FontAttributes="Bold" />
84+
85+
<RadioButton Grid.Row="1"
86+
Grid.Column="0"
87+
IsChecked="{Binding IsStartHorizontalOptionSelected}"
88+
GroupName="HorizontalRadioButtonGroup">
89+
<RadioButton.Content>
90+
<Label Text="Start" TextColor="Black" VerticalTextAlignment="Center" Margin="4,0,0,0" />
91+
</RadioButton.Content>
92+
</RadioButton>
93+
94+
<RadioButton Grid.Row="1"
95+
Grid.Column="1"
96+
IsChecked="{Binding IsCenterHorizontalOptionSelected}"
97+
GroupName="HorizontalRadioButtonGroup">
98+
<RadioButton.Content>
99+
<Label Text="Center" TextColor="Black" VerticalTextAlignment="Center" Margin="4,0,0,0" />
100+
</RadioButton.Content>
101+
</RadioButton>
102+
103+
<RadioButton Grid.Row="1"
104+
Grid.Column="2"
105+
IsChecked="{Binding IsEndHorizontalOptionSelected}"
106+
GroupName="HorizontalRadioButtonGroup">
107+
<RadioButton.Content>
108+
<Label Text="End" TextColor="Black" VerticalTextAlignment="Center" Margin="4,0,0,0" />
109+
</RadioButton.Content>
110+
</RadioButton>
111+
112+
<RadioButton Grid.Row="1"
113+
Grid.Column="3"
114+
IsChecked="{Binding IsFillHorizontalOptionSelected}"
115+
GroupName="HorizontalRadioButtonGroup">
116+
<RadioButton.Content>
117+
<Label Text="Fill" TextColor="Black" VerticalTextAlignment="Center" Margin="4,0,0,0" />
118+
</RadioButton.Content>
119+
</RadioButton>
120+
121+
<Label Text="VerticalOptions"
122+
VerticalOptions="Center"
123+
FontAttributes="Bold"
124+
Grid.Row="2"
125+
Grid.ColumnSpan="4" />
126+
127+
<RadioButton Grid.Row="3"
128+
Grid.Column="0"
129+
IsChecked="{Binding IsStartVerticalOptionSelected}"
130+
GroupName="VerticalRadioButtonGroup">
131+
<RadioButton.Content>
132+
<Label Text="Start" TextColor="Black" VerticalTextAlignment="Center" Margin="4,0,0,0" />
133+
</RadioButton.Content>
134+
</RadioButton>
135+
136+
<RadioButton Grid.Row="3"
137+
Grid.Column="1"
138+
IsChecked="{Binding IsCenterVerticalOptionSelected}"
139+
GroupName="VerticalRadioButtonGroup">
140+
<RadioButton.Content>
141+
<Label Text="Center" TextColor="Black" VerticalTextAlignment="Center" Margin="4,0,0,0" />
142+
</RadioButton.Content>
143+
</RadioButton>
144+
145+
<RadioButton Grid.Row="3"
146+
Grid.Column="2"
147+
IsChecked="{Binding IsEndVerticalOptionSelected}"
148+
GroupName="VerticalRadioButtonGroup">
149+
<RadioButton.Content>
150+
<Label Text="End" TextColor="Black" VerticalTextAlignment="Center" Margin="4,0,0,0" />
151+
</RadioButton.Content>
152+
</RadioButton>
153+
154+
<RadioButton Grid.Row="3"
155+
Grid.Column="3"
156+
IsChecked="{Binding IsFillVerticalOptionSelected}"
157+
GroupName="VerticalRadioButtonGroup">
158+
<RadioButton.Content>
159+
<Label Text="Fill" TextColor="Black" VerticalTextAlignment="Center" Margin="4,0,0,0" />
160+
</RadioButton.Content>
161+
</RadioButton>
162+
163+
<Label Grid.Row="4"
164+
Grid.ColumnSpan="4"
165+
Text="Width"
166+
VerticalOptions="Center"
167+
FontAttributes="Bold" />
168+
169+
<Entry Grid.Row="5"
170+
Grid.Column="0"
171+
Text="{Binding Width}"
172+
Placeholder="100"
173+
Keyboard="Numeric"
174+
HorizontalTextAlignment="End" />
175+
176+
<Label Grid.Row="6"
177+
Grid.ColumnSpan="4"
178+
Text="Height"
179+
VerticalOptions="Center"
180+
FontAttributes="Bold" />
181+
182+
<Entry Grid.Row="7"
183+
Grid.Column="0"
184+
Text="{Binding Height}"
185+
Placeholder="100"
186+
Keyboard="Numeric"
187+
HorizontalTextAlignment="End" />
188+
189+
<Button Grid.Row="8"
190+
Grid.ColumnSpan="4"
191+
Text="Show"
192+
TextColor="White"
193+
HorizontalOptions="Center"
194+
Command="{Binding ExecuteShowButtonCommand, Mode=OneTime}" />
195+
</Grid>
196+
</pages:BasePage>

‎samples/CommunityToolkit.Maui.Sample/Pages/Views/Popup/CustomSizeAndPositionPopupPage.xaml.cs‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
using CommunityToolkit.Maui.Sample.ViewModels.Views;
2+
3+
namespace CommunityToolkit.Maui.Sample.Pages.Views;
4+
5+
public partial class CustomSizeAndPositionPopupPage : BasePage<CustomSizeAndPositionPopupViewModel>
6+
{
7+
public CustomSizeAndPositionPopupPage(CustomSizeAndPositionPopupViewModel viewModel) : base(viewModel)
8+
{
9+
InitializeComponent();
10+
}
11+
}

‎samples/CommunityToolkit.Maui.Sample/Pages/Views/Popup/PopupPositionPage.xaml‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,16 @@
2424
</ContentPage.Resources>
2525

2626
<ScrollView>
27-
<Grid ColumnDefinitions="Auto, Auto, Auto"
27+
<Grid ColumnDefinitions="*,*,*"
2828
HorizontalOptions="Center"
29-
RowDefinitions="Auto, Auto, Auto, Auto"
29+
RowDefinitions="*,*,*,*"
3030
VerticalOptions="Center">
3131

3232
<Label Grid.Row="0"
3333
Grid.ColumnSpan="3"
3434
Style="{StaticResource Header}"
35-
Text="Popup's can be positioned anywhere on the screen using VerticalOptions and HorizontalOptions. Tap the arrows below to see how this works." />
35+
Text="Popup's can be positioned anywhere on the screen using VerticalOptions and HorizontalOptions. Tap the arrows below to see how this works."
36+
HorizontalTextAlignment="Center"/>
3637

3738
<Button Grid.Row="1"
3839
Grid.Column="0"

‎samples/CommunityToolkit.Maui.Sample/ViewModels/Views/Popup/CustomSizeAndPositionPopupViewModel.cs‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
using CommunityToolkit.Maui.Sample.Views.Popups;
2+
using CommunityToolkit.Maui.Views;
3+
using CommunityToolkit.Mvvm.ComponentModel;
4+
using CommunityToolkit.Mvvm.Input;
5+
6+
namespace CommunityToolkit.Maui.Sample.ViewModels.Views;
7+
8+
public partial class CustomSizeAndPositionPopupViewModel : BaseViewModel
9+
{
10+
[ObservableProperty, NotifyCanExecuteChangedFor(nameof(ExecuteShowButtonCommand))]
11+
double height = 100, width = 100;
12+
13+
[ObservableProperty, NotifyCanExecuteChangedFor(nameof(ExecuteShowButtonCommand))]
14+
bool isStartHorizontalOptionSelected = true, isCenterHorizontalOptionSelected, isEndHorizontalOptionSelected, isFillHorizontalOptionSelected,
15+
isStartVerticalOptionSelected = true, isCenterVerticalOptionSelected, isEndVerticalOptionSelected, isFillVerticalOptionSelected;
16+
17+
[RelayCommand(CanExecute = nameof(CanShowButtonExecute))]
18+
public Task ExecuteShowButton()
19+
{
20+
Microsoft.Maui.Primitives.LayoutAlignment? verticalOptions = null, horizontalOptions = null;
21+
22+
if (IsStartVerticalOptionSelected)
23+
{
24+
verticalOptions = Microsoft.Maui.Primitives.LayoutAlignment.Start;
25+
}
26+
if (IsCenterVerticalOptionSelected)
27+
{
28+
verticalOptions = Microsoft.Maui.Primitives.LayoutAlignment.Center;
29+
}
30+
if (IsEndVerticalOptionSelected)
31+
{
32+
verticalOptions = Microsoft.Maui.Primitives.LayoutAlignment.End;
33+
}
34+
if (IsFillVerticalOptionSelected)
35+
{
36+
verticalOptions = Microsoft.Maui.Primitives.LayoutAlignment.Fill;
37+
}
38+
39+
ArgumentNullException.ThrowIfNull(verticalOptions);
40+
41+
if (IsStartHorizontalOptionSelected)
42+
{
43+
horizontalOptions = Microsoft.Maui.Primitives.LayoutAlignment.Start;
44+
}
45+
if (IsCenterHorizontalOptionSelected)
46+
{
47+
horizontalOptions = Microsoft.Maui.Primitives.LayoutAlignment.Center;
48+
}
49+
if (IsEndHorizontalOptionSelected)
50+
{
51+
horizontalOptions = Microsoft.Maui.Primitives.LayoutAlignment.End;
52+
}
53+
if (IsFillHorizontalOptionSelected)
54+
{
55+
horizontalOptions = Microsoft.Maui.Primitives.LayoutAlignment.Fill;
56+
}
57+
58+
ArgumentNullException.ThrowIfNull(horizontalOptions);
59+
60+
var popup = new RedBlueBoxPopup
61+
{
62+
Size = new Size(Width, Height),
63+
VerticalOptions = verticalOptions.Value,
64+
HorizontalOptions = horizontalOptions.Value
65+
};
66+
67+
return Shell.Current.ShowPopupAsync(popup);
68+
}
69+
70+
// Ensure at least one Horizontal Option is selected, one Vertical Option is selected, Height > 0, and Width > 0
71+
bool CanShowButtonExecute() => (IsStartHorizontalOptionSelected || IsCenterHorizontalOptionSelected || IsEndHorizontalOptionSelected || IsFillHorizontalOptionSelected)
72+
&& (IsStartVerticalOptionSelected || IsCenterVerticalOptionSelected || IsEndVerticalOptionSelected || IsFillVerticalOptionSelected)
73+
&& Height > 0
74+
&& Width > 0;
75+
}

‎samples/CommunityToolkit.Maui.Sample/ViewModels/Views/ViewsGalleryViewModel.cs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ public ViewsGalleryViewModel()
1919
SectionModel.Create<AvatarViewShadowsViewModel>("AvatarView Shadows Page", Colors.Red, "A page demonstrating AvatarViews with various shadow options."),
2020
SectionModel.Create<AvatarViewShapesViewModel>("AvatarView Shapes Page", Colors.Red, "A page demonstrating AvatarViews with various shape options."),
2121
SectionModel.Create<AvatarViewSizesViewModel>("AvatarView Sizes Page", Colors.Red, "A page demonstrating AvatarViews with various size options."),
22+
SectionModel.Create<CustomSizeAndPositionPopupViewModel>("Custom Size and Positioning Popup", Colors.Red, "Displays a basic popup anywhere on the screen with a custom size using VerticalOptions and HorizontalOptions."),
2223
SectionModel.Create<DrawingViewViewModel>("DrawingView", Colors.Red, "DrawingView provides a canvas for users to \"paint\" on the screen. The drawing can also be captured and displayed as an Image."),
2324
SectionModel.Create<ExpanderViewModel>("Expander Page", Colors.Red, "Expander allows collapse and expand content."),
2425
SectionModel.Create<BasicMapsViewModel>("Windows Maps Basic Page", Colors.Red, "A page demonstrating a basic example of .NET MAUI Maps for Windows."),

‎src/CommunityToolkit.Maui.Core/Handlers/Popup/PopupHandler.macios.cs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@ public partial class PopupHandler : ElementHandler<IPopup, MauiPopup>
1313
/// <param name="result">The result that should return from this Popup.</param>
1414
public static async void MapOnClosed(PopupHandler handler, IPopup view, object? result)
1515
{
16-
var vc = handler.PlatformView.ViewController;
17-
if (vc is not null)
16+
var presentationController = handler.PlatformView.PresentationController;
17+
if (presentationController?.PresentedViewController is UIViewController presentationViewController)
1818
{
19-
await vc.DismissViewControllerAsync(true);
19+
await presentationViewController.DismissViewControllerAsync(true);
2020
}
2121

2222
view.HandlerCompleteTCS.TrySetResult();

‎src/CommunityToolkit.Maui.Core/Views/Popup/MauiPopup.macios.cs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,8 +95,13 @@ public void SetElement(IPopup element)
9595
_ = View ?? throw new InvalidOperationException($"{nameof(View)} cannot be null.");
9696
_ = VirtualView ?? throw new InvalidOperationException($"{nameof(VirtualView)} cannot be null.");
9797

98+
#if MACCATALYST
9899
var pagehandler = VirtualView.Parent.Handler as PageHandler;
99100
var rootViewController = pagehandler?.ViewController ?? WindowStateManager.Default.GetCurrentUIViewController() ?? throw new InvalidOperationException($"{nameof(PageHandler.ViewController)} cannot be null.");
101+
#else
102+
var rootViewController = WindowStateManager.Default.GetCurrentUIViewController() ?? throw new InvalidOperationException($"{nameof(PageHandler.ViewController)} cannot be null.");
103+
#endif
104+
100105
ViewController ??= rootViewController;
101106
SetDimmingBackgroundEffect();
102107
}

0 commit comments

Comments
 (0)