Tuesday, April 7, 2015

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 to darker even the viewer part of Quiky. 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 spent few minutes googling how-to and I found a StackOverflow a solved question about styling TreeView items. I also wanted the whole line to be selected, not only the 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 redesign
After redesign

No comments:

Post a Comment