Skip to content

Commit

Permalink
Update repository URL and package tags
Browse files Browse the repository at this point in the history 
The commit updates the repository URL to "https://github.com/TheEightBot/WhatIsThisSheet" and modifies the package tags to include ".NET MAUI", "Bottom Sheet", "Navigation", "Component", "UI Control", and "Eight-Bot". The description of the .NET MAUI Bottom Sheet component is also updated to provide more details about its functionality.
  • Loading branch information
@michaelstonis
michaelstonis committed Dec 13, 2023
1 parent 6ce1af4 commit 3032ba9
Show file tree
Hide file tree
Showing 7 changed files with 143 additions and 66 deletions.
6 changes: 3 additions & 3 deletions Directory.build.props
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@
</PropertyGroup>
<PropertyGroup>
<PackageProjectUrl>https://eight.bot</PackageProjectUrl>
<RepositoryUrl>https://github.com/TheEightBot/Componentizer4k</RepositoryUrl>
<RepositoryUrl>https://github.com/TheEightBot/WhatIsThisSheet</RepositoryUrl>
<RepositoryType>git</RepositoryType>
<PackageTags>.NET MAUI;MVVM;Navigation;Component;UI Control;Eight-Bot</PackageTags>
<Description>A bottom drawer or bottom sheet-like component for .NET MAUI.</Description>
<PackageTags>.NET MAUI;Bottom Sheet;Navigation;Component;UI Control;Eight-Bot</PackageTags>
<Description>The .NET MAUI Bottom Sheet component is a user interface element that slides up from the bottom of the screen to reveal more content. It's a versatile component that can be used for various purposes such as displaying additional information, presenting a list of options, or providing a secondary navigation.</Description>
<PackageIcon>logo.png</PackageIcon>
</PropertyGroup>
<ItemGroup>
Expand Down
28 changes: 15 additions & 13 deletions WhatIsThisSheet.Sample/MainPage.xaml
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:mauiDrawer="clr-namespace:MauiDrawer;assembly=MauiDrawer"
x:Class="MauiDrawer.Sample.MainPage"
>
xmlns:wits="http://what.is.this.sheet/schemas/controls"
x:Class="MauiDrawer.Sample.MainPage">

<Grid ColumnDefinitions="*" RowDefinitions="auto,auto,auto,auto,*">
<Grid ColumnDefinitions="*" RowDefinitions="auto,auto,auto,auto,auto,*" RowSpacing="8">
<Button
Text="Tapped" TextColor="Blue" Clicked="Button_Clicked"
VerticalOptions="Start" HorizontalOptions="Center"
Expand All @@ -20,16 +19,19 @@
<Button Text="Show" Clicked="Show_Clicked"
Grid.Row="3" />

<mauiDrawer:Drawer x:Name="MainDrawer"
<Button Text="GetTapped" Clicked="GetTapped_Clicked"
Grid.Row="4" />

<wits:BottomSheet x:Name="MainBottomSheet"
Grid.Row="0"
Grid.RowSpan="5">
<ScrollView>
<StackLayout Padding="8" Spacing="8">
<Image Source="dotnet_bot.png" />
<Label Text="This is a car" />
</StackLayout>
</ScrollView>
</mauiDrawer:Drawer>
Grid.RowSpan="6">
<StackLayout Padding="8" Spacing="8">
<Label Text="Let there be text..." HeightRequest="80" />
<Image Source="dotnet_bot.png" />
<Label Text="This is a picture of a car" />
<Button Text="Toggle Background Interaction" Clicked="ToggleBackgroundInteraction_Clicked" />
</StackLayout>
</wits:BottomSheet>
</Grid>

</ContentPage>
Expand Down
16 changes: 13 additions & 3 deletions WhatIsThisSheet.Sample/MainPage.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,26 @@ private void Button_Clicked(object sender, System.EventArgs e)

private void Dismiss_Clicked(object sender, System.EventArgs e)
{
MainDrawer.Dismiss();
MainBottomSheet.Dismiss();
}

private void Switch_Toggled(object sender, Microsoft.Maui.Controls.ToggledEventArgs e)
{
MainDrawer.AllowDismiss = !MainDrawer.AllowDismiss;
MainBottomSheet.AllowDismiss = !MainBottomSheet.AllowDismiss;
}

private void Show_Clicked(object sender, System.EventArgs e)
{
MainDrawer.Display(.65d);
MainBottomSheet.Show(.65d);
}

private void GetTapped_Clicked(object sender, System.EventArgs e)
{
Console.WriteLine("Tapped Out!");
}

private void ToggleBackgroundInteraction_Clicked(object sender, System.EventArgs e)
{
MainBottomSheet.AllowBackgroundInteraction = !MainBottomSheet.AllowBackgroundInteraction;
}
}
2 changes: 1 addition & 1 deletion WhatIsThisSheet.Sample/WhatIsThisSheet.Sample.csproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,6 @@
</ItemGroup>

