#1,163 – Make an Image Clickable with a Control Template

You can allow clicking on an Image by using it as the control template for a Button.

In the example below, we define a button that consists of an image and a border that lights up when you hover over the image.

	<StackPanel>
		<Button Click="Button_Click"
                Margin="10"
			    HorizontalAlignment="Center"
			    ToolTip="Click on Fred">
			<Button.Template>
				<ControlTemplate>
					<Border x:Name="theBorder" 
                            BorderBrush="Transparent"
                            BorderThickness="2">
						<Image Source="Astaire.png" Height="45"/>
					</Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="BorderBrush" TargetName="theBorder" 
                                    Value="LightSkyBlue"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
				</ControlTemplate>
			</Button.Template>
		</Button>
	</StackPanel>

Below, we can see the clickable Image in action.
1163-001

1163-002

1163-003

#1,017 – Scaling Items in a List Using a Slider

Below is an example of using a Slider control to scale a bunch of images in an ItemsControl.  The images are displayed within a WrapPanel.  As they are resized, the WrapPanel automatically updates the layout, so that the number of rows needed to display the images changes.

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <ScrollViewer>
            <ItemsControl ItemsSource="{Binding ActorList}" Margin="20">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Image Source="{Binding Image}" Height="100">
                            <Image.LayoutTransform>
                                <ScaleTransform ScaleX="{Binding Value, ElementName=sliScale}"
                                                ScaleY="{Binding Value, ElementName=sliScale}"/>
                            </Image.LayoutTransform>
                        </Image>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </ScrollViewer>
        <Slider Name="sliScale" Grid.Row="1" Margin="10,5"
                Minimum="0.1" Maximum="3"
                Value="1.0"/>
    </Grid>

1017-001

 

1017-002

1017-003

#713 – Setting the Cursor to an Image of an UIElement While Dragging

You can use the GiveFeedback to change the cursor during a drag-and-drop operation.  You can go a bit further and set the cursor to an image that represents the user interface element that you are dragging by rendering the UIElement to a bitmap and then converting that bitmap to a cursor.

This example is based on code written by Brandon Cannaday, at http://www.switchonthecode.com/tutorials/wpf-tutorial-how-to-use-custom-cursors .  To start with, here is Brandon’s code, as modified by reader “Swythan”:

    public class CursorHelper
    {
        private static class NativeMethods
        {
            public struct IconInfo
            {
                public bool fIcon;
                public int xHotspot;
                public int yHotspot;
                public IntPtr hbmMask;
                public IntPtr hbmColor;
            }

            [DllImport("user32.dll")]
            public static extern SafeIconHandle CreateIconIndirect(ref IconInfo icon);

            [DllImport("user32.dll")]
            public static extern bool DestroyIcon(IntPtr hIcon);

            [DllImport("user32.dll")]
            [return: MarshalAs(UnmanagedType.Bool)]
            public static extern bool GetIconInfo(IntPtr hIcon, ref IconInfo pIconInfo);
        }

        [SecurityPermission(SecurityAction.LinkDemand, UnmanagedCode = true)]
        private class SafeIconHandle : SafeHandleZeroOrMinusOneIsInvalid
        {
            public SafeIconHandle()
                : base(true)
            {
            }

            override protected bool ReleaseHandle()
            {
                return NativeMethods.DestroyIcon(handle);
            }
        }

        private static Cursor InternalCreateCursor(System.Drawing.Bitmap bmp)
        {
            var iconInfo = new NativeMethods.IconInfo();
            NativeMethods.GetIconInfo(bmp.GetHicon(), ref iconInfo);

            iconInfo.xHotspot = 0;
            iconInfo.yHotspot = 0;
            iconInfo.fIcon = false;

            SafeIconHandle cursorHandle = NativeMethods.CreateIconIndirect(ref iconInfo);
            return CursorInteropHelper.Create(cursorHandle);
        }

        public static Cursor CreateCursor(UIElement element)
        {
            element.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
            element.Arrange(new Rect(new Point(), element.DesiredSize));

            RenderTargetBitmap rtb =
              new RenderTargetBitmap(
                (int)element.DesiredSize.Width,
                (int)element.DesiredSize.Height,
                96, 96, PixelFormats.Pbgra32);

            rtb.Render(element);

            var encoder = new PngBitmapEncoder();
            encoder.Frames.Add(BitmapFrame.Create(rtb));

            using (var ms = new MemoryStream())
            {
                encoder.Save(ms);
                using (var bmp = new System.Drawing.Bitmap(ms))
                {
                    return InternalCreateCursor(bmp);
                }
            }
        }
    }

