PSD to WPF XAML: Import is messed up - c#

I'm having a Designer come up with some elements in Photoshop, which I then plan to use to build an app in Visual Studio. When I try to import the PSD file into Blend, it's a nightmare though.
Having made most elements using clipping masks, I can either merge them and have it look the same in XAML, but then I lose all the editing options as it's just one big block. If I don't merge the layers, I have the elements imported without the clipping mask which just looks horrible.
I know the import doesn't actually support clipping masks (seriously...?), so what's the best approach here? I'm sure I'm not the first one with this problem, however I can't seem to find ANYTHING on the web regarding a solution.
Should the PSD be changed or is the a way to change something during import?
Thanks a lot,
Chris

If your designer is making your assets in Photoshop than you're going to run into all sorts of issues especially once you start dealing in the varying possible resolutions etc, which you'll end up trying to counter with things like embedding the image files into ViewBox etc. There's not as much flexibility in usability with that route.
My suggestion, would be unless it's really necessary to use Photoshop assets in your work, create your assets in Illustrator instead and use an export to Actual Pure XAML converter like Mike Swansons AI to XAML tool (which is quite handy) then you'll be dealing with real XAML and vectors so you can take those assets and do a lot more with them in regards to things like Transforms, Storyboards, Property changes, etc. Plus it will all be vectored art so you can play with sizes /shapes to your hearts content and not lose the crisp lines and resolution.
Hope this helps.

Related

Drawing Lines in WPF-Forms with crayon-shader?

we have a project at university where we have to create fractals that are controllable by the user (with kinect). We are still in an early phase where we evaluate some ideas (though we already got some working prototypes). Our idea right now is to use a blackboard-image as background and draw the fractals on top of it. To make this look more natural we'd like to use some crayon effects on the lines we draw.
Our internet-research produced two main ideas to achieve this:
Paint an image of a photoshop-like brush for every moueposition of a line.
Use shaders on drawline-functions.
The first does work for an early test, but looks awful. I guess the latter would be the best approach, but the information in the internet seems to be lacking regarding this topic. At least I didn't find anything that really helped a lot. The Questions is:
Has anyone links or general tips on how to achieve this effect, or is it not possible in C#/WPF. Might there be an even better way? And how can I apply a created shader to drawline-method/brushes?
Thanks in advance and kind regards
Michael
EDIT
Nice tip from #Bradley Uffner ! (unfortunately he deleted his answer)
There is a tutorial here on how to achieve such effect :
http://alastaira.wordpress.com/2013/11/01/hand-drawn-shaders-and-creating-tonal-art-maps/
Another thing I've found recently which might interests you :
http://blogs.msdn.com/b/hemipteran/archive/2014/03/26/generating-noise-for-applications.aspx
I've didn't read well the title of your question, Windows Forms do not support shaders at all.
Be more specific about the meaning of a crayon shader
Regarding using shaders in WPF, you cannot apply them at a line-level but on a Control level instead.
This the class representing a shader in WPF:
http://msdn.microsoft.com/en-us/library/system.windows.media.effects.effect(v=vs.110).aspx
What I suggest
use an Image and set its Source property to use a WriteableBitmap
use the excellent WriteableBitmapEx library to easily draw on it, basically it's the WriteableBitmap in WPF but with many extension methods for drawing lines, circles, rectangles etc ...
then apply your shader to the Effect property of Image
For developing your shader
Use Shazzam, it allows you to develop an HLSL shader for WPF in a cool interface, preview it instantly and it will generate the Effect class ready to paste on your project.
There might be a couple of interesting shader for you in DOSBox SVN-Daum
Here's an example of the cartoon shader :
Obviously there will be quite some work as copy-pasting the shader to Shazzam won't work right away but you'll know what are the maths behind achieving the effect.
Mark the answer as accepted if you are satisfied with it :D if not edit your question and add more details.

Displaying, selecting and editing text on UserControl

