DevExpress Image Picker

• Oct 15, 2019
• 2 minutes to read

The DevExpress Image Picker dialog integrated into Visual Studio allows you to configure images for WPF controls. The Image Picker displays a collection of raster and vector icons from Developer Express and images the user added to the solution.

Configure Images at Design-Time

Use the Smart Tag panel to invoke the Image Picker for a specific property of a DevExpress control. The Image Picker displays images from the application’s solution and images stored in the DevExpress.Images.v19.2.dll assembly. Choose the required image from the Image Picker and click OK to assign it.

You can also launch the Image Picker in standalone mode. To do this, click the Run Image Picker item in the Visual Studio’s DevExpress menu. Alternatively, locate the ImagePicker.v19.2.exe executable in the DevExpress installation folder. The default path is “C:\Program Files (x86)\DevExpress 19.2\Components\Tools\Components Tools\ImagePicker.v19.2.exe”.

In this scenario, the Image Picker shows only the images stored in the DevExpress.Images.v19.2.dll assembly.

The standalone Image Picker displays the path to a selected image in the System.Uri and DXImage formats. You can use the path to specify images in markup. The code sample below demonstrates how to set the BarButtonItem.Glyph and BarButtonItem.LargeGlyph properties using DXImage paths:

XAML

 <dxr:RibbonControl>
    <dxr:RibbonDefaultPageCategory>
        <dxr:RibbonPage Caption="Home">
            <dxr:RibbonPageGroup>
                <dxb:BarButtonItem Content="Open" 
                    Glyph="{dx:DXImage Image=Open_16x16.png}" 
                    LargeGlyph="{dx:DXImage Image=Open_32x32.png}"
                    RibbonStyle="Large"/>
                <dxb:BarButtonItem Content="New" 
                    Glyph="{dx:DXImage Image=New_16x16.png}" 
                    LargeGlyph="{dx:DXImage Image=New_32x32.png}"  
                    RibbonStyle="Large"/>
            </dxr:RibbonPageGroup>                   
        </dxr:RibbonPage>
    </dxr:RibbonDefaultPageCategory>
</dxr:RibbonControl>

The image below shows the result:

Specify Images in Code-Behind

Use the following methods to get an image from the Image Picker in code:

Method	Description
DXImageHelper.GetImageSource	Retrieves the specified image from the library.
DXImageHelper.GetImageUri	Returns a Uri that defines the specified image’s location.

The following code sample demonstrates how to specify images in code-behind:

C#

 BarButtonItem bOpen = new BarButtonItem {
    Content = "Open",
    Glyph = DXImageHelper.GetImageSource("Open", ImageSize.Size16x16),
    LargeGlyph = DXImageHelper.GetImageSource("Open", ImageSize.Size32x32),
    RibbonStyle = RibbonItemStyles.Large
};
BarButtonItem bNew = new BarButtonItem {
    Content = "New",
    Glyph = DXImageHelper.GetImageSource("New", ImageSize.Size16x16),
    LargeGlyph = DXImageHelper.GetImageSource("New", ImageSize.Size32x32),
    RibbonStyle = RibbonItemStyles.Large
};

VB.NET

 Private bOpen As BarButtonItem = New BarButtonItem With {
    .Content = "Open", 
    .Glyph = DXImageHelper.GetImageSource("Open", ImageSize.Size16x16), 
    .LargeGlyph = DXImageHelper.GetImageSource("Open", ImageSize.Size32x32), 
    .RibbonStyle = RibbonItemStyles.Large
}
Private bNew As BarButtonItem = New BarButtonItem With {
    .Content = "New", 
    .Glyph = DXImageHelper.GetImageSource("New", ImageSize.Size16x16), 
    .LargeGlyph = DXImageHelper.GetImageSource("New", ImageSize.Size32x32), 
    .RibbonStyle = RibbonItemStyles.Large
}