Getting Started

This tutorial will walk you through the creation of a sample application that contains RadImageEditor.

Assembly references

In order to use RadImageEditor in your projects, you have to add references to the following assemblies:

  • Telerik.Windows.Controls

  • Telerik.Windows.Controls.ImageEditor

  • Telerik.Windows.Controls.Input

Adding RadImageEditor to the Project

The next few code examples will demonstrate how to add a RadImageEditor in XAML, load a sample picture and execute a command on that picture. Example 1 showcases a RadImageEditor and a Button defined in XAML.

Example 1: Defining a RadImageEditor in xaml

<Grid> 
    <Grid.RowDefinitions> 
        <RowDefinition /> 
        <RowDefinition Height="Auto" /> 
    </Grid.RowDefinitions> 
    <telerik:RadImageEditor x:Name="ImageEditor"/> 
    <Button Click="Button_Click" Content="Rotate picture" Grid.Row="1" /> 
</Grid> 
Example 2 shows the telerik namespace used in Example 1:

Example 2: Telerik Namespace declaration

In order to show a picture, you can set the Image property of the RadImageEditor. It is of type RadBitmap. Example 3 demonstrates how you can use the ImageExampleHelper class in order to load an Image. It assumes that there is a folder named "SampleImages" with an image named "RadImageEditor.png" inside the project.

Example 3: Load image in RadImageEditor

public partial class MainWindow : Window 
{ 
    public MainWindow() 
    { 
        InitializeComponent(); 
 
        ImageExampleHelper.LoadSampleImage(this.ImageEditor, "RadImageEditor.png"); 
    } 
 
    private void Button_Click(object sender, RoutedEventArgs e) 
    { 
        this.ImageEditor.Commands.Rotate180.Execute(this.ImageEditor); 
    } 
} 
Partial Public Class MainWindow 
Inherits Window 
 
    Public Sub New() 
        InitializeComponent() 
 
        ImageExampleHelper.LoadSampleImage(Me.ImageEditor, "RadImageEditor.png") 
    End Sub 
 
    Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs) 
        Me.ImageEditor.Commands.Rotate180.Execute(Me.ImageEditor) 
    End Sub 
End Class 

Example 4: ImageExampleHelper used in Example 3

public class ImageExampleHelper 
{ 
    private static string SampleImageFolder = "SampleImages/"; 
 
    public static void LoadSampleImage(RadImageEditorUI imageEditorUI, string image) 
    { 
        using (Stream stream = Application.GetResourceStream(GetResourceUri(SampleImageFolder + image)).Stream) 
        { 
            imageEditorUI.Image = new Telerik.Windows.Media.Imaging.RadBitmap(stream); 
            imageEditorUI.ApplyTemplate(); 
            imageEditorUI.ImageEditor.ScaleFactor = 0; 
        } 
    } 
 
    public static Uri GetResourceUri(string resource) 
    { 
        AssemblyName assemblyName = new AssemblyName(typeof(ImageExampleHelper).Assembly.FullName); 
        string resourcePath = "/" + assemblyName.Name + ";component/" + resource; 
        Uri resourceUri = new Uri(resourcePath, UriKind.Relative); 
 
        return resourceUri; 
    } 
} 
Public Class ImageExampleHelper 
Private Shared SampleImageFolder As String = "SampleImages/" 
 
Public Shared Sub LoadSampleImage(ByVal imageEditorUI As RadImageEditorUI, ByVal image As String) 
    Using stream As Stream = Application.GetResourceStream(GetResourceUri(SampleImageFolder & image)).Stream 
        imageEditorUI.Image = New Telerik.Windows.Media.Imaging.RadBitmap(stream) 
        imageEditorUI.ApplyTemplate() 
        imageEditorUI.ImageEditor.ScaleFactor = 0 
    End Using 
End Sub 
 
Public Shared Function GetResourceUri(ByVal resource As String) As Uri 
    Dim assemblyName As New AssemblyName(GetType(ImageExampleHelper).Assembly.FullName) 
    Dim resourcePath As String = "/" & assemblyName.Name & ";component/" & resource 
    Dim resourceUri As New Uri(resourcePath, UriKind.Relative) 
 
    Return resourceUri 
End Function 
End Class 

Figure 1: Result from the above examples

RadImageEditor rotating image

Commands and Tools

Example 3 demonstrates the usage of a single command over the loaded image. However, the RadImageEditor provides many more Commands and Tools, which can be executed both in code-behind or XAML.

RadImageEditorUI

RadImageEditor is easy to integrate with all kinds of UI thanks to the commanding mechanism that it employs. It has a good-to-go UI that comes out of the box. That is RadImageEditorUI, which is quite easily wired to work with the commands and tools that RadImageEditor exposes. As both controls follow closely the command pattern, they can be set up to work with little to no code-behind. However, you can implement and wire custom UI, too.

See Also

In this article
Not finding the help you need? Improve this article