In this quick tutorial, using the LEADTOOLS for WPF ImageViewer with Microsoft Expression Blend, you will design a layout and create an application that mounts a digital picture inside a digital frame. No coding is required to do this, and the entire XAML application can be created in a couple of minutes.
You can use the ImageViewer control to display almost any kind of image, anywhere in your window. In this case, we will use it to add a "picture frame" image.
From the pop-up window, click the Custom Controls tab, then ImageViewer.
This will make the ImageViewer the active control:
On the Interaction tab, under Objects and Timelines, double-click LayoutRoot to select it:
On the Properties tab at the right of the screen:
Under Common Properties, copy/paste this image address into Source: C:\Users\Public\Documents\LEADTOOLS Images\TestFrame1.JPG Note: if you did not accept program defaults on installation, the path to this image may be different on your computer
The result should look like this:
You can even display images on top of one another! In this project, we will use that feature to put a picture into the frame. The steps are the same as for the first image, except for where you draw, and which image you select for the image source. Also, because the ImageViewer is already the active control, you do not need to select it again:
On the Properties tab at the right of the screen:
Press F5 to build your application. This will take a few seconds.
When it is done, you'll have a "framed" digital picture that you can resize like any window, with the "frame" and the "picture" resized together, but treated as separate objects:
[Window1.xaml]
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="MyProject.Window1"
x:Name="Window"
Title="PictureThis!"
Width="640" Height="480" xmlns:Leadtools_Windows_Controls="clr-namespace:Leadtools.Windows.Controls;assembly=Leadtools.Windows.Controls">
<Grid x:Name="LayoutRoot">
<Leadtools_Windows_Controls:ImageViewer x:Name="Frame" Width="Auto" Height="Auto" Content="" SizeMode="Stretch">
<Leadtools_Windows_Controls:ImageViewer.Source>
<BitmapImage UriSource="file:///C:/users/Public/Documents/LEADTOOLS Images/Images/TestFrame1.jpg"/>
</Leadtools_Windows_Controls:ImageViewer.Source>
</Leadtools_Windows_Controls:ImageViewer>
<Leadtools_Windows_Controls:ImageViewer Margin="99,82,97,83" x:Name="Picture" Width="Auto" Height="Auto" Content="" SizeMode="Stretch">
<Leadtools_Windows_Controls:ImageViewer.Source>
<BitmapImage UriSource="file:///C:/users/Public/Documents/LEADTOOLS Images/Images/ScarletMaCaws.jpg"/>
</Leadtools_Windows_Controls:ImageViewer.Source>
</Leadtools_Windows_Controls:ImageViewer>
</Grid>
</Window>
Adding LEADTOOLS Controls to Microsoft Expression Blend Display Images Using Expression Blend Creating Image Lists Using Expression Blend Link an Image List to an Image Viewer Using Expression Blend Add a Magnifying Glass Using Expression Blend Adding Bitmap Effects Using Expression Blend Working with Images Using Visual Studio
Raster .NET | C API | C++ Class Library | JavaScript HTML5
Document .NET | C API | C++ Class Library | JavaScript HTML5
Medical .NET | C API | C++ Class Library | JavaScript HTML5
Medical Web Viewer .NET