Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for CarouselView #28

Merged
merged 1 commit into from
Jul 4, 2022
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Add support for CarouselView
Dreamescaper committed Jul 2, 2022
commit c36de0d5e43797c34fdfec5deca8cdae3f838318
47 changes: 47 additions & 0 deletions samples/ControlGallery/Views/Collections/CarouselViews.razor
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
@page "/carouselviewplayground"

<ContentPage>
<Grid RowDefinitions="*,Auto">

<CarouselView Grid.Row="0"
ItemsSource="items"
Loop="false"
@bind-CurrentItem="currentItem"
@bind-Position="currentPosition">

<ItemTemplate>
<Frame BackgroundColor="Colors.LightPink"
CornerRadius="10"
HeightRequest="300"
WidthRequest="300">

<VerticalStackLayout>
<Label HorizontalOptions="LayoutOptions.Center">@context.Name</Label>
<Image Source="context.Image" />
</VerticalStackLayout>
</Frame>
</ItemTemplate>
</CarouselView>

<VerticalStackLayout Grid.Row="1">
<Label>Current item: @currentItem?.Name</Label>
<Label>Current position: @currentPosition</Label>
<Button Text="Set last position" OnClick="() => currentPosition = 3" />
<Button Text="Set item to Bruce" OnClick="() => currentItem = items[2]" />
</VerticalStackLayout>
</Grid>
</ContentPage>

@code {
Item[] items = new Item[] {
new("Nemo", "https://static.wikia.nocookie.net/pixar/images/a/aa/Nemo-FN.png/revision/latest/smart/width/250/height/250?cb=20160710221104"),
new("Dory", "https://static.wikia.nocookie.net/pixar/images/1/1f/Dory-white.jpg/revision/latest/scale-to-width-down/350?cb=20110924203518"),
new("Bruce", "https://static.wikia.nocookie.net/pixar/images/e/e3/Bruce-render.png/revision/latest/scale-to-width-down/350?cb=20181210152244"),
new("Gill", "https://static.wikia.nocookie.net/pixar/images/7/72/Gill.png/revision/latest/scale-to-width-down/350?cb=20210322233843")
};

Item currentItem;
int currentPosition;

record Item(string Name, ImageSource Image);
}
1 change: 1 addition & 0 deletions samples/ControlGallery/Views/PlaygroundList.razor
Original file line number Diff line number Diff line change
@@ -17,6 +17,7 @@
<Button Text="Grids" OnClick="@(async () => await NavigationManager.NavigateToAsync("/layouts/grids"))" />
<Button Text="AbsoluteLayouts" OnClick="@(async () => await NavigationManager.NavigateToAsync("/layouts/absolute"))" />
<Button Text="FlexLayouts" OnClick="@(async () => await NavigationManager.NavigateToAsync("/layouts/flex"))" />
<Button Text="CarouselView" OnClick="@(async () => await NavigationManager.NavigateToAsync("/carouselviewplayground"))" />
</StackLayout>
</ScrollView>
</ContentPage>
96 changes: 96 additions & 0 deletions src/BlazorBindings.Maui/Elements/CarouselView.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

using BlazorBindings.Core;
using BlazorBindings.Maui.Elements.Handlers;
using Microsoft.AspNetCore.Components;
using Microsoft.Maui;
using MC = Microsoft.Maui.Controls;

