Skip to main content

DevExpress v24.1 Update — Your Feedback Matters

Our What's New in v24.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DevExpress Image & Image Editor for .NET MAUI

  • 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.

DevExpress DXImage for MAUI - Tint color

View Example

<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.

DevExpress MAUI ImageEdit- Crop Area appearance

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.

DevExpress MAUI ImageEdit- Crop area ratio

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.

DevExpress MAUI ImageEdit- Crop area 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.

DevExpress MAUI ImageEdit- Toolbar

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:

    <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>

Contact Edit Form

Contact Edit Form Scenario

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