<ItemGroup>
<ProjectReference Include="..\MauiDrawer\MauiDrawer.csproj" />
<ProjectReference Include="..\WhatIsThisSheet\WhatIsThisSheet.csproj" />
</ItemGroup>
</Project>
1 change: 1 addition & 0 deletions WhatIsThisSheet/AssemblyInfo.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
[assembly: XmlnsDefinition("http://what.is.this.sheet/schemas/controls", $"{nameof(WhatIsThisSheet)}")]
156 changes: 110 additions & 46 deletions WhatIsThisSheet/BottomSheet.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

namespace WhatIsThisSheet;

[ContentProperty(nameof(DrawerContent))]
[ContentProperty(nameof(SheetContent))]
public class BottomSheet : Grid
{
private readonly double _touchBarHeight = 32d;
Expand All @@ -19,38 +19,49 @@ public class BottomSheet : Grid

private readonly Shape _grabbler;

private readonly List<SheetStop> _drawerStops = new List<SheetStop>();
private readonly List<SheetStop> _sheetStops = new List<SheetStop>();

private double _drawerStartingTranslationY = 0d;
private readonly TapGestureRecognizer _backgroundInteractionTapGesture = new();

public static BindableProperty DrawerContentProperty =
BindableProperty.Create(
nameof(DrawerContent), typeof(View), typeof(BottomSheet), default(View),
propertyChanged:
(bindable, oldValue, newValue) =>
{
if (bindable is not BottomSheet drawer)
{
return;
}
private double _sheetStartingTranslationY = 0d;

if (oldValue is View oldView)
{
drawer._contentContainer.Remove(oldView);
}
public static BindableProperty LockPositionProperty =
BindableProperty.Create(nameof(LockPosition), typeof(bool), typeof(BottomSheet), default(bool));

if (newValue is View newView)
public bool LockPosition
{
get => (bool)GetValue(LockPositionProperty);
set => SetValue(LockPositionProperty, value);
}

public static BindableProperty SheetContentProperty =
BindableProperty.Create(
nameof(SheetContent), typeof(View), typeof(BottomSheet), default(View),
propertyChanged:
(bindable, oldValue, newValue) =>
{
Grid.SetColumn(newView, 0);
Grid.SetRow(newView, 1);
drawer._contentContainer.Add(newView);
}
});
if (bindable is not BottomSheet sheet)
{
return;
}

public View DrawerContent
if (oldValue is View oldView)
{
sheet._contentContainer.Remove(oldView);
}

if (newValue is View newView)
{
Grid.SetColumn(newView, 0);
Grid.SetRow(newView, 1);
sheet._contentContainer.Add(newView);
}
});

public View SheetContent
{
get => (View)GetValue(DrawerContentProperty);
set => SetValue(DrawerContentProperty, value);
get => (View)GetValue(SheetContentProperty);
set => SetValue(SheetContentProperty, value);
}

public static BindableProperty AllowDismissProperty =
Expand All @@ -62,37 +73,69 @@ public bool AllowDismiss
set => SetValue(AllowDismissProperty, value);
}