namespace BlazorBindings.Maui.Elements
{
public class CarouselView<T> : ItemsView<T>
{
private T currentItem;
private bool _currentItemSet;

static CarouselView()
{
ElementHandlerRegistry.RegisterElementHandler<CarouselView<T>>(
renderer => new CarouselViewHandler(renderer, new MC.CarouselView()));
}

[Parameter] public bool? IsBounceEnabled { get; set; }
[Parameter] public bool? IsScrollAnimated { get; set; }
[Parameter] public bool? IsSwipeEnabled { get; set; }
[Parameter] public MC.LinearItemsLayout ItemsLayout { get; set; }
[Parameter] public bool? Loop { get; set; }
[Parameter] public Thickness? PeekAreaInsets { get; set; }
[Parameter] public int? Position { get; set; }
[Parameter] public EventCallback<int> PositionChanged { get; set; }
[Parameter] public EventCallback<T> CurrentItemChanged { get; set; }

[Parameter]
public T CurrentItem
{
get => currentItem;
set
{
// When T is struct type (e.g. int), we need to be able to understand
// if the property was set to a default value (e.g. 0) or it was not set at all.
_currentItemSet = true;
currentItem = value;
}
}

public new MC.CarouselView NativeControl => (ElementHandler as CarouselViewHandler)?.CarouselViewControl;

protected override void RenderAttributes(AttributesBuilder builder)
{
base.RenderAttributes(builder);

if (IsBounceEnabled != null)
{
builder.AddAttribute(nameof(IsBounceEnabled), IsBounceEnabled.Value);
}
if (IsScrollAnimated != null)
{
builder.AddAttribute(nameof(IsScrollAnimated), IsScrollAnimated.Value);
}
if (IsSwipeEnabled != null)
{
builder.AddAttribute(nameof(IsSwipeEnabled), IsSwipeEnabled.Value);
}
if (ItemsLayout != null)
{
builder.AddAttribute(nameof(ItemsLayout), AttributeHelper.ObjectToDelegate(ItemsLayout));
}
if (Loop != null)
{
builder.AddAttribute(nameof(Loop), Loop.Value);
}
if (PeekAreaInsets != null)
{
builder.AddAttribute(nameof(PeekAreaInsets), AttributeHelper.ThicknessToString(PeekAreaInsets.Value));
}
if (Position != null)
{
builder.AddAttribute(nameof(Position), Position.Value);
}
if (_currentItemSet && CurrentItem != null)
{
builder.AddAttribute(nameof(CurrentItem), AttributeHelper.ObjectToDelegate(CurrentItem)); ;
}
if (PositionChanged.HasDelegate)
{
builder.AddAttribute("onPositionChanged", EventCallback.Factory.Create<MC.PositionChangedEventArgs>(this,
args => PositionChanged.InvokeAsync(args.CurrentPosition)));
}
if (CurrentItemChanged.HasDelegate)
{
builder.AddAttribute("onCurrentItemChanged", EventCallback.Factory.Create<MC.CurrentItemChangedEventArgs>(this,
args => CurrentItemChanged.InvokeAsync((T)args.CurrentItem)));
}
}
}
}
94 changes: 94 additions & 0 deletions src/BlazorBindings.Maui/Elements/Handlers/CarouselViewHandler.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

using BlazorBindings.Core;
using Microsoft.Maui;
using System;
using MC = Microsoft.Maui.Controls;

