-
Notifications
You must be signed in to change notification settings - Fork 652
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
## Description
This pull request introduces a new page for the `Popup` control,
providing an example and details for developers to better understand and
utilize the control, main changes are:
1. Added Popup Control Details in `ControlInfoData.json`
- Included a new entry for the Popup control, with relevant descriptions
and metadata.
- Created a New Page for the Popup Control
2. The page includes an example that demonstrates the Popup control’s
capabilities:
- Light dismissal (IsLightDismissEnabled).
- Offset positioning (HorizontalOffset and VerticalOffset).
- Provided detailed comments in the example code for better
understanding and usage.
## Motivation and Context
Closes #1713
## How Has This Been Tested?
**Manually Tested**
## Screenshots (if appropriate):
## Types of changes
<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->
- [ ] Bug fix (non-breaking change which fixes an issue)
- [X] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to change)
---------
Co-authored-by: Niels Laute <[email protected]>- Loading branch information
1 parent
82893c4
commit da694b6
Showing
5 changed files
with
196 additions
and
1 deletion.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| <?xml version="1.0" encoding="utf-8"?> | ||
| <Page | ||
| x:Class="WinUIGallery.ControlPages.PopupPage" | ||
| xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" | ||
| xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" | ||
| xmlns:local="using:WinUIGallery" | ||
| xmlns:d="http://schemas.microsoft.com/expression/blend/2008" | ||
| xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" | ||
| mc:Ignorable="d"> | ||
|
|
||
| <StackPanel> | ||
| <local:ControlExample HeaderText="Popup with Offset Positioning"> | ||
| <local:ControlExample.Example> | ||
| <Grid x:Name="Output" | ||
| HorizontalAlignment="Left" | ||
| VerticalAlignment="Top"> | ||
| <Button Content="Show Popup (using Offset)" | ||
| Click="ShowPopupOffsetClicked" /> | ||
| <Popup VerticalOffset="{x:Bind VerticalOffset.Value , Mode=OneWay}" | ||
| HorizontalOffset="{x:Bind HorizontalOffset.Value , Mode=OneWay}" | ||
| IsLightDismissEnabled="{x:Bind IsLightDismissEnabledToggleSwitch.IsOn , Mode=OneWay}" | ||
| x:Name="StandardPopup" | ||
| Closed="PopupClosed"> | ||
| <Border Padding="20" | ||
| CornerRadius="8" | ||
| Width="200" | ||
| Height="150" | ||
| Background="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}" | ||
| BorderThickness="1" | ||
| BorderBrush="{ThemeResource SurfaceStrokeColorDefaultBrush}"> | ||
| <StackPanel HorizontalAlignment="Center" | ||
| VerticalAlignment="Center" | ||
| Spacing="8"> | ||
| <TextBlock Text="Simple Popup" | ||
| FontSize="16" | ||
| HorizontalAlignment="Center" /> | ||
| <Button Content="Close" | ||
| Click="ClosePopupClicked" /> | ||
| </StackPanel> | ||
| </Border> | ||
| </Popup> | ||
| </Grid> | ||
| </local:ControlExample.Example> | ||
| <local:ControlExample.Options> | ||
| <StackPanel Spacing="8"> | ||
| <ToggleSwitch x:Name="IsLightDismissEnabledToggleSwitch" | ||
| Header="IsLightDismissEnabled" | ||
| OffContent="False" | ||
| OnContent="True" | ||
| IsOn="False" | ||
| /> | ||
| <NumberBox x:Name="VerticalOffset" | ||
| Header="VerticalOffset" | ||
| Minimum="-100" | ||
| Maximum="100" | ||
| Value="0" | ||
| SpinButtonPlacementMode="Inline" | ||
| SmallChange="10" | ||
| LargeChange="100" /> | ||
| <NumberBox x:Name="HorizontalOffset" | ||
| Header="HorizontalOffset" | ||
| Minimum="-100" | ||
| Maximum="500" | ||
| Value="200" | ||
| SpinButtonPlacementMode="Inline" | ||
| SmallChange="10" | ||
| LargeChange="100" /> | ||
| </StackPanel> | ||
| </local:ControlExample.Options> | ||
| <local:ControlExample.CSharp> | ||
| <x:String xml:space="preserve"> | ||
| // Handles the Click event on the Button on the page and opens the Popup. | ||
| private void ShowPopupOffsetClicked(object sender, RoutedEventArgs e) | ||
| { | ||
| // open the Popup if it isn't open already | ||
| if (!StandardPopup.IsOpen) { StandardPopup.IsOpen = true; } | ||
| } | ||
|
|
||
| // Handles the Click event on the Button inside the Popup control and closes the Popup. | ||
| private void ClosePopupClicked(object sender, RoutedEventArgs e) | ||
| { | ||
| // if the Popup is open, then close it | ||
| if (StandardPopup.IsOpen) { StandardPopup.IsOpen = false; } | ||
| } | ||
| </x:String> | ||
| </local:ControlExample.CSharp> | ||
| <local:ControlExample.Xaml> | ||
| <x:String xml:space="preserve"> | ||
| <Grid x:Name="Output" HorizontalAlignment="Left" VerticalAlignment="Top" > | ||
| <Button Content="Show Popup (using Offset)" Click="ShowPopupOffsetClicked" /> | ||
| <Popup x:Name="StandardPopup" VerticalOffset="$(VerticalOffset)" HorizontalOffset="$(HorizontalOffset)" IsLightDismissEnabled="$(IsLightDismissEnabled)" | ||
| BorderThickness="1" BorderBrush="{ThemeResource SurfaceStrokeColorDefaultBrush}"> | ||
| <Border Padding="20" CornerRadius="8" Width="200" Height="150" | ||
| Background="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}"> | ||
| <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="8"> | ||
| <TextBlock Text="Simple Popup" FontSize="16" HorizontalAlignment="Center" /> | ||
| <Button Content="Close" Click="ClosePopupClicked" /> | ||
| </StackPanel> | ||
| </Border> | ||
| </Popup> | ||
| </Grid> | ||
| </x:String> | ||
| </local:ControlExample.Xaml> | ||
| <local:ControlExample.Substitutions> | ||
| <local:ControlExampleSubstitution Key="VerticalOffset" Value="{x:Bind VerticalOffset.Value, Mode=OneWay}" /> | ||
| <local:ControlExampleSubstitution Key="HorizontalOffset" Value="{x:Bind HorizontalOffset.Value, Mode=OneWay}" /> | ||
| <local:ControlExampleSubstitution Key="IsLightDismissEnabled" Value="{x:Bind IsLightDismissEnabledToggleSwitch.IsOn, Mode=OneWay}" /> | ||
| </local:ControlExample.Substitutions> | ||
| </local:ControlExample> | ||
| </StackPanel> | ||
| </Page> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| using System; | ||
| using System.Collections.Generic; | ||
| using System.IO; | ||
| using System.Linq; | ||
| using System.Runtime.InteropServices.WindowsRuntime; | ||
| using Windows.Foundation; | ||
| using Windows.Foundation.Collections; | ||
| using Microsoft.UI.Xaml; | ||
| using Microsoft.UI.Xaml.Controls; | ||
| using Microsoft.UI.Xaml.Controls.Primitives; | ||
| using Microsoft.UI.Xaml.Data; | ||
| using Microsoft.UI.Xaml.Input; | ||
| using Microsoft.UI.Xaml.Media; | ||
| using Microsoft.UI.Xaml.Navigation; | ||
|
|
||
| // To learn more about WinUI, the WinUI project structure, | ||
| // and more about our project templates, see: http://aka.ms/winui-project-info. | ||
|
|
||
| namespace WinUIGallery.ControlPages | ||
| { | ||
| /// <summary> | ||
| /// An empty page that can be used on its own or navigated to within a Frame. | ||
| /// </summary> | ||
| public sealed partial class PopupPage : Page | ||
| { | ||
| public PopupPage() | ||
| { | ||
| this.InitializeComponent(); | ||
| } | ||
|
|
||
| // Handles the Click event on the Button on the page and opens the Popup. | ||
| private void ShowPopupOffsetClicked(object sender, RoutedEventArgs e) | ||
| { | ||
| // open the Popup if it isn't open already | ||
| if (!StandardPopup.IsOpen) { StandardPopup.IsOpen = true; } | ||
| IsLightDismissEnabledToggleSwitch.IsEnabled = false; | ||
| } | ||
|
|
||
| // Handles the Click event on the Button inside the Popup control and | ||
| // closes the Popup. | ||
| private void ClosePopupClicked(object sender, RoutedEventArgs e) | ||
| { | ||
| // if the Popup is open, then close it | ||
| if (StandardPopup.IsOpen) { StandardPopup.IsOpen = false; } | ||
| IsLightDismissEnabledToggleSwitch.IsEnabled = true; | ||
| } | ||
|
|
||
| private void PopupClosed(object sender, object e) | ||
| { | ||
| IsLightDismissEnabledToggleSwitch.IsEnabled = true; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters