Skip to content

Commit

Permalink
Merge pull request #688 from unoplatform/dev/agzi/I685
Browse files Browse the repository at this point in the history 
Add a MaterialFlyoutPresenterStyle that will help to have fullscreen, modal centered and bottom sheet Flyout
  • Loading branch information
@agneszitte
agneszitte authored Nov 29, 2021
2 parents bbcef2e + 6a0f105 commit b2adac0
Show file tree
Hide file tree
Showing 4 changed files with 205 additions and 3 deletions.
42 changes: 41 additions & 1 deletion src/library/Uno.Material/Styles/Controls/Flyout.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
mc:Ignorable="not_win ios android wasm">

<ResourceDictionary.MergedDictionaries>
<MaterialColors xmlns="using:Uno.Material"/>
<MaterialColors xmlns="using:Uno.Material" />
</ResourceDictionary.MergedDictionaries>

<x:String x:Key="CheckGlyphPathStyle">M30.561941,0L31.997,1.393004 10.467954,23.597999 0,15.350999 1.2379759,13.780992 10.287961,20.909952z</x:String>
Expand All @@ -28,6 +28,46 @@
<!-- Material FlyoutPresenter Style -->
<Style x:Key="MaterialFlyoutPresenterStyle"
TargetType="FlyoutPresenter">
<Setter Property="HorizontalAlignment"
Value="Stretch" />
<Setter Property="VerticalAlignment"
Value="Stretch" />
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
<Setter Property="VerticalContentAlignment"
Value="Stretch" />
<Setter Property="MinWidth"
Value="NaN" />
<Setter Property="MinHeight"
Value="NaN" />
<Setter Property="MaxWidth"
Value="NaN" />
<Setter Property="MaxHeight"
Value="NaN" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="FlyoutPresenter">
<Border HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Border.Transitions>
<TransitionCollection>
<PaneThemeTransition Edge="Bottom" />
</TransitionCollection>
</Border.Transitions>
<ContentPresenter Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<!-- Material Content FlyoutPresenter Style -->
<Style x:Key="MaterialContentFlyoutPresenterStyle"
TargetType="FlyoutPresenter">

<Setter Property="Foreground"
Value="{StaticResource MaterialOnSurfaceBrush}" />
Expand Down
4 changes: 4 additions & 0 deletions src/samples/Uno.Themes.Samples/Uno.Themes.Samples.Shared/App.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,10 @@
<x:Double x:Key="DesktopAdaptiveThresholdWidth">720</x:Double>
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>

<!-- To override the default FlyoutLightDismissOverlayBackground resource -->
<SolidColorBrush x:Key="FlyoutLightDismissOverlayBackground"
Color="{StaticResource MaterialOverlayColor}" />
</ResourceDictionary>
</Application.Resources>

Expand Down
155 changes: 153 additions & 2 deletions ...mples/Uno.Themes.Samples/Uno.Themes.Samples.Shared/Content/Controls/FlyoutSamplePage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,166 @@
<sample:SamplePageLayout.MaterialTemplate>
<DataTemplate>
<StackPanel>
<!-- FullScreen Flyout -->
<TextBlock Text="FullScreen Flyout"
Margin="0,16,0,0" />

<smtx:XamlDisplay UniqueKey="FlyoutSamplePage_FullScreenFlyout">

<Button x:Name="ShowFullScreenFlyoutButton"
Content="Flyout">
<Button.Flyout>
<Flyout Placement="Full"
FlyoutPresenterStyle="{StaticResource MaterialFlyoutPresenterStyle}">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<CommandBar Content="FullScreen Flyout Example"
toolkit:VisibleBoundsPadding.PaddingMask="Top"
Style="{StaticResource MaterialCommandBarStyle}">
<toolkit:CommandBarExtensions.NavigationCommand>
<AppBarButton Click="CloseFlyout"
Tag="{Binding ElementName=ShowFullScreenFlyoutButton}"
Style="{StaticResource MaterialAppBarButton}">
<AppBarButton.Icon>
<PathIcon Data="{StaticResource CloseGlyphPathData}" />
</AppBarButton.Icon>
</AppBarButton>
</toolkit:CommandBarExtensions.NavigationCommand>
</CommandBar>

<TextBlock Grid.Row="1"
Text="Example of a FullScreen Flyout"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Style="{StaticResource MaterialBody1}" />
</Grid>
</Flyout>
</Button.Flyout>
</Button>
</smtx:XamlDisplay>