I'm in the process of writing a small text-editor that is supposed to have very basic formatting capabilities, nothing fancy, yet more complex than what RichTextBox can provide (including a 'page' display functionality).
However, last time I wrote any text editors was with WinAPI in C for Windows 3.1. I have no idea on how to approach this with .NET. The furthers I've gotten until a blank is using TextRenderer.DrawText() to output the text I have into a rectangle... but something tells me that's not the way to go in this case, because I've thought all along that for one, I will want the background text in XML format... and while I can break up the paragraphs with tags, I have no clue how to do the formatting, such as or a different font family, so it probably need to be approached a little differently. Probably each word separately. Do I have to keep each word in an array (with respecting xml tags) and draw it as a separate control keeping its positions in an array as well? That sounds like an awful lot of memory and drawing power if we're talking about hundreds of thousands of words in one file (it's a possibility, although I highly doubt one file would extend beyond 20000 words, however anything's possible and together with the word's points (formatting is only available to full words, so no worry about that) it may grow pretty big with memory usage, something that I don't particulary prefer to happen.
So... what I'm looking for is a few hints and tips (I can't use Tx Text Editor, DevExpress or Telerik's RichTextEditors for a good reason plus their price). on the most correct way to build a 'word processor' that is well extendable with C#.NET as it's the one thing I have so far never had to stick my nose into.
Basically:
1) Best way to draw text into a custom control. How should I keep my text? I will probably use the base Text property for pre-formatting stage when I load the files. Or perhaps I'll extend it with my custom XML class? Should I keep words in order in position and joining them by hand when backspace is used? Etc etc.
2) Best way to do selection (probably only one way I presume?), while in WinAPI I could just detect the character under cursor as it was standard text, considering the amount of fonts and the way windows draws the characters I would either have to OCR and then start calculating position... so I presume there's a better way of selecting text?
3) Editing text - which I would assume is simple once I have a cursor position.
Cheers for reading and... hopefully someone comes up with a better solution than my feeble DrawText which... isn't really the solution.
If you're looking to create a more fully-functional text editor in WPF, you might want to start with this sample and work on from there.

Minimal Images & XAML-Defined shapes?

Is it good practise to build my UI with minimal images and define things like shapes/paths etc in the XAML?
If so, what are the advantages of this approach and/or other approaches?
In my opinion, having been creating UIs in WPF for the past 7 years, yes it is good practice in general. However, it depends entirely on the aesthetic you want to provide. Static images add to your application size but can be easily cached making them performant. They're a little inflexible as an image will distort the second you try to stretch it's dimensions. Images are fine if you don't need it to be dynamically sized.
However, you'll find that defining your UI entirely with markup can be a lot more complicated and can stray from your pixel-perfect mockups at various sizes. Gradients produced in WPF are inferior quality, you'll see visible banding if the gradient spans too far.
Performance doesn't play much of a role unless you intend to use a lot of DropShadowEffects (do not use legacy BitmapEffects). Stick to the lightweight elements (such as FrameworkElement) when templating controls.
By the way, there's a fantastic and recently free icon studio called Syncfusion Metro Studio 1 which is a fairly extensive icon pack that allows you to customize the size, background, foreground, & padding, then it lets you choose if you'd like to save it as an image or export it as a XAML path. The benefit of using XAML paths are that they will be perfectly scalable and you can dynamically change the fill color, could be set by the user even. Something that is possible with images using a custom color overlay shader but very resource intensive.

Is it practical to port code from Flash to C#?

