Skip to content

Commit

Permalink
chore: updated drawer flyout sample
Browse files Browse the repository at this point in the history
  • Loading branch information
@Xiaoy312
Xiaoy312 committed Nov 6, 2023
1 parent a6ac2fd commit ceec942
Showing 1 changed file with 115 additions and 33 deletions.
148 changes: 115 additions & 33 deletions ...o.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/DrawerFlyoutSamplePage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,33 +16,23 @@
<DataTemplate>
<ScrollViewer HorizontalScrollMode="Disabled">
<StackPanel>
<TextBlock Text="Use a DrawerFlyoutPresenter to display flyout with gesture support."
Style="{StaticResource BodyTextBlockStyle}" />
<TextBlock Text="Use a DrawerFlyoutPresenter to display flyout with gesture support." Style="{StaticResource BodyTextBlockStyle}" />

<!-- basic usage -->
<TextBlock Text="DrawerFlyoutPresenter"
Margin="0,24,0,0"
Style="{StaticResource TitleTextBlockStyle}" />
<TextBlock Text="note: To use this, simply use a Placement=Full flyout with one of the followings as FlyoutPresenterStyle:"
Style="{StaticResource BodyTextBlockStyle}" />
<TextBlock Text="- LeftDrawerFlyoutPresenterStyle"
Style="{StaticResource BodyTextBlockStyle}" />
<TextBlock Text="- TopDrawerFlyoutPresenterStyle"
Style="{StaticResource BodyTextBlockStyle}" />
<TextBlock Text="- RightDrawerFlyoutPresenterStyle"
Style="{StaticResource BodyTextBlockStyle}" />
<TextBlock Text="- BottomDrawerFlyoutPresenterStyle"
Style="{StaticResource BodyTextBlockStyle}" />
<TextBlock Text="note: To use this, simply use a Placement=Full flyout with one of the followings as FlyoutPresenterStyle:" Style="{StaticResource BodyTextBlockStyle}" />
<TextBlock Text="- LeftDrawerFlyoutPresenterStyle" Style="{StaticResource BodyTextBlockStyle}" />
<TextBlock Text="- TopDrawerFlyoutPresenterStyle" Style="{StaticResource BodyTextBlockStyle}" />
<TextBlock Text="- RightDrawerFlyoutPresenterStyle" Style="{StaticResource BodyTextBlockStyle}" />
<TextBlock Text="- BottomDrawerFlyoutPresenterStyle" Style="{StaticResource BodyTextBlockStyle}" />

<StackPanel Spacing="8"
Margin="0,24,0,0">
<StackPanel Spacing="8" Margin="0,24,0,0">
<Button Content="Left Drawer">
<Button.Flyout>
<Flyout Placement="Full"
FlyoutPresenterStyle="{StaticResource LeftDrawerFlyoutPresenterStyle}">
<StackPanel toolkit:VisibleBoundsPadding.PaddingMask="All"
Background="{ThemeResource SurfaceBrush}"
MinWidth="200">
<Flyout Placement="Full" FlyoutPresenterStyle="{StaticResource LeftDrawerFlyoutPresenterStyle}">
<StackPanel toolkit:VisibleBoundsPadding.PaddingMask="All" Background="{ThemeResource SurfaceBrush}">
<TextBlock Text="text" />
<Button Content="button" />
</StackPanel>
Expand All @@ -51,11 +41,8 @@
</Button>
<Button Content="Top Drawer">
<Button.Flyout>
<Flyout Placement="Full"
FlyoutPresenterStyle="{StaticResource TopDrawerFlyoutPresenterStyle}">
<StackPanel toolkit:VisibleBoundsPadding.PaddingMask="All"
Background="{ThemeResource SurfaceBrush}"
MinHeight="200">
<Flyout Placement="Full" FlyoutPresenterStyle="{StaticResource TopDrawerFlyoutPresenterStyle}">
<StackPanel toolkit:VisibleBoundsPadding.PaddingMask="All" Background="{ThemeResource SurfaceBrush}">
<TextBlock Text="text" />
<Button Content="button" />
</StackPanel>
Expand All @@ -64,11 +51,8 @@
</Button>
<Button Content="Right Drawer">
<Button.Flyout>
<Flyout Placement="Full"
FlyoutPresenterStyle="{StaticResource RightDrawerFlyoutPresenterStyle}">
<StackPanel toolkit:VisibleBoundsPadding.PaddingMask="All"
Background="{ThemeResource SurfaceBrush}"
MinWidth="200">
<Flyout Placement="Full" FlyoutPresenterStyle="{StaticResource RightDrawerFlyoutPresenterStyle}">
<StackPanel toolkit:VisibleBoundsPadding.PaddingMask="All" Background="{ThemeResource SurfaceBrush}">
<TextBlock Text="text" />
<Button Content="button" />
</StackPanel>
Expand All @@ -77,18 +61,116 @@
</Button>
<Button Content="Bottom Drawer">
<Button.Flyout>
<Flyout Placement="Full"
FlyoutPresenterStyle="{StaticResource BottomDrawerFlyoutPresenterStyle}">
<Flyout Placement="Full" FlyoutPresenterStyle="{StaticResource BottomDrawerFlyoutPresenterStyle}">
<StackPanel toolkit:VisibleBoundsPadding.PaddingMask="All" Background="{ThemeResource SurfaceBrush}">
<TextBlock Text="text" />
<Button Content="button" />
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>
</StackPanel>

