I'm making a little chess game in wpf, and I'm having trouble to find the right way I should move and display pieces on the chessboard...
To draw the chessboard I use a UniformGrid (8 * 8) which I fill on init in "code behind" with Rectangle shapes.
Then I want to add my pieces on this grid, which are png images in a Image control I also create in "code behind".
I thought about putting these images in the same cell of the grid as my Rectangle controls, but I see the issue that I wouldn't be able to animate the move of a piece that way, since it will go from one location to another directly.
So I thought about adding the pieces to the parent control, and then use the RenderTransform property to set their positions.
The thing is, I can't figure out what I have to do so that if the parent control is resized the pieces stay at the right position.
Is there a way to set the translation once and for all without having to redefine it at resize? I thought about assigning the position and size of the Rectangle elements on the pieces control, but this doesn't seem to be doable in wpf...
Am I just doing it all the wrong way and there is a better option to do this?
Thanks for your help, any suggestions are welcome.
Related
I am a not very good at C# yet so bear with me,
I am trying to create a program that can edit pictures of small sizes (16x16, 32x32, etc...), specifically Minecraft texture files. I need to create a drawing surface where I can display rectangles on. I want to use WPF rectangles because they are working for me so far. I tried putting them on a WPF Grid panel but creating a good size grid panel with 1 pixel wide rows and columns takes about thirty seconds and that's quite a lot of time. Any ideas are helpful.
I'm getting the feel that your direction might not be the most efficient.
Of course, it's quite possible to convert an image into a lot of rectangles, but it's really not efficient once you have a lot of pixels. (32x32 = 1024 rectangles.)
So, instead of going along with WPF rectangles, like you want to, I would urge you to reconsider. Instead, try to work with WriteableBitmap.
From your vague description, I assume you are writing a paint like program, where the user can select a color and draw with the mouse on the texture with that color. By binding the WriteableBitmap up to an Image tag, and adding an event listener to the MouseMove event, you can get the mouse position, and whether the left/right mouse button is pressed or not. Combine that with some math involving the x position and the ActualWidth, and the y position and ActualHeight, of the Image, you can find the pixel the mouse is over, and set the color of that pixel.
So basically, Rectangles are not your best bet. Especially if you try to make a 32x32 grid to contain them. Use WriteableBitmap.
I would suggest using something more lightweight like DrawingVisuals. Alternatively if you really just want to display the textures you can preprocess them and display the result as a normal Image.
Ok so I have a custom control and I am applying a background gradient to it. The control that it is in is set to anchor left and right and the image is set to Stretch on the control.
Here is what the background image looks like when its in the normal size of the form.
Here is what the background image looks like when the control is stretched.
Obviously I want it to look like the top one as far as the edges go. I am using Inkscape to develop the background image. Any help on how to avoid this blurry edge would be much appreciated.
I suggest trying 9 images in your control, one for every edge and one for every corner plus the middle container, maybe you've seen this technique in a lot of websites. If you set all images with good anchor, the top and bottom edges will stretch only sideways and the right and left will stretch upward and downward. The corners would never change and the container would be completly stretchable. I am worried about flickering though since it is in a winform. Worth trying.
If you use a fixed image, even if it is bigger and you shrink it, you'll lose the corners proportions.
When the system resizes the image it is approximating the missing pixels in the new stretched image. There is nothing you can do to prevent the blurring from occurring. The only sensible option I think is adding the image in higher resolution (which should be easy since you use Inkscape to create them) and have the system shrink it instead of stretch it.
I need to load an image in a WPF window, an be able to read and modify individual pixels (in an efficient way), zoom the image (and scroll it), get the value RGB/grayscale of the pixel under the cursor, select areas (I guess knowing the cursor position and being able to modify pixels I could draw myself the square which represents the selected area)...
What is the best combination of WPF controls and classes to accomplish this?
I've been trying to do it loading a System.Windows.Media.Imaging.BitmapImage and putting it into a System.Windows.Controls.Image, but it's taking much longer than I expected.
Thank you very much
I once used this WPF Interactive Image Cropping Control. Go check it out, it should at the very least give you a good place to start. Oh, and welcome to Stackoverflow. :)
I am creating shapes on a wpf using a Canvas. I have created by C# code some Rectangles, each one of which is assigned with three circles and a TextBlock. I want now to make them move on the Canvas by a mouseEvent , in other words to drag them with the mouse and to move them on the Canvas. How is it possible to manipulate each Rectangle with the circles and the TextBlock as a compact group?
It is required, when the user clicks on the Rectangle to transfer it with its contents. However, the circles and the textBlock have their own coordinates, so if not grouped they stand still. How can I get over this?
Put the rectangle and everything else in a grid or another canvas, as described in this related question of yours: Drawing circles on a Rectangle
This is basically a user control composed of the rectangles, circles, and textbox, and you just allow that whole user control to be moved around, rather than the constituent parts.
If you don't want to add another layout panels try to apply the same transform to all elements you want to move, it's not so heavy solution.
I am using NPlot charting library to draw several plots illustrating signal fluctuations. The plots are inserted one beneath the other in a flowlayoutpanel1.
The x axis is the time. The y is the value of the signal.
I've added a trackbar at the bottom, along the x axis. When the user moves the trackbar, the value of each signal is displayed somewhere (in relation to the trackbar's position).
All of this is already functional.
I've been asked to add some visual way to illustrate the precise time where the trackbar is. They want some sort of vertical line that would move with the trackbar, over all the Nplots. However they are open to alternatives.
I have tried drawing the line but it's difficult to draw in relation to the trackbar's position. Also it ends up being drawn BEHIND the Nplots.
I've also tried drawing a static grid on the flowpanel but the Nplots are not transparent, and my boss doesn't like each plot having a individual grid for aesthetic purposes.
At this point i'm open to any "out-of-the-box" suggestions, or corrections on my implementation. I'm self taught in C# so i haven't done anything like this before.
Please help!
EDIT: I have gotten something slightly better by using a label with a border, stretching it to be tall and having width of 1. This creates a Line that goes over all other control. Now my biggest challenge is calculating the position of the trackbar pointer to make the line match it...
After a lot of fiddling, i found that the only way to have a line drawn over all other controls was NOT to use the Graphics drawline, as the controls placed on top were not transparent and i could not access their graphics component (was a imported control not a .NET class).
I ended up going with the EDIT solution, took a label with a border and put the width to 1, creating a simple line instead of a box.
The position formula took a lot of fine tuning, the way to go was to calculate (estimate) the width between two trackbar ticks an add a tiny offset for the control itself. Using the traback's pointer Value property, i could calculate the position of the label/line so that it would follow the trackbar pointer. There is a minuscule offset sometimes formed but not well seen to the naked eye.