My goal is to gain a better understanding of the characteristics of C#, and become more comfortable creating simple apps. I am fairly competent with Flash (Actionscript 3), and found an old Tic-Tac-Toe game I'd written. I started wondering about porting this code into a C# application. Not knowing much about C#, I'm wondering how difficult the migration would be.
On the one hand, the underlying game logic is syntactically similar, and therefore would be easy to port.
However, as far as the graphics are concerned, I don't even know where to begin. So far, I've only exposed myself to Windows Forms and Console apps in C#.
I'm wondering if these Flash concepts have similar analogs in C#, or if the procedures and syntax are radically different:
Placing graphic elements on a stage
Rendering lines from start/end coordinates
Event listeners on movie clips
Swapping the image inside a graphic element (or, in my Flash version, nextFrame() in a movie clip)
You may want to try developping your little game using Silverlight. Silverlight applications, coded using C# and Xaml, are pretty similar in form with flash applications, and you should find everything you need without trouble.
So I suggest you download the Silverlight SDK (free) and give it a try.
Firstly, Flash is to WPF (close enough) as ActionScript is to C#.
The WPF/Silverlight model is much more similar to Flex that it is to Flash. Everything is added to the UI tree as a object, even lines.
Likewise, adding event handlers to controls (like a button click) can be done in the "code behind" (the code that lives with the view), but the recommendation is to use the MVVM pattern. If you are new to the concepts of separation of concerns and unit testing, feel free to start with the simpler "code behind" method.
While WPF and Silverlight are very similar, I'd recommend starting with Silverlight as the SDK and available samples are richer. You can easily move onto WPF later on (though porting an application from Silverlight to WPF is not automatic).
Swapping images, as you mentioned, would be done via "Visual States" in Silverlight (or possibly changing the image reference, which is more "hacky").
Have a look at the following links to get started:
Learn # Silverlight.net
Silverlight on MSDN
Shapes and Drawing (Silverlight)
If you're looking specifically to do games and the like, you may wish to look into the free XNA framework. However, there will be differences as Flash gives you far more ability to "set up" things beforehand and modify them.
Placing graphic elements on a stage
If you go the XNA route, you will be drawing sprites using the spritebatch, you tell them where and how to draw and that's where they will go
Rendering lines from start/end coordinates
In windows forms you can do this via a simple System.Drawing call, however if you wish to do this in XNA, you will either have to make a 1 pixel square and stretch/rotate it to what you want, or use 3d primitives (Though this will limit you to a 1 pixel line)
Event listeners on movie clips
Look into delegates, but there isn't really an equivalent for movie clips to my knowledge
Swapping the image inside a graphic element (or, in my Flash version, nextFrame() in a movie clip)
This is fairly simple, depending on what you mean. If you want to, say, animate a sprite. You can do this by moving the source rectangle or changing the texture of the spritesheet. If you mean the screen as a whole, this is mostly handled for you provided you use the spritebatch. In windows forms you'll have to do more of it yourself, but the base concepts are the same.
Overall it's not that bad, but if that doesn't sound appealing check out Silverlight. It's basically C# styled flash so you may find the transition easier.
Good luck and hope this helps.

XAML Based Level Editor

I would like to create a level editor for Silverlight with XAML. What resources would be useful for research before starting such a project?
Here is some information to clarify.
I made 1 silverlight game and released it so far.
The I would like to have an overhead style action game. The map would be much larger than the current viewable space.
WPF has a steep learning curve, don't get dis-heartened it's brilliant, but it has so many nooks and corners that it'll take a while to get comfortable. For a start there's a really good blogging community at WPFDisciples all of these are worth reading. Codeplex has some good libaries for 3D, physics engines etc and reverse engineering others code is a good way to learn.
A couple of good books are Windows Presentation Foundation Unleashed and Petzold's Applications = code + markup is one of the few books/places that doesn't preach that everything has to be done in Xaml
An area that takes some getting used to is binding, lots of stuff out there but it can be complex, and it's a impossible to debug until you have the magic knowledge. Binding in WPF isn't just about data, it's about linking all UI elements and behaviours together - it's really important.
Finally you have a choice between Silverlight and WPF, they're not the same. Although Silverlight is a good sub set of WPF, there are certain things you just can't do.
Finally Finally if you have a graphic design, artist background try using Blend, not VS it's a much better tool for those who are visually aware.
Obviously getting to grips with XAML and how to work with it as a concept is important if you haven't already. An overview of it (using WPF as the example) can be found at MSDN here along with the System.Windows.Markup namespace which has the classes you would use for working with it.

Categories