How to show dimension of shapes while resizing?

1 min read

SfImageEditor allows you to show dimension of shapes, while resizing.

Step 1: Create image editor sample with all necessary assemblies.

Please refer the below link to create a simple SfImageEditor sample along with the ways to configure it.

https://help.syncfusion.com/xamarin/sfimageeditor/getting-started

Step 2: On selecting a shape, ItemSelected event will be triggered. From this, you will get settings of selected shape with Bounds property as like below,

ImageEditor.ItemSelected += ImageEditor_ItemSelected;

private void ImageEditor_ItemSelected(object sender, Syncfusion.SfImageEditor.XForms.ItemSelectedEventArgs args)
        {
         labelGrid.IsVisible = true;           
            if (args.Settings is PenSettings)
                label.BindingContext = (args.Settings as PenSettings);
            else if (args.Settings is TextSettings)
                label.BindingContext = (args.Settings as TextSettings);
        }

Step 3: Please refer the following code snippet to bind Bounds property from PenSettings to get dimension of selected shape while resizing.

Note:

The value of the Bounds will be in percentage. Using Converter to convert the Bounds value to pixel.

Xaml:

Text="{Binding Bounds,Converter={StaticResource dimension} }"

<local:CustomLabel x:Name="label" WidthRequest="100" Opacity="0.5" HeightRequest="30" 
           HorizontalOptions="Start" VerticalOptions="Start" IsVisible="False"  
           TextColor="White"  TranslationY="60" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"    
            Text="{Binding Bounds,Converter={StaticResource dimension} }" 
            CurvedBackgroundColor="Black" CurvedCornerRadius="12">
        </local:CustomLabel>