locked
Snap an Image into Rectangle or Button RRS feed

  • Question

  • Hi

    I am Designing an application where i have some images on Left menu User COntrol and I have Bunch of Rectangles of size widthxheight on Right Menu / Canvas.
    Now i need to Drag an Image and leave it on one of the Rectangles so that that image Fits into that Rectangle.

    Please Navigate me how to achieve this.

    Thanks,

    San
    Thursday, March 11, 2010 8:01 PM

Answers

  • hi StarterKit,

    You can use ImageBrush to fill the Rectangle.Fill. I design a simple sample basing on my understand. Below is my code:

    XAML:
    <Window x:Class="DragImageToRectangle.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300" MouseLeftButtonUp="Window_MouseLeftButtonUp" MouseMove="Window_MouseMove">
        
        <Window.Resources>
            <BitmapImage x:Key="imageRes" UriSource="file:///D:\test.jpg"/>
        </Window.Resources>
        <Canvas x:Name="canvas">
            <TextBlock HorizontalAlignment="Center" Height="15.96" Canvas.Left="52" Canvas.Top="12" Width="39">Source:</TextBlock>
            <Image x:Name="img" Source="{StaticResource imageRes}" Width="50" Height="50" MouseLeftButtonDown="img_MouseLeftButtonDown" Canvas.Left="97" Canvas.Top="12" />  
            
            <Image x:Name="moveImg" Width="50" Height="50" Opacity="0.5" Visibility="Hidden">
                <Image.Effect>
                    <DropShadowEffect/>
                </Image.Effect>
            </Image>
            
            <TextBlock HorizontalAlignment="Center" Height="15.96" Canvas.Left="32" Canvas.Top="96" Width="37">Target:</TextBlock>
            <Rectangle Grid.Row="1" Width="100" Height="50" x:Name="rec" MouseEnter="rec_MouseEnter" Stroke="Black" Canvas.Left="75" Canvas.Top="96" />
            
            <Button Grid.Row="2" Click="Button_Click" HorizontalAlignment="Center" Height="21.96" Canvas.Left="181" Canvas.Top="124.04" Width="33">Clear</Button>
        </Canvas>
    </Window>
    
    Code:

            private object resource = null;
           
            private void img_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
                resource = img.Source;
            }
    
            private void rec_MouseEnter(object sender, MouseEventArgs e)
            {
                if (resource != null)
                {
                    ImageBrush imgBrush = new ImageBrush((ImageSource)resource);
                    rec.Fill = imgBrush;
                    resource = null;
                    moveImg.Visibility = Visibility.Hidden;
                }
            }
    
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                rec.Fill = null;
            }
    
            private void Window_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
            {
                resource = null;
                moveImg.Visibility = Visibility.Hidden;
            }
    
            private void Window_MouseMove(object sender, MouseEventArgs e)
            {
                if (resource != null)
                {
                    moveImg.Source = (ImageSource)resource;
                    moveImg.Visibility = Visibility.Visible;
                    moveImg.Margin = new Thickness(e.GetPosition(this).X-25, e.GetPosition(this).Y-25, moveImg.Margin.Right, moveImg.Margin.Bottom);
                }
            }
    If i misunderstood, please feel free let me know.

    Sincerely,
    Jarrey
    Best day, Best life
    • Marked as answer by StarterKit Friday, March 12, 2010 3:18 PM
    Friday, March 12, 2010 2:32 AM

All replies

  • hi StarterKit,

    You can use ImageBrush to fill the Rectangle.Fill. I design a simple sample basing on my understand. Below is my code:

    XAML:
    <Window x:Class="DragImageToRectangle.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300" MouseLeftButtonUp="Window_MouseLeftButtonUp" MouseMove="Window_MouseMove">
        
        <Window.Resources>
            <BitmapImage x:Key="imageRes" UriSource="file:///D:\test.jpg"/>
        </Window.Resources>
        <Canvas x:Name="canvas">
            <TextBlock HorizontalAlignment="Center" Height="15.96" Canvas.Left="52" Canvas.Top="12" Width="39">Source:</TextBlock>
            <Image x:Name="img" Source="{StaticResource imageRes}" Width="50" Height="50" MouseLeftButtonDown="img_MouseLeftButtonDown" Canvas.Left="97" Canvas.Top="12" />  
            
            <Image x:Name="moveImg" Width="50" Height="50" Opacity="0.5" Visibility="Hidden">
                <Image.Effect>
                    <DropShadowEffect/>
                </Image.Effect>
            </Image>
            
            <TextBlock HorizontalAlignment="Center" Height="15.96" Canvas.Left="32" Canvas.Top="96" Width="37">Target:</TextBlock>
            <Rectangle Grid.Row="1" Width="100" Height="50" x:Name="rec" MouseEnter="rec_MouseEnter" Stroke="Black" Canvas.Left="75" Canvas.Top="96" />
            
            <Button Grid.Row="2" Click="Button_Click" HorizontalAlignment="Center" Height="21.96" Canvas.Left="181" Canvas.Top="124.04" Width="33">Clear</Button>
        </Canvas>
    </Window>
    
    Code:

            private object resource = null;
           
            private void img_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
                resource = img.Source;
            }
    
            private void rec_MouseEnter(object sender, MouseEventArgs e)
            {
                if (resource != null)
                {
                    ImageBrush imgBrush = new ImageBrush((ImageSource)resource);
                    rec.Fill = imgBrush;
                    resource = null;
                    moveImg.Visibility = Visibility.Hidden;
                }
            }
    
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                rec.Fill = null;
            }
    
            private void Window_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
            {
                resource = null;
                moveImg.Visibility = Visibility.Hidden;
            }
    
            private void Window_MouseMove(object sender, MouseEventArgs e)
            {
                if (resource != null)
                {
                    moveImg.Source = (ImageSource)resource;
                    moveImg.Visibility = Visibility.Visible;
                    moveImg.Margin = new Thickness(e.GetPosition(this).X-25, e.GetPosition(this).Y-25, moveImg.Margin.Right, moveImg.Margin.Bottom);
                }
            }
    If i misunderstood, please feel free let me know.

    Sincerely,
    Jarrey
    Best day, Best life
    • Marked as answer by StarterKit Friday, March 12, 2010 3:18 PM
    Friday, March 12, 2010 2:32 AM
  • Thanks Jarrey,

    It did worked for me.

    Thank You
    Friday, March 12, 2010 3:19 PM
  • Hi Jarrey,

    I Have tried Replacing Rectangle with ImageButton where i have Created a ImageButton Custom Control and set its Image Source property.
    I modified ImageBrush to Image Source and Set image Source property of the image button.

    When i drag and drop image onto Image button it is not Snapping into it.


    This is what i have modified:

    ImageSource imgSource = (ImageSource)resource;
                imgButton.ImageSource = imgSource ;
                resource = null;
                moveImg.Visibility = Visibility.Hidden;


    and the class i created for custom COntrols is :

    public class ImgButton : Button
        {
            private ImageSource imageSource;
             public ImageSource ImageSource
             {
                 get
                 {
                     return this.imageSource;
                 }
                 set
                 {
                     this.imageSource = value;
                     //set the image control's source to this.imageSource
                 }

             }
        }


    Where i am Doing Wrong ?

    Thanks,

    San
    Friday, March 12, 2010 7:07 PM
  • Hi,

    How do you display the image in your custom control, using control template or others?

    Best day, Best life
    Tuesday, March 16, 2010 3:51 AM