Now that we have the helper class, we can use it to set the cursor to the image of a Label that we are dragging. Here’s the XAML defining a label to drag from and one to drag to.

    <StackPanel Orientation="Vertical" HorizontalAlignment="Center" Margin="45">
        <Label Content="Data to drag" Background="AliceBlue" Padding="15,10"
               MouseLeftButtonDown="Label_MouseLeftButtonDown"
               GiveFeedback="Label_GiveFeedback"/>
        <Label Content="Drag to here" Background="MediumSpringGreen" Padding="15,10" Margin="20"
               AllowDrop="True" Drop="Label_Drop"/>
    </StackPanel>

Here’s the relevant drag-and-drop related code:

        private void Label_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            DataObject data = new DataObject(DataFormats.Text, ((Label)e.Source).Content);

            DragDrop.DoDragDrop((DependencyObject)e.Source, data, DragDropEffects.Copy);
        }

        private void Label_Drop(object sender, DragEventArgs e)
        {
            ((Label)e.Source).Content = (string)e.Data.GetData(DataFormats.Text);
        }

        private Cursor customCursor = null;

        private void Label_GiveFeedback(object sender, GiveFeedbackEventArgs e)
        {
            if (e.Effects == DragDropEffects.Copy)
            {
                if (customCursor == null)
                    customCursor = CursorHelper.CreateCursor(e.Source as UIElement);

                if (customCursor != null)
                {
                    e.UseDefaultCursors = false;
                    Mouse.SetCursor(customCursor);
                }
            }
            else
                e.UseDefaultCursors = true;

            e.Handled = true;
        }

#702 – Dragging an Image within a WPF Application

You can drag the contents of one Image control onto another Image control fairly easily.  When you drag an image to another application, you have to convert the image to a bitmap.  But within the same application, you can just use the value of the image’s Source property as the data being dragged.

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Image Grid.Column="0" Source="Life01.jpg" Stretch="None" Margin="10"
                MouseLeftButtonDown="Image_MouseLeftButtonDown"/>
        <Image Grid.Column="1" Margin="10" AllowDrop="True" Drop="Image_Drop" Source="DropHere.png" />
    </Grid>

 

        private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Image img = e.Source as Image;
            DataObject data = new DataObject(DataFormats.Text, img.Source);

            DragDrop.DoDragDrop((DependencyObject)e.Source, data, DragDropEffects.Copy);
        }

        private void Image_Drop(object sender, DragEventArgs e)
        {
            Image img = e.Source as Image;
            img.Source = (BitmapSource) e.Data.GetData(DataFormats.Text);
        }


#701 – Dragging an Image Between WPF Applications

You can use drag and drop functionality in WPF to drag an image from one application to another.

In the drag source, you create a DataObject with a bitmap format.  (Click here for ImageToBitmap source code).

        private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Bitmap bitmap = ImageToBitmap(e.Source as System.Windows.Controls.Image);

            DataObject data = new DataObject(DataFormats.Bitmap, bitmap);

            DragDrop.DoDragDrop((DependencyObject)e.Source, data, DragDropEffects.Copy);
        }

In the drop target (the application where you want to drop the image), you just set the Source property of an existing Image control to the data obtained from the GetData method.

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Drop Target" Height="350" Width="325"
        AllowDrop="True" Drop="Window_Drop">
    <Grid>
        <Image Name="imgDropHere"/>
    </Grid>
