Skip to content

Commit

Permalink
messing with image on button
Browse files Browse the repository at this point in the history
  • Loading branch information
@Programming-With-Chris
Programming-With-Chris committed Aug 16, 2022
1 parent 09a25cb commit 78708ee
Show file tree
Hide file tree
Showing 11 changed files with 115 additions and 52 deletions.
14 changes: 14 additions & 0 deletions ShoppingList/Controls/CircularButton.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
using System;
namespace ShoppingList.Controls;

public class CircularButton : GraphicsView, IGraphicsView
{
public new IDrawable Drawable { get; set; }

public CircularButton()
{
var drawable = new ShoppingList.Drawable.CircularButton();
this.Drawable = drawable;
}
}

31 changes: 31 additions & 0 deletions ShoppingList/Controls/CircularLottie.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
using System;
using SkiaSharp;
using SkiaSharp.Extended.UI.Controls;

namespace ShoppingList.Controls;

public class CircularLottie : SKLottieView
{
public new Color BackgroundColor = Colors.Transparent;


public CircularLottie() : base()
{
Console.Write("test");
this.IsAnimationEnabled = true;
//base.OnPaintSurface();
}

protected override void OnPaintSurface(SKCanvas canvas, SKSize size)
{
Console.Write("test");
using var paint = new SKPaint
{
IsAntialias = true,
Color = SKColors.Blue
};
canvas.DrawCircle(200, 200, 100, paint);

}
}

35 changes: 20 additions & 15 deletions ShoppingList/Drawable/CircularButton.cs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
using System;
using System.Reflection;
using Microsoft.Maui.Graphics.Platform;

namespace ShoppingList.Drawable;

public class CircularButton : IDrawable
Expand All @@ -10,37 +13,39 @@ public class CircularButton : IDrawable
public Microsoft.Maui.Graphics.IImage Image { get; set; }

public int Width { get; set; } = 0;
public int Height { get; set; } = 0;
public int Height { get; set; } = 0;

public void Draw(ICanvas canvas, RectF dirtyRect)
{
canvas.StrokeColor = StrokeColor;

if (AreShadowsEnabled)
canvas.EnableDefaultShadow();

var width = Width != 0 ? Width : dirtyRect.Width;
if (AreShadowsEnabled)
canvas.EnableDefaultShadow();

var width = Width != 0 ? Width : dirtyRect.Width;
var height = Height != 0 ? Height : dirtyRect.Height;

var limitingDim = width > height ? height : width;
PointF centerOfCircle = new PointF(width / 2, height / 2);

// canvas.BlendMode = BlendMode.SourceOut;
canvas.FillColor = Colors.White;
canvas.FillCircle(centerOfCircle, limitingDim / 2);
// canvas.BlendMode = BlendMode.SourceOut;
//canvas.FillColor = Colors.White;
//canvas.FillCircle(centerOfCircle, limitingDim / 2);

Microsoft.Maui.Graphics.IImage image;
Assembly assembly = GetType().GetTypeInfo().Assembly;
using (Stream stream = assembly.GetManifestResourceStream("ShoppingList.Resources.Images.plus_sign.png"))
{
image = PlatformImage.FromStream(stream);
Image = image;
}
if (Image != null)
{
ImagePaint imagePaint = new ImagePaint();
imagePaint.Image = this.Image;
canvas.SetFillPaint(imagePaint, RectF.Zero);

canvas.FillColor = Colors.White;
canvas.FillCircle(centerOfCircle, limitingDim / 2);
canvas.DrawImage(Image, dirtyRect.X + dirtyRect.Width / 4, dirtyRect.Y + dirtyRect.Height / 4, dirtyRect.Width / 2, dirtyRect.Height / 2);
}


// canvas.DrawImage(Image, centerOfCircle.X, centerOfCircle.Y, limitingDim, limitingDim);

}
}

3 changes: 3 additions & 0 deletions ShoppingList/MauiProgram.cs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
using ShoppingList.ViewModels;
using SkiaSharp.Views.Maui.Controls.Hosting;

namespace ShoppingList;

Expand All @@ -9,10 +10,12 @@ public static MauiApp CreateMauiApp()
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.UseSkiaSharp()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
fonts.AddFont("Font Awesome 6 Free-Regular-400.otf");
});

builder.Services.AddSingleton<UserListService>();
Expand Down
Binary file added ShoppingList/Resources/Fonts/Font Awesome 6 Free-Regular-400.otf
View file
Binary file not shown.
Binary file added ShoppingList/Resources/Images/plus_sign.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.
1 change: 0 additions & 1 deletion ShoppingList/Resources/Images/plus_solid.svg
View file

This file was deleted.

1 change: 1 addition & 0 deletions ShoppingList/Resources/Raw/69114-shopping-cart.json
View file

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions ShoppingList/ShoppingList.csproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,9 @@
<None Remove="Microsoft.Data.Sqlite.Core" />
<None Remove="sqlite-net-static" />
<None Remove="Drawable\" />
<None Remove="Resources\Images\plus_solid.svg" />
<None Remove="Resources\APIs\krogerapiconfig.json" />
<None Remove="Controls\" />
<None Remove="Resources\Images\plus_sign.png" />
</ItemGroup>

<ItemGroup>
Expand All @@ -95,6 +96,7 @@
<PackageReference Include="CommunityToolkit.Diagnostics" Version="8.0.0" />
<PackageReference Include="CommunityToolkit.Mvvm" Version="8.0.0" />
<PackageReference Include="Microsoft.Maui.Graphics" Version="6.0.403" />
<PackageReference Include="SkiaSharp.Extended.UI.Maui" Version="2.0.0-preview.59" />
<PackageReference Include="SQLiteNetExtensions" Version="2.1.0" />
<PackageReference Include="sqlite-net-static" Version="1.8.116" />
</ItemGroup>
Expand Down Expand Up @@ -144,10 +146,11 @@
<ItemGroup>
<Folder Include="Resources\APIs\" />
<Folder Include="Drawable\" />
<Folder Include="Controls\" />
</ItemGroup>

