I have a Windows Forms application with the following drawing logic using Graphics and PictureBox:
I'm currently porting this application to Xamarin.Forms and using SkiaSharp for drawing. My UI structure includes an Image inside a StackLayout. I'm seeking assistance in translating the existing drawing logic to work with Xamarin.Forms and SkiaSharp.
private void pictureboxpaint()
{
pictureBox1.Image = new Bitmap(pictureBox1.Width, pictureBox1.Height);
using (Graphics gfx = Graphics.FromImage(pictureBox1.Image))
{
try
{
gfx.ScaleTransform(piczoom, piczoom);
}
catch { }
gfx.InterpolationMode = InterpolationMode.NearestNeighbor;
ColorMatrix matrix = new ColorMatrix();
ImageAttributes attributes = new ImageAttributes();
foreach (Control c in flowLayoutPanel1.Controls)
{
if (((Label)c.Controls[0]).Text == " ")
{
string[] ll3 = ((PictureBox)c.Controls[1]).Name.Contains(".") ? ((PictureBox)c.Controls[1]).Name.Split('.') : ((PictureBox)c.Controls[1]).Name.Split(',');
matrix.Matrix33 = (float)int.Parse(ll3[6]) / 100;
attributes.SetColorMatrix(matrix, ColorMatrixFlag.Default, ColorAdjustType.Bitmap);
gfx.DrawImage(((PictureBox)c.Controls[1]).Image, new Rectangle(int.Parse(ll3[0]), int.Parse(ll3[1]), int.Parse(ll3[11]), int.Parse(ll3[12])), int.Parse(ll3[2]), int.Parse(ll3[3]), int.Parse(ll3[4]), int.Parse(ll3[5]), GraphicsUnit.Pixel, attributes);
if (ll3[13] != "0")
{
SolidBrush solidBrush;
if (ll3[13] == "1")
{
solidBrush = new SolidBrush(Color.Red);
gfx.DrawRectangle(new Pen(Color.SkyBlue, 5), int.Parse(ll3[0]), int.Parse(ll3[1]), int.Parse(ll3[11]), int.Parse(ll3[12]));
}
else
{
gfx.DrawRectangle(new Pen(Color.Red, 5), int.Parse(ll3[0]), int.Parse(ll3[1]), int.Parse(ll3[11]), int.Parse(ll3[12]));
solidBrush = new SolidBrush(Color.Blue);
}
gfx.FillEllipse(solidBrush, int.Parse(ll3[0]), int.Parse(ll3[1]) + int.Parse(ll3[12]) / 2, 10, 10);
gfx.FillEllipse(solidBrush, int.Parse(ll3[0]), int.Parse(ll3[1]), 10, 10);
gfx.FillEllipse(solidBrush, int.Parse(ll3[0]) + int.Parse(ll3[11]) / 2, int.Parse(ll3[1]) + int.Parse(ll3[12]), 10, 10);
gfx.FillEllipse(solidBrush, int.Parse(ll3[0]) + int.Parse(ll3[11]), int.Parse(ll3[1]), 10, 10);
gfx.FillEllipse(solidBrush, int.Parse(ll3[0]), int.Parse(ll3[1]) + int.Parse(ll3[12]), 10, 10);
gfx.FillEllipse(solidBrush, int.Parse(ll3[0]) + int.Parse(ll3[11]), int.Parse(ll3[1]) + int.Parse(ll3[12]), 10, 10);
gfx.FillEllipse(solidBrush, int.Parse(ll3[0]) + int.Parse(ll3[11]), int.Parse(ll3[1]) + int.Parse(ll3[12]) / 2, 10, 10);
gfx.FillEllipse(solidBrush, int.Parse(ll3[0]) + int.Parse(ll3[11]) / 2, int.Parse(ll3[1]), 10, 10);
}
}
}
}
drawmarkers();
}
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="BeautyFly.MainPage"
BackgroundColor="#404040">
<StackLayout>
<StackLayout>
<ScrollView Orientation="Horizontal">
<StackLayout Orientation="Horizontal">
<Button Text="File" BackgroundColor="Transparent" TextColor="White" Clicked="Button_Clicked" TextTransform="None"/>
<Button Text="Settings" BackgroundColor="Transparent" TextColor="White" Clicked="Button_Clicked" TextTransform="None"/>
<Button Text="Filters" BackgroundColor="Transparent" TextColor="White" Clicked="Button_Clicked" TextTransform="None"/>
</StackLayout>
</ScrollView>
<ScrollView x:Name="scrol" Orientation="Horizontal" Padding="10,0">
<StackLayout Orientation="Horizontal">
<ImageButton ClassId="BIE Default startup image@0,0,0,0,640,640,100,0,0,640,640,640,640,0@@@0@1@0" Source="a" HeightRequest="60" WidthRequest="60" Aspect="AspectFit" BackgroundColor="Transparent" Clicked="ImageButton_Clicked"/>
</StackLayout>
</ScrollView>
<!-- Add more elements as needed -->
</StackLayout>
<StackLayout>
<Image x:Name="picturebox2" Aspect="AspectFit" />
</StackLayout>
<StackLayout>
<Image x:Name="picturebox" Source="a" Aspect="AspectFit" />
</StackLayout>
<ListView x:Name="menuListView" ItemSelected="menuListView_ItemSelected" IsVisible="false">
<ListView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>add</x:String>
<x:String>open</x:String>
</x:Array>
</ListView.ItemsSource>
</ListView>
<ListView x:Name="menuListView1" ItemSelected="menuListView1_ItemSelected" IsVisible="false">
<ListView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>Select</x:String>
<x:String>Hide</x:String>
<x:String>Editor</x:String>
<x:String>Remove</x:String>
<x:String>Lock</x:String>
</x:Array>
</ListView.ItemsSource>
</ListView>
</StackLayout>
</ContentPage>