public static BindableProperty DrawerColorProperty =
BindableProperty.Create(nameof(DrawerColor), typeof(Color), typeof(BottomSheet), Colors.White,
public static BindableProperty AllowBackgroundInteractionProperty =
BindableProperty.Create(nameof(AllowBackgroundInteraction), typeof(bool), typeof(BottomSheet), true,
propertyChanged: (bindable, _, newValue) =>
{
if (bindable is not BottomSheet bs || newValue is not bool newBool)
{
return;
}

bs.GestureRecognizers.Clear();

bs.InputTransparent = newBool;

if (newBool)
{
return;
}

bs.GestureRecognizers.Add(bs._backgroundInteractionTapGesture);
});

public bool AllowBackgroundInteraction
{
get => (bool)GetValue(AllowBackgroundInteractionProperty);
set => SetValue(AllowBackgroundInteractionProperty, value);
}

public static BindableProperty SheetColorProperty =
BindableProperty.Create(nameof(SheetColor), typeof(Color), typeof(BottomSheet), Colors.White,
propertyChanged:
(bindable, _, newValue) =>
{
if (bindable is not BottomSheet drawer)
if (bindable is not BottomSheet sheet)
{
return;
}

if (newValue is Color newColor)
{
drawer._mainContainer.BackgroundColor = newColor;
sheet._mainContainer.BackgroundColor = newColor;
}
});

public Color DrawerColor
public Color SheetColor
{
get => (Color)GetValue(DrawerColorProperty);
set => SetValue(DrawerColorProperty, value);
get => (Color)GetValue(SheetColorProperty);
set => SetValue(SheetColorProperty, value);
}

public BottomSheet()
{
this.CascadeInputTransparent = false;
this.InputTransparent = true;
this.InputTransparent = AllowBackgroundInteraction;

if (!AllowBackgroundInteraction)
{
this.GestureRecognizers.Add(_backgroundInteractionTapGesture);
}

_drawerStops.Add(new SheetStop { Measurement = SheetStopMeasurement.Fixed, Value = 0 });
_drawerStops.Add(new SheetStop { Measurement = SheetStopMeasurement.Percentage, Value = .33 });
_drawerStops.Add(new SheetStop { Measurement = SheetStopMeasurement.Percentage, Value = .66 });
_drawerStops.Add(new SheetStop { Measurement = SheetStopMeasurement.Percentage, Value = 1.0 });
_sheetStops.Add(new SheetStop { Measurement = SheetStopMeasurement.Fixed, Value = 0 });
_sheetStops.Add(new SheetStop { Measurement = SheetStopMeasurement.Percentage, Value = .33 });
_sheetStops.Add(new SheetStop { Measurement = SheetStopMeasurement.Percentage, Value = .66 });
_sheetStops.Add(new SheetStop { Measurement = SheetStopMeasurement.Percentage, Value = 1.0 });

_grabbler =
new RoundRectangle
Expand Down Expand Up @@ -125,11 +168,17 @@ public BottomSheet()
_mainContainer =
new Border
{
InputTransparent = false,
GestureRecognizers =
{
// TODO: We shouldn't need this and should just be able to use input transparent
new TapGestureRecognizer(),
},
StrokeShape = new RoundRectangle
{
CornerRadius = new CornerRadius(24, 24, 0, 0),
},
BackgroundColor = DrawerColor,
BackgroundColor = SheetColor,
Content = _contentContainer,
Margin = -.5f,
};
Expand All @@ -151,6 +200,11 @@ public BottomSheet()

public void Dismiss()
{
if (LockPosition)
{
return;
}

_touchOverlay.GestureRecognizers.Clear();

var visibleHeight = this.Height;
Expand Down Expand Up @@ -188,8 +242,13 @@ public void Dismiss()
});
}

public void Display(double displayPercentage)
public void Show(double displayPercentage)
{
if (LockPosition)
{
return;
}

_touchOverlay.GestureRecognizers.Clear();

var visibleHeight = this.Height;
Expand Down Expand Up @@ -241,6 +300,11 @@ protected override void OnParentChanging(ParentChangingEventArgs args)

private void _touchOverlayPanGesture_PanUpdated(object? sender, PanUpdatedEventArgs e)
{
if (LockPosition)
{
return;
}

var parentPage = this.ParentPage();

if (parentPage is null)
Expand All @@ -250,7 +314,7 @@ private void _touchOverlayPanGesture_PanUpdated(object? sender, PanUpdatedEventA

var visibleHeight = this.Height;

var totalTranslation = this._drawerStartingTranslationY + e.TotalY;
var totalTranslation = this._sheetStartingTranslationY + e.TotalY;

var allowDismiss = AllowDismiss;

Expand All @@ -261,7 +325,7 @@ private void _touchOverlayPanGesture_PanUpdated(object? sender, PanUpdatedEventA
switch (e.StatusType)
{
case GestureStatus.Started:
_drawerStartingTranslationY = _mainContainer.TranslationY;
_sheetStartingTranslationY = _mainContainer.TranslationY;
break;
case GestureStatus.Running:
var clampedTranslation = totalTranslation.Clamp(0, visibleHeight - touchBarDisplayHeight);
Expand All @@ -271,8 +335,8 @@ private void _touchOverlayPanGesture_PanUpdated(object? sender, PanUpdatedEventA
default:
var currTranslationY = _mainContainer.TranslationY;

var closestDrawerStop =
_drawerStops
var closestsheetStop =
_sheetStops
.Select(
(x) =>
{
Expand All @@ -283,7 +347,7 @@ private void _touchOverlayPanGesture_PanUpdated(object? sender, PanUpdatedEventA
_ => x.Value,
};

return (DrawerStop: x, Position: position, Distance: Math.Abs(currTranslationY - position));
return (sheetStop: x, Position: position, Distance: Math.Abs(currTranslationY - position));
})
.OrderBy(x => x.Distance)
.FirstOrDefault();
Expand All @@ -298,7 +362,7 @@ private void _touchOverlayPanGesture_PanUpdated(object? sender, PanUpdatedEventA
_mainContainer.Padding = new Thickness(_mainContainer.Margin.Left, _mainContainer.Margin.Top, _mainContainer.Margin.Right, x);
},
_mainContainer.TranslationY,
closestDrawerStop.Position.Clamp(0, visibleHeight + bottomSafeArea - touchBarDisplayHeight),
closestsheetStop.Position.Clamp(0, visibleHeight + bottomSafeArea - touchBarDisplayHeight),
Easing.SinInOut);

animateToPosition.Commit(
Expand Down
Binary file modified images/logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 3032ba9

Please sign in to comment.