</Window>
        private void Window_Drop(object sender, DragEventArgs e)
        {
            BitmapSource bmSource = (BitmapSource)e.Data.GetData(DataFormats.Bitmap);
            imgDropHere.Source = bmSource;
        }

#700 – Dragging an Image to Microsoft Word

You can use the drag and drop functionality in WPF to drag an Image control out of the application.  You can drop this image onto a Word document if you convert the image to an enhanced metafile format.

Here’s the code that initiates the drag operation.

        private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Bitmap bitmap = ImageToBitmap(e.Source as System.Windows.Controls.Image);

            DataObject data = new DataObject(DataFormats.EnhancedMetafile, MakeMetafileStream(bitmap));

            DragDrop.DoDragDrop((DependencyObject)e.Source, data, DragDropEffects.Copy);
        }

This makes use of a utility function to convert the Image to a Bitmap:

        private Bitmap ImageToBitmap(System.Windows.Controls.Image image)
        {
            RenderTargetBitmap rtBmp = new RenderTargetBitmap((int)image.ActualWidth, (int)image.ActualHeight,
                96.0, 96.0, PixelFormats.Pbgra32);

            image.Measure(new System.Windows.Size((int)image.ActualWidth, (int)image.ActualHeight));
            image.Arrange(new Rect(new System.Windows.Size((int)image.ActualWidth, (int)image.ActualHeight)));

            rtBmp.Render(image);

            PngBitmapEncoder encoder = new PngBitmapEncoder();
            MemoryStream stream = new MemoryStream();
            encoder.Frames.Add(BitmapFrame.Create(rtBmp));

            // Save to memory stream and create Bitamp from stream
            encoder.Save(stream);

            return new System.Drawing.Bitmap(stream);
        }

This also requires a utility function that converts a Bitmap to a stream containing a Metafile, taken from Stack Overflow.

        // From http://stackoverflow.com/questions/5270763/convert-an-image-into-wmf-with-net
        private MemoryStream MakeMetafileStream(Bitmap image)
        {
            Graphics graphics = null;
            Metafile metafile = null;
            var stream = new MemoryStream();
            try
            {
                using (graphics = Graphics.FromImage(image))
                {
                    var hdc = graphics.GetHdc();
                    metafile = new Metafile(stream, hdc);
                    graphics.ReleaseHdc(hdc);
                }
                using (graphics = Graphics.FromImage(metafile))
                { graphics.DrawImage(image, 0, 0); }
            }
            finally
            {
                if (graphics != null)
                { graphics.Dispose(); }
                if (metafile != null)
                { metafile.Dispose(); }
            }
            return stream;
        }

Here’s the code in action:

#699 – Converting an Image Control to a Bitmap

You may want to work with the image from an Image control as a standard Windows bitmap.  You can convert the System.Windows.Controls.Image to a System.Drawing.Bitmap as follows (imgLife is an Image control):

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            RenderTargetBitmap rtBmp = new RenderTargetBitmap((int)imgLife.ActualWidth, (int)imgLife.ActualHeight,
                96.0, 96.0, PixelFormats.Pbgra32);

            imgLife.Measure(new System.Windows.Size((int)imgLife.ActualWidth, (int)imgLife.ActualHeight));
            imgLife.Arrange(new Rect(new System.Windows.Size((int)imgLife.ActualWidth, (int)imgLife.ActualHeight)));

            rtBmp.Render(imgLife);

            PngBitmapEncoder encoder = new PngBitmapEncoder();
            MemoryStream stream = new MemoryStream();
            encoder.Frames.Add(BitmapFrame.Create(rtBmp));

            // Save to memory stream and create Bitamp from stream
            encoder.Save(stream);
            System.Drawing.Bitmap bitmap = new System.Drawing.Bitmap(stream);

            // Demonstrate that we can do something with the Bitmap
            bitmap.Save(@"D:\Temp\Life.png", ImageFormat.Png);

            // Optionally, if we didn't need Bitmap object, but
            // just wanted to render to file, we could:
            //encoder.Save(new FileStream(@"D:\Temp\Life-Other.png", FileMode.Create));
        }