<!-- Modal Centered Flyout -->
<TextBlock Text="Modal Centered Flyout"
Margin="0,16,0,0" />

<smtx:XamlDisplay UniqueKey="FlyoutSamplePage_ModalCenteredFlyout">

<Button x:Name="ShowModalCenteredFlyoutButton"
Content="Flyout">
<Button.Flyout>
<Flyout Placement="Full"
LightDismissOverlayMode="On"
FlyoutPresenterStyle="{StaticResource MaterialFlyoutPresenterStyle}">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
MaxWidth="300"
MaxHeight="370">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<CommandBar Content="Modal Centered Flyout Example"
toolkit:VisibleBoundsPadding.PaddingMask="Top"
Style="{StaticResource MaterialCommandBarStyle}">
<toolkit:CommandBarExtensions.NavigationCommand>
<AppBarButton Click="CloseFlyout"
Tag="{Binding ElementName=ShowModalCenteredFlyoutButton}"
Style="{StaticResource MaterialAppBarButton}">
<AppBarButton.Icon>
<PathIcon Data="{StaticResource CloseGlyphPathData}" />
</AppBarButton.Icon>
</AppBarButton>
</toolkit:CommandBarExtensions.NavigationCommand>
</CommandBar>

<TextBlock Grid.Row="1"
Text="Example of a Modal Centered Flyout"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Style="{StaticResource MaterialBody1}" />
</Grid>
</Flyout>
</Button.Flyout>
</Button>
</smtx:XamlDisplay>

<!-- Bottom Flyout -->
<TextBlock Text="Modal Bottom Sheet Flyout"
Margin="0,16,0,0" />

<smtx:XamlDisplay UniqueKey="FlyoutSamplePage_ModalBottomSheetFlyout">

<Button x:Name="ShowModalBottomSheetFlyoutButton"
Content="Flyout">
<Button.Flyout>
<Flyout Placement="Full"
LightDismissOverlayMode="On"
FlyoutPresenterStyle="{StaticResource MaterialFlyoutPresenterStyle}">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
VerticalAlignment="Bottom"
MaxHeight="370">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<Button Content="Share"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Left"
Style="{StaticResource MaterialTextButtonStyle}">
<extensions:ControlExtensions.Icon>
<SymbolIcon Symbol="Share" />
</extensions:ControlExtensions.Icon>
</Button>

<Button Grid.Row="1"
Content="Get link"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Left"
Style="{StaticResource MaterialTextButtonStyle}">
<extensions:ControlExtensions.Icon>
<SymbolIcon Symbol="Link" />
</extensions:ControlExtensions.Icon>
</Button>

<Button Grid.Row="2"
Content="Edit"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Left"
Style="{StaticResource MaterialTextButtonStyle}">
<extensions:ControlExtensions.Icon>
<SymbolIcon Symbol="Edit" />
</extensions:ControlExtensions.Icon>
</Button>

<Button Grid.Row="3"
Content="Delete"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Left"
Style="{StaticResource MaterialTextButtonStyle}">
<extensions:ControlExtensions.Icon>
<SymbolIcon Symbol="Delete" />
</extensions:ControlExtensions.Icon>
</Button>
</Grid>
</Flyout>
</Button.Flyout>
</Button>
</smtx:XamlDisplay>

<!-- Flyout Text -->
<TextBlock Text="Flyout" />
<TextBlock Text="Flyout"
Margin="0,16,0,0" />

<smtx:XamlDisplay UniqueKey="FlyoutSamplePage_Flyout">

<Button Content="Flyout">
<Button.Flyout>
<Flyout FlyoutPresenterStyle="{StaticResource MaterialFlyoutPresenterStyle}">
<Flyout FlyoutPresenterStyle="{StaticResource MaterialContentFlyoutPresenterStyle}">
<TextBlock Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
Style="{StaticResource MaterialBody2}" />
</Flyout>
Expand Down
7 changes: 7 additions & 0 deletions ...es/Uno.Themes.Samples/Uno.Themes.Samples.Shared/Content/Controls/FlyoutSamplePage.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,13 @@ public FlyoutSamplePage()
{
this.InitializeComponent();
}

private void CloseFlyout(object sender, RoutedEventArgs e)
{
var appBarButton = sender as AppBarButton;
var button = (Button)appBarButton.Tag;
button.Flyout?.Hide();
}
}
}

0 comments on commit b2adac0

Please sign in to comment.