Drop target below image or canvas seems impossible?

Hi All!
I am building an app where the user can drag an image from
one place, and drop it in a few different locations.
The drop locations are vector images who listen for the
dragEnter event, they get "highlighted" when an image is dragged
onto them, and then accepts the dropped image - no problem. This
all works like a charm.
The trouble is I need to add a partially transparent PNG
image on top of it all, and when I do that the image seems to
consume any dragEnter events that are generated, and the "drop
spots" below never get notified that something is being dragged
over them.
I realize that a PNG image with transparency will not be
considered TRULY transparent, and that it normally does consume
mouse events regardless of wether it's transparent or not. The odd
thing is that you cannot work around this by setting mouseEnabled
and mouseChildren to false on the image - it still sits there
effectively blocking the dragEnter events from reaching their
intended targets.
If anyone has a workaround or solution to this I'd be very
grateful!
Thanks in advance & Best regards
Culme

I had to give up on this one for now.
I created a layer on top which contains the "drop targets",
and a layer below the PNG image which contains the visual elements
that get highlighted when stuff is dragged over the drop targets.
It works, but it seems like a rather lousy solution.
If anyone figures out a better way of doing it I'm still
interested.

Similar Messages

Image as drop target for drag and drop

was wondering how I can make an image to be a drop target using the dnd api. so far from what i've seen it takes only java components to be target, so if anyone has any ideas it will be great.
thanks

