I'm developing a Windows 8 Metro-style application and I want to use vector images. As there seems to be no direct support for svg images, I am trying to use a xaml fragment consisting of multiple shapes (a path and some lines) as an image. I would like to have a resource dictionary entry with the composite shape and be able to include it in different pages. Ideally, I would also like to be able to resolve a specific composite shape from a data bound property.
From what I've read, the WPF approach was to have a VisualBrush or DrawingBrush consisting of the shapes, but there are no such classes in Windows 8 (and it seems like it's not even possible to derive from Brush).
How am I supposed to do this using WinRT UI?
No, you cannot use a DrawingBrush as the value of a background property in WinRT XAML. It's too bad, huh? Seems like a very powerful features to setup the fill of an object with vector layouts. In fact DrawingBrush is not even part of Windows 8 yet. It is what it is. For now, images are a fine solution. But we feel your pain.
I might as well toss in that VisualBrush is not part of WinRT-XAML either.
Each XAML fragment is really a UI element. I think the simplest approach would be to put the XAML into it's own user control and then add the user control to each page you wanted to display the "drawing" on. If you want the user control to display different shapes, you can expose a property on the control, data bind to that property, and inside the setter of the property read the value and toggle the visibility of the various XAML shapes to show or hide whatever parts of the composite image you want. It is a bit brute force, but will do what you want.
Windows8 way to have vector graphics in it is just to use ViewBox+Canvas and Path elements. It works well in my opinion, though I do miss VisualBrush.
Related
Is there any way to build an image map with qml (qt quick) components directly without importing html code?And I want to it's coordinates be same as html imagemap's coordinates(I dont want to recalculate my image map coords).
and
my shape is rectangular.tnx
No, there is no way. MouseAreas are always rectangular.
You would need to provide a some kind of collision detection function, to check whether your click happened inside of your object, described by the coordinates.
For this you can implement any of the algorithmns out there, in a way, that it supports your coordinate format. The right choice depends on the characteristics of your objects, like:
Is it a circle?
Is it a regular shape?
Is it convex?
Is it concave?
There are many good pages on collision detection, though a performant implementation might be tricky - especially in QtQuicks JS, so you probably want to do it in C++.
Another shot you might take, is dropping your coordinates, and produce masks that can be used with the solution provided here: https://stackoverflow.com/a/38177820/2056452 (coming from an official example)
Using C++/CLI on Visual Studio I want to create a 2D simulation, with the options to change the user's inputs on one side of the screen and the simulation on the other side. (The user's inputs would be used to calculate what to draw for the simulation)
I would like to be able to do this within a panel/fixed region keeping the drawing separate from UI elements (buttons etc). Essentially I would like to draw multiple dots on the screen and the position of those dots changes every second. Trouble is all the examples of of drawing I've seen take up the whole form.
What libraries and how can I use to create multiple 2D drawings either by controlling the colours of pixels or any other way inside a fixed region like a panel?
This really depends on what GUI toolkit you're using.
If you're using WinForms, create a control and override the OnPaint method.
If you're using WPF, I'd use WritableBitmap.
There are other methods for both toolkits, of course, but those are the ones I would use. Plus there's things like DirectX and OpenGL, but it sounds like you want something simple, so those would probably be overkill.
When we build Universal app for Windows 10, in order to support multiple resolutions we can use Adaptive triggers.
In this case for each visual state, separate layout is used. If we have 3 sizes to adopt, for each layout must be created, and as a result for most controls there will be multiple duplicates, which are hidden and becoming visible for appropriate visual state.
All these controls will be loaded to memory and waste RAM, which can be dangerous for low memory mobile phones (like lumia 620).
Is it right solution to use separate view for this case?
Update
If someone needs, here are good and very simple articles about element layout reordering form wintellect (AdaptiveTrigger, changing element positions in grid) and galasoft (AdaptiveTrigger, RelativePanel).
Windows 10 Xaml introduces an attribute x:DeferLoadingStrategy to mark controls to be loaded only when needed. This will let you include all of the controls in the Xaml without loading them into memory unless and until they are actually used. In the mobile case where the device is likely to have only one size actually used (or two for portrait / landscape) the layouts for the other sizes will never load.
For the case where you are using the same controls but just have slightly different positioning I would look at moving them (possibly with RelativePanel), as Jon Stødle suggests in the comments.
If there are bigger changes then I'd look into separate layouts (like you're doing) within the same file or with separate Xaml, but for simple positional changes that's probably overkill.
I want to add a color picker control to a windows store App (using VB), I came to know that there is no standard control for that. So any ideas about what could be a good purchased or open source option?
So I started building one into WinRT XAML Toolkit here but never got round to finishing it. Mainly because I figured there would need to be very different designs for different platforms. The control isn't finished, but a lot of the components that are there you could use to build a color picker that fits your design. There's a ColorExtensions class that might help you convert between HSL/HSV/RGB models, there's a FromString() method in it that can parse a color string in the formats available in XAML (e.g. "Transparent" or #FFAA0080 or #FB0) and there's a WriteableBitmapColorPickerExtensions class that you can use to render a hue ring, 2D color selector bitmap or a 1D color bar. I'll probably create some usable controls one day to use all of these primitives, but for now - you have that power! :)
I've created a simple color picker for Universal Apps, you can read about it from this blog post...
If i wanted to crop an image in VB.net, how would I go about doing it? I am trying to let the user drag out the box they want (system.drawing.rectangle), and it will automatically remove the edges surrounding the box.
My first problem is primarily the fact that I cannot make the system.drawing.rectangle visible. It is not displaying at all, I am setting its location and height programmatically, but nothing is showing up. I know there is probably something fairly obvious I am missing...but I cannot seem to find it.
My larger issue, however, lies with the cropping itself. I cannot find any crop methods, at all. Is there a hidden one I am missing? Or must I code it myself? How would I go about doing this? It ought to be able to output to a bitmap image object.
Thanks for the help, I am surprised this hasn't been asked on here before....
Regarding your first problem: a Rectangle isn't by itself visible. You have to draw it on your canvas using the Graphics object's DrawRectangle(...) method. For drawing a selection tool, you'll want to set your Pen object's DashCap and DashPattern properties.
To "crop" an image, you basically want to take the portion of a larger image delineated by a smaller Rectangle, and turn it into a new Bitmap. This can be done using one of the 30 overloads of the Graphics object's DrawImage(...) method. You can either keep the cropped portion in its original dimensions (resulting in a smaller Bitmap than your original), or you can "blow it up" to something like the original image's size. If you do the latter approach, it is usually a good idea to set your Graphics object's InterpolationMode property to HighQualityBicubic (I think that's the one, anyway), since the default InterpolationMode is pretty crappy.
There are a number of different ways of rendering images in .Net - it might help if you posted some of your code, along with an explanation of the exact problems you're running into.
Here is another answer with a link to a sample app (and source code in C#, sorry) that may help you get started.
There are a number of articles on these topics on CodeProject:
Pick your favorite flavor (though I encourage you to check out the C# projects - it shouldn't be too hard to convert).
VB
Image Cropping with Image Resizing Using vb.net
C#
Cropping Images
An Easy to Use Image Resizing and Cropping Control
Image Processing using C# (see the Cropping section - I was able to use this code in one of my projects)
WPF/C#
WPF Interactive Image Cropping Control
A Photoshop-like Cropping Adorner for WPF