How to create custom UI design in WPF?

Question

User interface

I googled for information on how to design my window, controls, etc. As a result, I got a little confused. Explain the following
1) Is it possible to directly throw layouts from Photoshop on elements (as far as I understand, no)
2) What are the UI tools to create your own design for WPF elements and windows
3) What is a WPF metro application (as I understand it these are some ready-made styles)

Answer 1

1. "Direct throw" is probably impossible. But the possibility of import is still present:
How to Import Photoshop Files into WPF
I don't know how this method works now, I haven't checked it.
2. Blend for Visual Studio overview
3. Metro UI specific style for apps/websites. For WPF, there is a very famous MahApps.Metro library .
Now, as for "styling" - WPF is very flexible in terms of customizing the appearance of controls and applications in general. You can do almost everything. I will not even try to reveal the topic, there are a lot of materials on the net, but I will try to give a direction for further searches:
Key words:
To get acquainted with the material from the documentation:
Styling and Templating
And for a thorough analysis, I recommend the following literature:
I myself studied WPF according to MacDonald's book, the material is presented in an accessible form, but the consideration is detailed, and not just the basics.
There are also online resources:
Some libraries that make life easier for a developer by offering styling of standard elements and also adding commonly used controls. Even if you don't use any of the options in the list below, you can extract a lot of useful information from the sources, so I'm giving links to them, not to the documentation pages:
The first two are very widely used.
And finally, a small digression:
More practice, and if you are not sure about something - ask, here, on the toaster or somewhere else, it's not so important.
When you first start learning WPF, you may be tempted to mix up data handling (application logic) and appearance (interface). You should not do this, do not start bad habits from the very beginning, then it will be difficult to relearn.
In principle, you can try to combine F # with WPF, the possibilities of code-behind are much, much less for us ;-), which means it will be easier to go understand MVVM patterns or even Elmish .

Answer 2

I'll add Foggy Finder
1) to directly use elements of Photoshop (as well as another editor) is evil. one way or another, WPF design works are built in 3 stages
a) design (pictures)
b) design layout in XAML
c) control code, animations interactive interface binding to data (C # + XAML)
In addition, Photoshop is a raster, and WPF is a vector .
hence the answer to question 2
2) for the UI design for further integration into XAML, we settled on Inkscape,
because
a) its rendering methods are almost the same as direct2D that WPF uses (this is very true for fonts, otherwise you can do this with fonts in Photoshop, which will then be very laborious to repeat in WPF)
b) it has an XML editor that allows you to take any vector object and insert it into the XAML code as is (icons for example). Path format in WPF is essentially the same SVG
c) Inkscape can't draw what WPF can't do, i. it turns out at the output after layout almost 1:1
3) Metro is just a design style, there are no special WPF applications. BUT there is UWP, this is already a little different, although the platform is similar to WPF, it would be more accurate to say this is its evolution.
As a result:
WPF application design cannot be created without a designer (captainship but a fact)
Even if you use a ready-made UI-kit (which is almost not applicable in real projects), then you need a layout designer (an analogy with HTML + CSS layout) that implements the layout of elements and forms .
If you want to deal with the layout yourself - you first need to master WPF itself and, more importantly, C #
Above, they advised the book by M. MacDonald - I also started with it.
But XAML and styling will have to be mastered on your own after, because this is a slightly higher level (it’s not enough to know XAML, you need to understand all the subtleties so as not to mess up) and there is no literature on this issue.
What's important! Without a designer vein and a craving for interfaces, as well as an understanding of animations, a graphic tree of elements, guidelines and a lot of everything related, nothing will work out, I say as I have repeatedly tried to teach this craft to ordinary programmers. In fact, this is a separate profession (like the html coder, the analogies are direct).