<ItemGroup>
<EmbeddedResource Include="Resources\Images\plus_solid.svg" />
<EmbeddedResource Include="Resources\Images\plus_sign.png" />
</ItemGroup>

<!-- <PropertyGroup Condition="$(TargetFramework.Contains('-ios'))">
Expand All @@ -157,7 +160,4 @@
<ArchiveOnBuild>true</ArchiveOnBuild>
<TcpPort>58181</TcpPort>
</PropertyGroup>-->
<ItemGroup>
<MauiImage Remove="Resources\Images\plus_solid.svg" />
</ItemGroup>
</Project>
51 changes: 27 additions & 24 deletions ShoppingList/View/UserListDetails.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
xmlns:model="clr-namespace:ShoppingList.Model"
xmlns:viewmodel="clr-namespace:ShoppingList.ViewModels"
xmlns:drawables="clr-namespace:ShoppingList.Drawable"
xmlns:controls="clr-namespace:ShoppingList.Controls"
xmlns:skiasharp="clr-namespace:SkiaSharp.Extended.UI.Controls;assembly=SkiaSharp.Extended.UI"
x:DataType="viewmodel:UserListDetailViewModel"
x:Class="ShoppingList.UserListDetails"
Title="{Binding Title}">
Expand All @@ -17,10 +19,11 @@
/>
</Shell.BackButtonBehavior>



<Grid ColumnDefinitions="*,*,*"
ColumnSpacing="3"
RowDefinitions="*,Auto">
RowDefinitions="*">

<!--<RefreshView Grid.ColumnSpan="3" Command="{Binding RefreshUserListDetailScreenCommand}"
CommandParameter="UserListCollectionView"
Expand Down Expand Up @@ -75,44 +78,44 @@
Grid.ColumnSpan="2"
HorizontalOptions="End"
/>
<!--<VerticalStackLayout Grid.Column="5"
Grid.Row="0"
HorizontalOptions="End">
<Label Text="{Binding Category}" />
<Label Text="{Binding Description}" />
<Label Text="{Binding Aisle}" />
</VerticalStackLayout>-->

<!--<ImageButton Source="ellipsis_vertical_outline.svg"
Scale="1"
HeightRequest="25"
Grid.Column="3"
Grid.Row="1"
VerticalOptions="Center"
HorizontalOptions="End"
Clicked="{Binding PullUpItemOptionModal}"/>
-->
</Grid>
</Frame>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<!-- </RefreshView>-->

<GraphicsView Drawable="{StaticResource circularButton}"
Grid.Row="2"
<controls:CircularButton
Grid.Row="0"
Grid.Column="0"
x:Name="CircularButton"
WidthRequest="100"
HeightRequest="100"
WidthRequest="75"
HeightRequest="75"
BackgroundColor="Transparent"
VerticalOptions="End"
HorizontalOptions="Start"
>
<GraphicsView.GestureRecognizers>
<TapGestureRecognizer Command="{Binding NewItemDialogCommand}"/>

</GraphicsView.GestureRecognizers>
</GraphicsView>
</controls:CircularButton>

<!--<skiasharp:SKLottieView x:Name="CartLottie"
WidthRequest="100"
HeightRequest="100"
Grid.Row="0"
Grid.Column="0"
VerticalOptions="End"
HorizontalOptions="Start"
Source="69114-shopping-cart.json"
BackgroundColor="{StaticResource Primary}">
<skiasharp:SKLottieView.GestureRecognizers>
<TapGestureRecognizer Command="{Binding NewItemDialogCommand}"/>
</skiasharp:SKLottieView.GestureRecognizers>
</skiasharp:SKLottieView>-->

</Grid>

Expand Down
21 changes: 14 additions & 7 deletions ShoppingList/View/UserListDetails.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
using System.Reflection;
using ShoppingList.ViewModels;
using IImage = Microsoft.Maui.Graphics.IImage;
using SkiaSharp.Extended.UI.Controls;
using SkiaSharp.Views.Maui.Controls;
using ShoppingList.Controls;

namespace ShoppingList;

Expand All @@ -17,13 +20,17 @@ public UserListDetails(UserListDetailViewModel userListDetailViewModel)
BindingContext = userListDetailViewModel;
_ulvm = userListDetailViewModel;

var circularButtonGV = this.FindByName("CircularButton") as GraphicsView;
var circularButton = circularButtonGV.Drawable as CircularButton;
circularButton.StrokeColor = Colors.White;
var cartLottie = this.FindByName("SKLottieViewControlTemplate");
//var canvas = cartLottie.OnPaintSurface();


circularButton.AreShadowsEnabled = true;
circularButton.Width = 75;
circularButton.Height = 75;
//var circularButtonGV = this.FindByName("CircularButton") as GraphicsView;
//var circularButton = circularButtonGV.Drawable as CircularButton;
//circularButton.StrokeColor = Colors.White;

//circularButton.AreShadowsEnabled = true;
//circularButton.Width = 75;
//circularButton.Height = 75;

//IImage image;
//Assembly assembly = GetType().GetTypeInfo().Assembly;
Expand All @@ -32,7 +39,7 @@ public UserListDetails(UserListDetailViewModel userListDetailViewModel)
// image = PlatformImage.FromStream(stream);
//}
//circularButton.Image = image;
circularButtonGV.Invalidate();
//circularButtonGV.Invalidate();


}
Expand Down

0 comments on commit 78708ee

Please sign in to comment.