I don't know why your DropTarget implementation doesn't work, but an alternative, more high-level way of doing what you want is to use a TransferHandler:
        canvas.setTransferHandler(new TransferHandler() {
            @Override
            public boolean canImport(TransferSupport support) {
                if (support.isDataFlavorSupported(DataFlavor.stringFlavor)) {
                    support.setDropAction(DnDConstants.ACTION_COPY);
                    return true;
                return false;
            @Override
            public boolean importData(TransferSupport support) {
                try {
                    String text = (String) support.getTransferable().getTransferData(DataFlavor.stringFlavor);
                    System.out.println(text);
                    return true;
                catch (Exception ex) {
                    ex.printStackTrace();
                    return false;
        });

My drag images disappear when they are dropped on a correct drop target during the drag and drop interaction.

What am I missing. The opacity is at 100%. The drop target is a highlighted box from objects. I am using Captivate 8.

Hi there,
You might want to make sure your Depth setting is not set to Back instead of Front on your drop target(s).
The Depth setting is accessed via the Drag and Drop window/panel under Format setting while you have your drop target selected.
If your Depth setting is set to Back, especially if your opacity is set to 100% on your highlight box/drop target, your drag image would go behind your drop target giving the effect of disappearing behind your highlight box - especially if the drop target is larger than the drag image.

Dropping image on canvas causes image to jump.

When I drop an image on a canvas in AIR the image "jumps" a few pixels to several from the current mouse location.
So if the mouse is at location (12, 12) and I drop the image it may appear at (10, 14), or (15, 20), or whatever. It doesn't appear to be a consistent offset like I would expect if this were caused by using global to local mouse position thing (but I'm not ruling that out anyway).
Secondly, when I then drag to move the image on the canvas the drag proxy will again jump many pixels from the mouse cursor.
Here is my mouse down handler:
            private function dragBegin(event:MouseEvent):void
                  var dragInitiator:Image = Image(event.currentTarget);
                var ds:DragSource = new DragSource();
                ds.addData(dragInitiator, "img");
                var dragProxy:Image = new Image();
                dragProxy.source = event.currentTarget.source;
                DragManager.doDrag(dragInitiator, ds, event, dragProxy);
And the drop handler:
        private function dragDropHandler(event:DragEvent):void
               var image:Image = Image(event.dragSource.dataForFormat("img"));
               image.x = event.localX;
               image.y = event.localY;
               UIComponent(event.currentTarget).addChild(device);
What am I doing wrong that is causing this jumping?
Thanks,
-Mark

Hi,
I think the only way to do this is to use a jsp with a servlet, where the servlet would create the image and send it over as a stream, while the jsp would call on the link of the servlet and display that image using the HTML <IMG> tag.
So, if you have a servlet, lets call it PictureServlet.
This is what you would do in your servet:
// create that image and send it over from the doPost/doGet method of the servlet
public void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
response.setContentType("image/jpg"); // set the stream to be a JPEG image
ServletOutputStream sos = response.getOutputStream(); // create the output stream
BufferedImage bImg = createImage(); // this is where you write on your image using canvas and return it as a Bufferedimage
ImageIO.write(bImg,"JPG",sos); // write the image to the stream as JPEG
sos.close(); // close the output stream
public void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        doPost(request, response);
    } This is how you would get that image and display it in your JSP.
<img src="../servlet/PictureServlet" name="pic">Note the path might be different, depending on the hierarchy of where jsps and servlets are stored on the server.
I hope this helps,
Val.

Another Drag and Drop from horizontal list to canvas problem

Hi,
This is vaguely similar to the this
topic
but I seem to have made things even more complicated.
Basic set up is a horizontal list that uses a custom
component itemrenderer to display a thumbnail and label:
<?xml version="1.0"?>

<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
width="100" height="120" verticalAlign="top" verticalGap="3"
verticalScrollPolicy="off" horizontalAlign="center"
backgroundAlpha="0.0" alpha="1.0">
<mx:Image id="img" height="60" width="80"
source="assets/{data.file}" scaleContent="true"/>
<mx:Label text="{data.text}" fontWeight="bold"
width="100%" textAlign="center"/>
</mx:VBox>
The data is loaded up from an external XML file with this
sort of format:
<?xml version="1.0" encoding="UTF-8"?>
<thumbnails>
<thumb>
<file>thumb_image_1.jpg</file>
<text>Thumb 1</text>
<url>
http://www.blah.com</url>
<id>thumb1</id>
</thumb>
</thumbnails>
That's loaded up using the HTTPService and stored in a Model
thing.
I've got the dragging from the HL happening quite nicely and
it drops fine on to the canvas area, code all hack off from the
help files. The problem I'm having is finding out the data about
the item I've just dropped, I should at least be able to get the
source url for the thumbnail and the label text string, but I just
don't know how to get it. The call back I'm using looks like this:
private function doDragDrop(event:DragEvent,
target1:Canvas):void {
var vX:int = target1.mouseX;
var vY:int = target1.mouseY;
var vW:int = target1.width;
var vH:int = target1.height;
// follow variables give relative coordinate values so that
if window size is altered
// we don't have to do tricky calulations to reset rating
positions.
var vRx:Number = vX/vW;
var vRy:Number = vY/vH;
Alert.show(event.dragSource + " " + vX + " " + vY + " " +
vRx + " " + vRy, 'Mouse drop loc', mx.controls.Alert.OK);
I just don't know how to get the info out of the
event.dragSource.
Here's the full mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="srv.send()">
<mx:Script>
<![CDATA[
private function xmlLoaded():void {
thumbAC = srv.lastResult.thumbnails;
import mx.core.DragSource;
import mx.managers.DragManager;
import mx.events.*;
import mx.containers.Canvas;
import mx.controls.Alert;
// Called when the user clicks the mouse on either colored
canvas.
// Initializes the drag.
private function dragIt(event:MouseEvent, text:String,
format:String):void {
// Get the drag initiator component from the event object.
var dragInitiator:Canvas=Canvas(event.currentTarget);
// Called if the user dragged a proxy onto the drop target
canvas.
private function doDragEnter(event:DragEvent):void {
// Get the drop target component from the event object.
var dropTarget:Canvas=Canvas(event.currentTarget);
DragManager.acceptDragDrop(dropTarget);
// Called if the target accepts the dragged object and the
user
// releases the mouse button while over the canvas.
// Handles the dragDrop event for the List control.
private function doDragDrop(event:DragEvent,
target1:Canvas):void {
var vX:int = target1.mouseX;
var vY:int = target1.mouseY;
// follow variables give relative coordinate values so that
if window size is altered
// we don't have to do tricky calulations to reset rating
positions.
Alert.show(event.dragSource + " " + vX + " " + vY, 'Mouse
drop loc', mx.controls.Alert.OK);
]]>
</mx:Script>
<mx:HTTPService id="srv" url="assets/thumbnails.xml"
useProxy="false" result="xmlLoaded();"/>
<mx:Model id="thumbAC"/>
<mx:Panel height="160" layout="absolute" title="Thumbnail
Browser" cornerRadius="10" id="thumbScrollBrowser" bottom="10"
left="10" right="10">
<mx:HorizontalList x="0" y="10" width="100%"
height="110" id="thumbBrowser"
dataProvider="{thumbAC.thumb}"
dragEnabled="true" rollOverColor="#FFFFFF"
selectionColor="#ffffff" borderColor="#FFFFFF"
borderSides="0" borderStyle="none" alpha="1"
backgroundAlpha="1.0"
itemRenderer="Thumbnail">
</mx:HorizontalList>
</mx:Panel>

<mx:ArrayCollection id="wallAC"/>
<mx:Canvas id="myCanvas" backgroundColor="#ffffff"
cornerRadius="10"
borderStyle="solid"
dragEnter="doDragEnter(event);"
dragDrop="doDragDrop(event, myCanvas);" left="10" right="10"
top="10" bottom="180">
</mx:Canvas>
</mx:Application>
Thanks for any thoughts.
Cheers,
Rob

This in the drop handler should give you back the XML you
just dropped:
var getListData:XML=
evtDrag.dragSource.dataForFormat("items");

Can we restrict Page assets shown in Content Finder to match available cq drop targets?

We have defined a component that accepts drag-and-drop of user content, and the cq:DropTargetConfig node (under cq:editConfig > cq:dropTargets) defines groups=[page] because it accepts assets of type cq:Page not images. Our component is a copy of the /libs/foundation/components/image component, because it accepts drag-and-drop, and we modified its innards to accept cq:Page not image. Seems that the 'accept' property is completely ignored when groups=[page], I think 'accept' is only processed when groups=[media] i.e. images.
This is basically working fine except there is so much user content that it is time-consuming for users to select the right pages to drag from the Content Finder extension into the drag-and-drop target. And if they pick the wrong kind of asset it can really mess up the target page. There are so many types of components based on cq:Page and many of them just do not belong in this particular drop target, but if the user drags an inappropriate asset into our drop target then cq allows it, often with disastrous results (content properties and nodes get overwritten in the wrong place, etc).
Yes the Content Finder has a search bar but really I would like to restrict the list of assets shown there without the user having to type in a search term. I hope there is something for Page-based content analogous to the 'allowedPaths' property in a Template. In the WCM when you click New Page at some jcr path, a template-chooser dialog comes up and it only has templates which are allowed for that jcr path, so the dialog is uncluttered and guides the user to a relevant template. Similarly, Components have an 'allowedParents' property so you can't use them where they don't belong. Please advise if there is something similar to make it easier to find relevant content in Content Finder tab Pages.

I just checked this behavior. In CQ 5.5, an image dropped in an image component OEM is trunct'ed to fit the column or parsys that it is added to. The image remains 100% full-scale and flush left. In the past as a CQ architect, I have participated in the conversation no less than 10 times. If fact I discussed this with a client last week. They insisted on being able to use renditions as part of content.
I've advised on various solutions. The most complex solution I've advised on will autosize the image component to fit the column it is used in without author intervention. This is, however, predicated on the column components to be rewritten using a grid system and not %. It's extremely complex and changes the behavior of various components dramatically.
I agree I don't fully understand or embrace the philosophy on this one. I see the purist attitude toward renditions of images but its not practical in the field. Under the current philosophy images of the same size and scale will be cached in multiple locations.
Lars, feel free to school us on this one... it's your baby.

Drag n drop exception - drop target listener

It seems several people are having a problem with the built in drop target listener. See the (second part of) thread linked below (was mistakenly put in AWT forum).
http://forum.java.sun.com/thread.jspa?messageID=2905780&
ANY help would be much appreciated.

Can anyone please help with this? No one seems to understand it. I get the following exception when dragging outside of a JTable:
java.lang.NullPointerException
     at javax.swing.plaf.basic.BasicTableUI$TableDropTargetListener.restoreComponentState(BasicTableUI.java:1216)
     at javax.swing.plaf.basic.BasicDropTargetListener.dragExit(BasicDropTargetListener.java:249)
     at javax.swing.TransferHandler$SwingDropTarget.dragExit(TransferHandler.java:586)
     at sun.awt.dnd.SunDropTargetContextPeer.processExitMessage(SunDropTargetContextPeer.java:385)
     at sun.awt.dnd.SunDropTargetContextPeer.access$700(SunDropTargetContextPeer.java:52)
     at sun.awt.dnd.SunDropTargetContextPeer$EventDispatcher.dispatchExitEvent(SunDropTargetContextPeer.java:792)
     at sun.awt.dnd.SunDropTargetContextPeer$EventDispatcher.dispatchEvent(SunDropTargetContextPeer.java:740)
     at sun.awt.dnd.SunDropTargetEvent.dispatch(SunDropTargetEvent.java:29)
     at java.awt.Component.dispatchEventImpl(Component.java:3494)
     at java.awt.Container.dispatchEventImpl(Container.java:1627)
     at java.awt.Component.dispatchEvent(Component.java:3477)
     at java.awt.LightweightDispatcher.retargetMouseEvent(Container.java:3483)
     at java.awt.LightweightDispatcher.trackMouseEnterExit(Container.java:3315)
     at java.awt.LightweightDispatcher.processDropTargetEvent(Container.java:3261)
     at java.awt.LightweightDispatcher.dispatchEvent(Container.java:3123)
     at java.awt.Container.dispatchEventImpl(Container.java:1613)
     at java.awt.Window.dispatchEventImpl(Window.java:1606)
     at java.awt.Component.dispatchEvent(Component.java:3477)
     at java.awt.EventQueue.dispatchEvent(EventQueue.java:456)
     at java.awt.EventDispatchThread.pumpOneEventForHierarchy(EventDispatchThread.java:201)
     at java.awt.EventDispatchThread.pumpEventsForHierarchy(EventDispatchThread.java:151)
     at java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:145)
     at java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:137)
     at java.awt.EventDispatchThread.run(EventDispatchThread.java:100)
I get similar exception when dragging within a JList (except the NPE is in BasicTableUI$TableDropTargetListener.updateInsertionLocation). I'm using the provided StringSelection as my Transferable. The exceptions disappear when I disable the look and feel options in my app.
PLEASE HELP. I'm so confused/frustrated by this.
THANK YOU in advance.

OutOf Memory Error while saving image of canvas

Hi,
I am facing a weired problem while saving the image of the graphics in Canvas. It's giving me OutOfMemory error. Here is snippet of code:
if(cmd.equals(C.ACTION_SAVE)){
            try {
                FileDialog fd = new FileDialog(frame, "Save ProcessInstance as JPEG", FileDialog.SAVE);
                fd.setFile(processInstance.getProcessDefinition().getName() +processInstance.getProcessOwner() +processInstance.getProcessOwnerId() +".jpeg");
                fd.show();
                String name = fd.getDirectory()+fd.getFile();
                    int w = canvas.getWidth(), h = canvas.getHeight();
                    BufferedImage image = new BufferedImage(w, h,
                            BufferedImage.TYPE_INT_RGB);
                    Graphics2D g2 = image.createGraphics();
                    canvas.paint(g2);
                    g2.dispose();
                    ImageIO.write(image, "jpeg", new File(name));
                } catch (IOException e) {
                    System.err.println(e);
                }

Hi,
I tried to run garbage collector for the same and now its working fine. I want to know is there any drawback of using this approach. I am new to java and waiting for ur expert comments. I added following lines in the above code just below ImageIO.write(image, "jpeg", new File(name));:
         image = null;
                    Runtime r = Runtime.getRuntime();
                    r.gc();

Displaying images in canvas one after another

Hi all,
I have a problem displaying images in canvas one after another. I am using for loop and when i run the application, all images run back in the and only finally only the last image gets displayed in the emulator. I also used thread.sleep(). But it din't work.
Here is my code:
// A canvas that illustrates image drawing
class DrawImageCanvas extends Canvas
Image image;
public void paint(Graphics g)
int width = getWidth();
int height = getHeight();
g.setColor(0);
g.fillRect(0, 0, width, height);
String images[]={"paint_2.PNG","radha.PNG","cute.png","design.png","flowers.png"};
for(int i=0;i<images.length;i++)
image = null;
System.out.println("/"+images);
     try
     image = Image.createImage("/"+images[i]);
catch (IOException ex)
System.out.println(ex);
g.setColor(0xffffff);
g.drawString("Failed to load image!", 0, 0, Graphics.TOP | Graphics.LEFT);
return;
if (image != null)
g.drawImage(image, width/2, height/2, Graphics.VCENTER | Graphics.HCENTER);
try
Thread.sleep(5000);
catch(Exception ex)
     System.out.println("the exception is.."+ex);
Help me and Thanks in advance.

See the code below : prefer the use of a Timer and a TimerTask instead of Thread.sleep().
showNotify (from Canvas) is used to launch the timer.
import java.io.IOException;
import java.util.Timer;
import java.util.TimerTask;
import javax.microedition.lcdui.Canvas;
import javax.microedition.lcdui.Graphics;
import javax.microedition.lcdui.Image;
public class DrawImage extends Canvas {
    Image image;
    String images[] = {"img1.png", "img2.png", "img3.png", "img4.png", "img5.png",
                        "img6.png", "img7.png"};
    Image[] tabImage;
    int imageCounter = 0;
    public DrawImage(){
        try {
            tabImage = new Image[images.length];
            for (int i = 0; i < images.length; i++)
                tabImage[i] = Image.createImage("/" + images);
} catch (IOException ex) {
ex.printStackTrace();
public void paint(Graphics g) {
int width = getWidth();
int height = getHeight();
g.setColor(0);
g.fillRect(0, 0, width, height);
image = tabImage[imageCounter];
if (image != null)
g.drawImage(image, width / 2, height / 2, Graphics.VCENTER | Graphics.HCENTER);
else{
System.out.println("null");
g.setColor(0xffffff);
g.drawString("Failed to load image!", 0, 0, Graphics.TOP | Graphics.LEFT);
protected void showNotify(){
Timer t = new Timer();
t.schedule(new PhotoSwitcher(), 5000, 5000);
private class PhotoSwitcher extends TimerTask{
public void run() {
if (imageCounter < images.length - 1)
imageCounter++;
else
imageCounter = 0;
repaint();
I hope this will help you !
fetchy.
Edited by: fetchy on 14 ao�t 2008 09:48

Drag and Drop Interaction with 50+ Drop Targets

Hello,
I'm fairly new to Captivate 7 but very familiar with Flash. I'm tasked with a project that I would like to do with the drag and drop interaction widget from Captivate 7. Basically, we need our learners to identify the locations of our resorts on a map. Select the name of the resort, drag and drop it in the city/state or country where located. My question is can Captivate handle this task? To me, it seems as a large task for Captivate to handle, and so I was thinking of coding it in Flash.
Here is what I need:
1.- List of all the properties at bottom with the drop target being a map of the US or world and have the location for each property as the drop target.
2.- When the resort/property is selected, the name will change to the three letter code. Example: New York City, when clicked = NYC and the map itself to reflect the 3 letter code once dropped on the map if correct.
3. If incorrect, the listed item will revert to the long name and return to the list.
4. If this can be graded, it would be best.
I can break the project into different regions but if I wanted to keep all 300+ properties in one module, will it be an issue? At the very least, I would need to do a minimum of about 50 per module.
Thanks all! I've found this forum to be extremely helpful and the members seem to be eager to help.

var matchingTargetName:String =(event.target.name).substring(0, 1);
Change the name of the target to A and B and the mc A1, A2, A3, A4... and B1, B2,B3...

How can I drag and drop an icon/image into a panel??

Dear Friends:
How can I drag and drop an icon/image from one panel into another target panel at any position in target panel at my will??
any good example code available??
I search for quite a while, cannot find a very good one.
please help
Thanks
Sunny

[url http://java.sun.com/developer/JDCTechTips/2003/tt0318.html#1]DRAGGING TEXT AND IMAGES WITH SWING

How to get transparency scroll bar to view background image of canvas.

HI,
How to get transparency to path in canvas to view background image in canvas using scroll bar control.?
This is my present output:
My Xaml Code:
<Grid Height="auto" Name="grid1">
<TabControl Background="Bisque">
<TabItem Header="Tools">
<Grid Height="1000" Width="1000" Name="grid">
<Border BorderThickness="0.2" BorderBrush="Black" Height="820" Width="820" ClipToBounds="True" Margin="90,99,90,81"></Border>
<Grid>
<Button Content="Original Size" Height="23" Name="btn_Original" Width="75" Click="btnOriginalSizePosition" Margin="4,4,921,973" />
<TextBox Height="20" HorizontalAlignment="Left" Margin="62,49,0,0" x:Name="txtNoOfZones" VerticalAlignment="Top" Width="49"
MaxLength="2" PreviewTextInput="txtNoOfZones_PreviewTextInput"/>
<TextBox Height="20" HorizontalAlignment="Right" Margin="0,71,890,0" x:Name="txtSec" VerticalAlignment="Top" Width="49" PreviewTextInput="txtSec_PreviewTextInput" MaxLength="3"/>
<Button Content="OK" Height="32" HorizontalAlignment="Left" Margin="117,59,0,0" Name="btnNoOfZones" VerticalAlignment="Top" Width="39" Click="btnNoOfZones_Click" />
<Label Content="Zone Number selected :" Height="28" HorizontalAlignment="Right" Margin="0,0,451,0" Name="lblZone" VerticalAlignment="Top" />
<Label Content="Sector Number in selected Zone :" Height="28" HorizontalAlignment="Right" Margin="364,22,451,0" Name="lblSector" VerticalAlignment="Top" />
<Label Content="Filled Color applied in selected sector :" Height="28" HorizontalAlignment="Right" Margin="336,44,451,0" Name="lblColor" VerticalAlignment="Top" />
<Label HorizontalAlignment="Left" Margin="569,0,0,0" Name="lblZoneNumber" Height="28" VerticalAlignment="Top" />
<Label Height="28" HorizontalAlignment="Left" Margin="569,22,0,0" Name="lblSectorNumber" VerticalAlignment="Top" />
<Label Height="30" HorizontalAlignment="Left" Margin="569,44,0,0" Name="lblFillColor" VerticalAlignment="Top" FontWeight="Bold"/>
<Label Content="Sectors :" Height="28" HorizontalAlignment="Left" Margin="7,67,0,905" Width="69" />
<Label Content="Zones :" HorizontalAlignment="Left" Margin="13,44,0,928"/>
<TextBlock Height="23" HorizontalAlignment="Left" Margin="4,32,0,0" Text="Change No.of Zones, sectors below and click OK button" VerticalAlignment="Top" Width="294" FontFamily="Cambria" FontSize="12" FontStyle="Italic" FontWeight="Bold" />
<RadioButton Content="Single Sector" Height="16" HorizontalAlignment="Left" Margin="744,24,0,0" Name="rBtnSingleSector" VerticalAlignment="Top" GroupName="Selection"/>
<RadioButton Content="Sector Zone" Height="16" HorizontalAlignment="Left" Margin="744,44,0,0" Name="rBtnSectorZone" VerticalAlignment="Top" GroupName="Selection"/>
<RadioButton Content="Circular Zone" Height="16" HorizontalAlignment="Left" Margin="744,64,0,0" Name="rBtnCircularZone" VerticalAlignment="Top" GroupName="Selection"/>
<RadioButton Content="Panning" Height="24" HorizontalAlignment="Left" Margin="744,4,0,0" Name="rBtnPanning" VerticalAlignment="Top" Width="74" GroupName="Selection"/>
<Border x:Name="clipBorder" BorderBrush="Black" BorderThickness="0" ClipToBounds="True" Height="810" Width="810" Margin="95,104,95,86" CornerRadius="10">
<Canvas x:Name="CanvasPanel" Height="800" Width="800" Background="Transparent" ClipToBounds="True"></Canvas>
</Border>
<RadioButton Content="Random Color" HorizontalAlignment="Left" Margin="868,5,0,979" Name="rdBtnRandomColor" GroupName="rdbtnGroupFillColor"/>
<RadioButton Content="Red Color" Height="16" HorizontalAlignment="Left" Margin="868,24,0,0" Name="rdBtnRedColor" VerticalAlignment="Top" GroupName="rdbtnGroupFillColor" Foreground="#FFF81010" FontWeight="Bold" />
<RadioButton Content="Green Color" Height="16" HorizontalAlignment="Left" Margin="868,44,0,0" Name="rdBtnGreenColor" VerticalAlignment="Top" GroupName="rdbtnGroupFillColor" Foreground="#FF175F17" FontWeight="Bold" />
<RadioButton Content="Adjacent" Height="16" HorizontalAlignment="Left" Margin="435,81,0,0" Name="rdBtnAdjacent" VerticalAlignment="Top" GroupName="Selection" />
</Grid>
</Grid>
</TabItem>
<TabItem Header="Change Background">
<Grid Height="1000" VerticalAlignment="Top" Background="Bisque">
<Button Height="70" Width="70" Margin="6,1,892,929" Name="btnBrowseImage" Click="btnAll">
<Image x:Name="browseIcon" Source="D:\WPF\Projects\TabControlVRI_18_12_2014\Images\img.png" MouseLeftButtonDown="Image_MouseLeftButtonDown_1"/>
</Button>
<Button Height="70" Width="70" Margin="92,1,806,929" Name="btnCenterPoint" Click="btnAll">
<Image x:Name="centerIcon" Source="D:\WPF\Projects\TabControlVRI_18_12_2014\Images\center.jpg" Width="54" Height="48" />
</Button>
<Button Height="70" Width="70" Margin="179,1,719,929" Click="btnAll">
<Image x:Name="boundaryIcon" Source="D:\WPF\Projects\TabControlVRI_18_12_2014\Images\Path_Simple.png" Height="44" Width="49" />
</Button>
<Image Name="imgBackground" Height="800" Width="800" MouseLeftButtonDown="imgBackground_MouseLeftButtonDown">
</Image>
</Grid>
</TabItem>
</TabControl>
</Grid>
C# code:
OpenFileDialog op = new OpenFileDialog();
ImageBrush ib = new ImageBrush();
private void Image_MouseLeftButtonDown_1(object sender, RoutedEventArgs e)
op.Title = "Select a picture";
op.Filter = "All supported graphics|*.jpg;*.jpeg;*.png|" +
"JPEG (*.jpg;*.jpeg)|*.jpg;*.jpeg|" +
"Portable Network Graphic (*.png)|*.png";
if (op.ShowDialog() == true)
ib.ImageSource = new BitmapImage(new Uri(op.FileName));
imgBackground.Source = new BitmapImage(new Uri(op.FileName));
CanvasPanel.Background = ib;
Please help me out to get transparency for path in canvas to view background image in canvas.
The complete code is in below link:
https://onedrive.live.com/redir?resid=876CFAE94C306176!112&authkey=!AC1sQIYwyoRYT_o&ithint=file%2crar
Regards,
Viswa.

Hi ViswAmmu,
>>Please help me out to get transparency for path in canvas to view background image in canvas.
If I'm not misunderstanding, I think you just need to loop through all Canvas.Children and set Opacity property for them:
private void Image_MouseLeftButtonDown_1(object sender, RoutedEventArgs e)
//Loop through all children items
foreach(UIElement v in CanvasPanel.Children)
v.Opacity = 0;
op.Title = "Select a picture";
op.Filter = "All supported graphics|*.jpg;*.jpeg;*.png|" +
"JPEG (*.jpg;*.jpeg)|*.jpg;*.jpeg|" +
"Portable Network Graphic (*.png)|*.png";
if (op.ShowDialog() == true)
ib.ImageSource = new BitmapImage(new Uri(op.FileName));
imgBackground.Source = new BitmapImage(new Uri(op.FileName));
CanvasPanel.Background = ib;
Screenshot:
We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click
HERE to participate the survey.

Drop target size/orientation with skinned List changed from 4.0 to 4.5

I have a project that we recently moved from Flex/Flash Builder 4 to 4.5. We have a skinned list with a horizontal orientation with the items in the list skinned with a button skin. The user is allowed to drag buttons from a list of available items into another list of items they want. When compiled in 4 with the 4.1 SDK, the drop area was the entire list area on the screen (it will hold about 5 of the buttons). In 4.5, the drop area is only the width of 1 button, and appears to go down vertically instead of to the right horizontally. If I extend the size of the list vertically, I can drop in any vertical position below the 'first' position, but cannot go to the right of the first position to drop.
It appears that whatever is computing the drop target area for the list is not honoring the layout of the list - it appears to always set up the drop area vertically.
Again, all of this worked as expected in 4.1, it is only after compiling in 4.5 that this started.
In addition, I had to add a call to event.stopImmediatePropagation() in the drop event handler, or else the item was added to the 'I want this' list 2x - I'm guessing 1x in my handler, and 1 additional time in a new 'automatic' drop handler for spark lists.
Any idea how to fix the drop area? It is very annoying for the users.
Mark

Never mind, found the problem.
In our application, we also added a new menu and navigation bar. The navigation bar has a 'history' panel that when you click on it, it 'swings down' and the user can click prior navigation points to return to. This history panel, even though hidden with 'visible = false', was still blocking the drop area. We had to set the history panel 'enabled = false' as well as 'visible = false' when it is not on the screen. Once this was changed, it quit blocking the drop area. I found it when testing a different drag target that also fell under the 'history panel' area.

Drop-Zones Resizing Images

I'm new at this so bear with me if this is a stupid question.
I'm producing a DVD for a recent graduation ceremony and would like to include still images of the printed program as a menu option. I've created the menus, scanned and finished the images in Photoshop. It seems that whenever I add these pictures to drop-zones they are too large to fit the frame. When I resize the images in Photoshop and make the drop zones bigger, the images continue to be resized and the full image is not displayed. Is there any way to lock the size of an image as well as the aspect ratio?
Thanks in advance.

Garrett
to add an image as a drop zone:
drag image from asset tab on to menu editor and select - create drop zone from the pop up
to resize a drop zone:
drag corner or side handle
to resize drop zone maintaining aspect ratio:
shift drag corner handle
move asset within drop zone:
shift option drag the asset with in the drop zone
G

Flex 4.6 Drag and Drop: an event that fires when dropped on invalid drop target?

Is there an event or condition somewhere in the DragManager to differentiate between an item that is eitther dropped on an invalid or a valid drop target?
I need to re-populate data to the original container after the drop has occured, however i can't seem to find any event or condition that would indicate if the dragged item was dropped on a valid or invalid target? Thanks in advance.

Older machine = Windows XP
Newer = Windows Vista

Drop target below image or canvas seems impossible?

Similar Messages

Maybe you are looking for