<StackPanel Spacing="8" Margin="0,24,0,0">
<Button Content="Rounded Corner Drawer">
<Button.Flyout>
<Flyout Placement="Full">
<Flyout.FlyoutPresenterStyle>
<Style BasedOn="{StaticResource BottomDrawerFlyoutPresenterStyle}" TargetType="FlyoutPresenter">
<Setter Property="CornerRadius" Value="16,16,0,0" />
</Style>
</Flyout.FlyoutPresenterStyle>
<StackPanel toolkit:VisibleBoundsPadding.PaddingMask="All"
Background="{ThemeResource SurfaceBrush}"
MinHeight="200">
Padding="16,16,0,0"
Background="SkyBlue">
<TextBlock Text="text" />
<Button Content="button" />
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>
<Button Content="Custom LightDismiss Color Drawer">
<Button.Flyout>
<Flyout Placement="Full">
<Flyout.FlyoutPresenterStyle>
<Style BasedOn="{StaticResource BottomDrawerFlyoutPresenterStyle}" TargetType="FlyoutPresenter">
<Setter Property="CornerRadius" Value="16,16,0,0" />
<Setter Property="utu:DrawerFlyoutPresenter.LightDismissOverlayBackground" Value="#80FFC0CB" />
</Style>
</Flyout.FlyoutPresenterStyle>
<Border toolkit:VisibleBoundsPadding.PaddingMask="All"
Padding="16,16,0,0"
Background="SkyBlue">
<StackPanel Padding="8">
<TextBlock Text="text" />
<Button Content="button" />
</StackPanel>
</Border>
</Flyout>
</Button.Flyout>
</Button>
<Button Content="Full Drawer">
<Button.Flyout>
<Flyout Placement="Full">
<Flyout.FlyoutPresenterStyle>
<Style BasedOn="{StaticResource BottomDrawerFlyoutPresenterStyle}" TargetType="FlyoutPresenter">
<Setter Property="utu:DrawerFlyoutPresenter.DrawerDepth" Value="*" />
</Style>
</Flyout.FlyoutPresenterStyle>
<StackPanel toolkit:VisibleBoundsPadding.PaddingMask="All" Padding="8">
<TextBlock Text="text" />
<Button Content="button" />
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>
<Button Content="Half Drawer">
<Button.Flyout>
<Flyout Placement="Full">
<Flyout.FlyoutPresenterStyle>
<Style BasedOn="{StaticResource BottomDrawerFlyoutPresenterStyle}" TargetType="FlyoutPresenter">
<Setter Property="utu:DrawerFlyoutPresenter.DrawerDepth" Value="0.5*" />
</Style>
</Flyout.FlyoutPresenterStyle>
<StackPanel toolkit:VisibleBoundsPadding.PaddingMask="All" Padding="8">
<TextBlock Text="text" />
<Button Content="button" />
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>
<Button Content="Fit-to-Content Drawer">
<Button.Flyout>
<Flyout Placement="Full">
<Flyout.FlyoutPresenterStyle>
<Style BasedOn="{StaticResource BottomDrawerFlyoutPresenterStyle}" TargetType="FlyoutPresenter">
<Setter Property="utu:DrawerFlyoutPresenter.DrawerDepth" Value="Auto" />
</Style>
</Flyout.FlyoutPresenterStyle>
<StackPanel toolkit:VisibleBoundsPadding.PaddingMask="All" Padding="8">
<TextBlock Text="text" />
<Button Content="button" />
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>
<Button Content="150px fixed-size Drawer">
<Button.Flyout>
<Flyout Placement="Full">
<Flyout.FlyoutPresenterStyle>
<Style BasedOn="{StaticResource BottomDrawerFlyoutPresenterStyle}" TargetType="FlyoutPresenter">
<Setter Property="utu:DrawerFlyoutPresenter.DrawerDepth" Value="150" />
</Style>
</Flyout.FlyoutPresenterStyle>
<StackPanel toolkit:VisibleBoundsPadding.PaddingMask="All" Padding="8">
<TextBlock Text="text" />
<Button Content="button" />
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>
</StackPanel>

</StackPanel>
</ScrollViewer>
</DataTemplate>
Expand Down

0 comments on commit ceec942

Please sign in to comment.