namespace BlazorBindings.Maui.Elements.Handlers
{
public class CarouselViewHandler : ItemsViewHandler
{
private static readonly bool IsBounceEnabledDefaultValue = MC.CarouselView.IsBounceEnabledProperty.DefaultValue is bool value ? value : default;
private static readonly bool IsScrollAnimatedDefaultValue = MC.CarouselView.IsScrollAnimatedProperty.DefaultValue is bool value ? value : default;
private static readonly bool IsSwipeEnabledDefaultValue = MC.CarouselView.IsSwipeEnabledProperty.DefaultValue is bool value ? value : default;
private static readonly MC.LinearItemsLayout ItemsLayoutDefaultValue = MC.CarouselView.ItemsLayoutProperty.DefaultValue is MC.LinearItemsLayout value ? value : default;
private static readonly bool LoopDefaultValue = MC.CarouselView.LoopProperty.DefaultValue is bool value ? value : default;
private static readonly Thickness PeekAreaInsetsDefaultValue = MC.CarouselView.PeekAreaInsetsProperty.DefaultValue is Thickness value ? value : default;
private static readonly int PositionDefaultValue = MC.CarouselView.PositionProperty.DefaultValue is int value ? value : default;

public CarouselViewHandler(NativeComponentRenderer renderer, MC.CarouselView carouselViewControl) : base(renderer, carouselViewControl)
{
CarouselViewControl = carouselViewControl ?? throw new ArgumentNullException(nameof(carouselViewControl));

Initialize(renderer);
}

public MC.CarouselView CarouselViewControl { get; }

public override void ApplyAttribute(ulong attributeEventHandlerId, string attributeName, object attributeValue, string attributeEventUpdatesAttributeName)
{
switch (attributeName)
{
case nameof(MC.CarouselView.IsBounceEnabled):
CarouselViewControl.IsBounceEnabled = AttributeHelper.GetBool(attributeValue, IsBounceEnabledDefaultValue);
break;
case nameof(MC.CarouselView.IsScrollAnimated):
CarouselViewControl.IsScrollAnimated = AttributeHelper.GetBool(attributeValue, IsScrollAnimatedDefaultValue);
break;
case nameof(MC.CarouselView.IsSwipeEnabled):
CarouselViewControl.IsSwipeEnabled = AttributeHelper.GetBool(attributeValue, IsSwipeEnabledDefaultValue);
break;
case nameof(MC.CarouselView.ItemsLayout):
CarouselViewControl.ItemsLayout = AttributeHelper.DelegateToObject(attributeValue, ItemsLayoutDefaultValue);
break;
case nameof(MC.CarouselView.Loop):
CarouselViewControl.Loop = AttributeHelper.GetBool(attributeValue, LoopDefaultValue);
break;
case nameof(MC.CarouselView.PeekAreaInsets):
CarouselViewControl.PeekAreaInsets = AttributeHelper.StringToThickness(attributeValue, PeekAreaInsetsDefaultValue);
break;
case nameof(MC.CarouselView.Position):
CarouselViewControl.Position = AttributeHelper.GetInt(attributeValue, PositionDefaultValue);
break;
case nameof(MC.CarouselView.CurrentItem):
CarouselViewControl.CurrentItem = AttributeHelper.DelegateToObject<object>(attributeValue);
break;
default:
base.ApplyAttribute(attributeEventHandlerId, attributeName, attributeValue, attributeEventUpdatesAttributeName);
break;
}
}

private void Initialize(NativeComponentRenderer renderer)
{
ConfigureEvent(
eventName: "onPositionChanged",
setId: id => PositionChangedEventHandlerId = id,
clearId: id => { if (PositionChangedEventHandlerId == id) { PositionChangedEventHandlerId = 0; } });
CarouselViewControl.PositionChanged += (s, e) =>
{
if (PositionChangedEventHandlerId != default)
{
renderer.Dispatcher.InvokeAsync(() => renderer.DispatchEventAsync(PositionChangedEventHandlerId, null, e));
}
};

ConfigureEvent(
eventName: "onCurrentItemChanged",
setId: id => CurrentItemChangedEventHandlerId = id,
clearId: id => { if (CurrentItemChangedEventHandlerId == id) { CurrentItemChangedEventHandlerId = 0; } });
CarouselViewControl.CurrentItemChanged += (s, e) =>
{
if (CurrentItemChangedEventHandlerId != default && e.CurrentItem != null)
{
renderer.Dispatcher.InvokeAsync(() => renderer.DispatchEventAsync(CurrentItemChangedEventHandlerId, null, e));
}
};
}

public ulong PositionChangedEventHandlerId { get; set; }
public ulong CurrentItemChangedEventHandlerId { get; set; }
}
}
1 change: 1 addition & 0 deletions src/ComponentWrapperGenerator/TypesToGenerate.txt
Original file line number Diff line number Diff line change
@@ -5,6 +5,7 @@ BaseShellItem
BoxView
Brush
Button
#CarouselView // Manually written to use custom logic for generics and binding
CheckBox
#CollectionView // Manually written to use custom logic for generics and binding
ContentPage