I am currently learning C# in my spare time but have become stuck. I am trying to move an Image control to a random position (Horizontal) on the screen, this is done based on the screen size and the size of the image control itself. Is it possible to set a Image.X and Image.Y position within C# and WPF?
You'll probably want to use a Canvas panel for this, as it allows you to position children at X,Y coordinates.
<Canvas>
<Image x:Name="myImage" Canvas.Top="100" Canvas.Left="200" />
</Canvas>
The Canvas.X and Canvas.Y are attached properties. You can set them from code-behind like this:
myImage.SetValue(Canvas.Left, 200);
myImage.SetValue(Canvas.Top, 400);
Related
I placed a PNG Image with some transparent areas on my window. It's over a Button control, now when i want to click on My Button, it has some UnClickable points because transparent space of image is over it.
Now, i want mask my image with another control like polygon or use a good way to solve my problem.
I tested following way, but it didn't fill all of the polygon area by image. It is like a rectangle image inside a polygon:
<Polygon
Points="0 50,50 60,58 50,60 50,85 50,95 65,112 65,130,40135,40135 90,0 90"
Stroke="Purple"
StrokeThickness="2" Margin="0,0,146,99" HorizontalAlignment="Right" Width="139" VerticalAlignment="Bottom" Height="99">
<Polygon.Fill>
<ImageBrush ImageSource="/Resources/myImage.png" AlignmentY="Top" Stretch="None" />
</Polygon.Fill>
</Polygon>
Result is like this:
.............................................................
But I want something like this:
......................................
Make the fill image of your polygon rectangular and use Stretch=None or Fill or....
I would like to know how to overlay two Image objects in Wpf. I've made two streams which output a video, one for bones and another just a normal video. Now I would like to add them together, so the skeleton would be displayed on the color video.
A part of my XAML code is
<Grid Name="layoutGrid">
<Grid Name="VideoGrid" ClipToBounds="True" Background="AliceBlue">
<Image Name="ColorImage" Width="640" Height="480"/>
<Image Name="SkeletalImage" Width="640" Height="480"/>
<Canvas Background="Transparent"/>
</Grid>
<StatusBar VerticalAlignment="Bottom" HorizontalAlignment="Center">
<Button Name="Button1" Content="Skeleton Only" Width="120"/>
</StatusBar>
</Grid>
When I do this, only the Skeletal image is displayed and if I switch the both Images then the color image is shown. It seems like Canvas background doesn't do the trick (to make the black part of skeletal image transparent)
I thought the problem was in my XAML code but it was actually at drawing the transparent background to set the render size. The background for skeleton image was black
dc.DrawRectangle(Brushes.Black, null,
new Rect(0.0, 0.0, RenderWidth, RenderHeight));
instead of transparent
dc.DrawRectangle(Brushes.Transparent, null,
new Rect(0.0, 0.0, RenderWidth, RenderHeight));
that fixed my problem.
Thanks though
I've tried overlaying Skeletal onto color or depth on a canvas, but it never worked out. Instead, when I looked at the Kinect Explorer sample application in the SDK 1.6.0, they overlay using a grid. Unfortunately, I have not learned that much yet, but they used a grid for the color and depth, and a canvas for the skeletal tracking. I can post a snippet if it helps. Good luck!
You are asking basically two different questions: 1) How to display SkeletonStream on a DepthStream, which is very easy, 2) How to display SkeletonStream on a ColorStream, which is still easy but a little more complicated.
Answer to Question 1) The XYZ Vectors of the joints in the skeletal streams are in the same coordinate system as the Depth Stream. So if you plot the Deapth Stream as a quadratic mesh using the focal length of the depth camera from the Kinect SDK, you can plot the skeleton as a line plot in the same coordinate system. The source code that implements exactly what you want to do in OpenGL is available here that will give you an idea how to implement this in wpf.
Answer to Question 2) The video camera has a different field of view from the depth camera. To display the skeleton stream to the ColorStream you need first to map the XYZ vectors of the joints in the skeletal streams to the coordinate system of the depth stream and then draw first the video frame in the background and the skeleton as a line plot on the front.
You can easily do the mapping using the U-V texture coordinates given by the Kinect SDK. See how you can get the UV here.
I have clipped an Image control in to a Border which contains it by referring this blog
Sample xaml Code
<Border Behaviors:ImageClip.ToBounds="True">
<Image Source="{Binding Image}"/>
</Border>
But how do i clip an Image Control into a Path / Shape [Like Star /Ellipse] .I have tried previous method.But it was not succeeded because path does not have Content Property so that we can't set Image Clip Behaviour to Path.
I have tried with ImageBrush Fill .But that could not fit into my case beacause i have to implement some behaviours like Pinch & Zoom on Image Control. So that am stuck.
Can anyone help me with any suggestion or samples?
Have you considered just taking a path / shape and setting the background or fill properties to an image brush?
See: How to Use an image as ImageBrush on a Line or Path in WPF
In my Windows Phone 7 application, I have a large image and i want to draw another small image (from an image folder) in specific position (x, y) on top of the large image. How can I do that?
You can put the images in a canvas and position them
<Canvas>
<Image Source="BigImage.jpg"/>
<Image Source="SmallImage.jpg" Canvas.Left="100" Canvas.Top="50" />
</Canvas>
Depending on your requirements/setup you could also nest them in a Grid and use the Margin properties of the images.
I'm trying to put a bigger MediaElement into a smaller Canvas on WPF.
Lets say i'm putting 600x400 media into a 400x300 Canvas with Canvas.Top = -50, Canvas.Left = -100.
And i don't want the sides that are out of bounds to be displayed, in this case 50 pixels from top and bottom, 100 pixel from right and left of my media should be invisible.
How can i achieve this? Thanks for all the help!
What you are asking for is called "Clipping". You need to add a RectangleGeometry to the Canvas.Clip property:-
<Canvas Width="400" Height="300">
<Canvas.Clip>
<RectangleGeometry Rect="0 0 400 300" />
</Canvas.Clip>
<!-- Your content here --->
</Canvas>