DevExpress Image & Image Editor for .NET MAUI

• Aug 16, 2024
• 3 minutes to read

The DevExpress Mobile UI for .NET MAUI suite ships with controls that allow users to display and edit images.

Image

The DevExpress DXImage for .NET MAUI allows users to display an image. The DXImage extends the standard Image component functionality with the TintColor property. Use the TintColor property to specify a fill color for a vector image.

Download and install the DevExpress.Maui.Core package from the DevExpress NuGet Gallery to obtain the DXImage component. See the following help topic for more information: Get Started with DevExpress Mobile UI for .NET MAUI.

This example demonstrates how you can use the DXImage control to display an icon within a pop-up view.

View Example

XAML

<dx:DXImage Source="mail_light" VerticalOptions="Center" TintColor="{AppThemeBinding Light={StaticResource Gray500}, Dark={StaticResource Gray200}}"/>

Image Editor

The DevExpress Mobile UI for .NET MAUI suite contains the ImageEdit component that allows users to crop, rotate, flip images, and save the result in a supported format.

Download and install the DevExpress.Maui.Editors package from the DevExpress NuGet Gallery to obtain the ImageEdit component. See the following help topic for more information: Get Started with DevExpress Mobile UI for .NET MAUI.

Crop Area

The image editor allows you to crop the source image.

Use the following properties to configure the crop area:

CropAreaOffset

Gets or sets the crop area offset. This is a bindable property.

CropAreaBorderColor

Gets or sets the crop area border color. This is a bindable property.

CropAreaBorderThickness

Gets or sets the crop area border thickness. This is a bindable property.

CropAreaRatioX | CropAreaRatioY

Allow you to specify the aspect ratio for the crop area.

CropAreaShape

Allows you to specify the crop area shape. You can also use the SwitchCropAreaShape() method to switch the crop area between ellipse and rectangle shapes.

Flip and Rotate Actions

The image editor allows you to flip the image horizontally and vertically. You can also rotate the image to the left or right by 90 degrees.

Use the following API to perform flip and rotate actions:

FlipHorizontal()

Flips the edit image horizontally (swap left and right).

FlipVertical()

Flips the edit image vertically (swap top and bottom).

RotateLeft()

Rotates the edit image to the left by 90º.

RotateRight()

Rotates the edit image to the right by 90º.

Save Image

Use the following methods to save the image:

SaveAsBase64(ImageFormat, Boolean)

Saves the edit image as a Base64 string.

SaveAsImageSource(ImageFormat, Boolean)

Saves the edit image as an ImageSource.

SaveAsStream(Stream, ImageFormat, Boolean)

Saves the edit image to a stream.

Note that the Boolean parameter allows you to disable the crop area.

Toolbar with Controls

You can use the ImageEdit control together with DXToolbar.

The following example creates a toolbar with custom controls that allow you to rotate the edit image to the left or right by 90 degrees, flip the edit image horizontally or vertically, and switch the crop area between ellipse and rectangle shapes:

XAML

    <ContentPage.Resources>
        <Style TargetType="dxc:ToolbarButton">
            <Setter Property="IconColor" Value="White"/>
            <Setter Property="IconWidth" Value="40"/>
            <Setter Property="IconHeight" Value="40"/>
        </Style>
    </ContentPage.Resources>

    <Grid>
        <dxe:ImageEdit x:Name="editor"
            MaxScaleFactor="3"
            CropAreaBorderThickness="1"
            CropAreaRatioX="1"
            CropAreaRatioY="1"/>

        <dxc:DXToolbar VerticalOptions="End" ItemAlignment="Fill" BackgroundColor="Black">
            <dxc:ToolbarButton 
                Icon="rotate_left"  
                Command="{Binding Source={x:Reference editor}, Path=Commands.RotateLeft}"/>
            <dxc:ToolbarButton 
                Icon="rotate_right" 
                Command="{Binding Source={x:Reference editor}, Path=Commands.RotateRight}"/>
            <dxc:ToolbarButton 
                Icon="{Binding Source={x:Reference editor}, Path=CropAreaShape}"  
                Command="{Binding Source={x:Reference editor}, Path=Commands.SwitchCropAreaShape}"/>
            <dxc:ToolbarButton 
                Icon="flip_h"  
                Command="{Binding Source={x:Reference editor}, Path=Commands.FlipHorizontal}"/>
            <dxc:ToolbarButton 
                Icon="flip_v"  
                Command="{Binding Source={x:Reference editor}, Path=Commands.FlipVertical}"/>
        </dxc:DXToolbar>
    </Grid>

Related Scenario

Contact Edit Form

This example uses the DataFormView control to implement a contact edit form. DXImage and ImageEdit controls allow users to display and edit an avatar.