WPF styles
I knew WPF styles are powerful, but the XML code is sooo long that I’ve never felt the need to expand my app with tons of new lines. Until now.
Recently I moved to dark skins everywhere. In PhpStorm I switched to Dracula theme with modified Zenburn schema, Geany has Zenburn schema as well, for Thunderbird and Firefox I found magnificent DeepDark theme and earlier this year I updated Quiky editor to Monokai-like colors.
I finally decided for the viewer part of Quiky to make it dark as well. Panels were easy, it’s possible to set colors as variables (e.g. <SolidColorBrush x:Key="GuiBackgroundBrushColor" Color="#666666" /> and then <Setter Property="Foreground" Value="{DynamicResource GuiForegroundBrushColor}"/>). The troubles came with a TreeView.
I searched for how-tos and on StackOverflow I found a solved question about styling TreeView items. I also wanted the whole line to be selected, not only a text background.
It took me a while to get the solution working, because honestly I didn’t want to understand all that, felt like I won’t need it. But I had to, so ultimately I even tweaked it a little. And because I learned what’s going on (restyling is often recreating controls, all in XML), I decided to style the whole app.
My next concern were scrollbars. I wanted Apple-like and I found a solution as well. It also needed some tweaking, but it looks quite good. I added hover effect on the thumb (slider), so it fades in and out.
Finally I styled buttons, textboxes and comboboxes, but it would need a little more time (some finishing touches), so I did only some basic stuff. I want some subtle effects (animations), but I didn’t like anything I made so far.
I’m satisfied, for now:
Before and after redesign
Not all that glitters is gold
I have to say, over the past few weeks I quite fell in love with WPF. It’s like WinForms, that has all it’s things sorted out, kinda grown up. All those class names make sense and are consistent throughout the framework (I’m talking especially about controls).
Until I came across WebBrowser customizations. In WinForms it was simple and straightforward, so I assumed this will be the same, but better. Well, I was wrong. When I tried to assign any kind of event in mshtml/DOM, the WebBrowser froze. Yes, the event has been processed, but I was unable to select text or scroll the page. Useless! I didn’t find anything, that helps – not even in solution, that described exactly my problem about mouse lockups.
I started research to replace default IE WebBrowser with e.g. WebKit. There are some nice stuff, like WebKit.NET, Awesomium or GeckoFX. I understand that browser is a big deal, but I don’t want to ship my tiny app with at least 30 MB in browser DLLs.
I had a strange feeling about the solution mentioned before, because I noticed in the HUGE discussion below the article that people thanks the author, so it should work. But it didn’t. This time I was more stubborn and kept on reading posts.
Finally I reached one post, that points out the author forgot to put “[ComVisible(true)]“ above one class, which solved my problem and it started to work. Phew!
In many, many solutions I found, that this is not expected behavior, it’s in the WPF framework since the dawn of time, but Microsoft apparently don’t care. Sucks!
Desktop App
When I was searching for inspiration thru AppStore, I found a great ToDo app, called Wunderlist2. I didn’t need it, because I was already using Evernote for ToDos, but I like it’s completely free and has mobile + web + desktop access – exactly what I admired Evernote for and what I was aiming at with QetriX.
But it was pretty neat. Like Evernote it looked the same on all platforms and unlike Evernote it featured beautiful desktop App. I was wondering how it’s possible to achieve this look and my first thought was it’s some kind of HTML5 wrapper. I knew Evernote was written in Qt and I made several apps in WinForms, but neither was an option. After a little googling I discovered WPF.
I came across WPF a while ago, when I looked for a simple way for 3D engine and I was playing with XNA little bit, but I thought “what the hell I would use this for” :)
WPF, like Android or ASP.NET, has GUI defined in XML and attached functionality in C# (in my case). I was overwhelmed by the GUI definitions, but fortunately I was able to figure out how the Wunderlist app is made, thanks to the WPF Inspector by Christian Moser.
I don’t rush with the app, but I’m glad I did these first steps and in the meantime I can think about the final product.