int64.org

WPF

Alex Filo has the right idea, UniformWrapPanel

WPF’s WrapPanel is missing a key feature: the ability to create vertical columns, but still fill the maximum amount of width available. One less annoyance in WPF, thanks to Alex Filo’s UniformWrapPanel.

Databinding TextBlocks with XAML

I’ve become frustrated lately with trying to databind a list of strings to a textblock. Ie, if I have:

string[] mytext = new string[] { "a", "b", "c" };

And I want the effective end result to be:

<TextBlock>a, b, c</TextBlock>

Or maybe I want something more complex like hyperlinks:

<TextBlock>
   <Hyperlink>a</Hyperlink>,
   <Hyperlink>b</Hyperlink>,
   <Hyperlink>c</Hyperlink>
</TextBlock>

Basically what I’m looking for is a ItemsControl that works on TextBlocks (or Spans, etc.), with a Separator template to insert those “, ” in between the items.

Your first instinct might be to use a StackPanel instead, but StackPanel wasn’t made for displaying text. It might fool you initially, but you quickly notice it doesn’t behave anything like text: there’s no proper kerning, RTL, wrapping, or anything else the text classes were made to support.

I’m pretty surprised that WPF doesn’t have anything like this, as it seems like displaying lists as text would be a common enough thing for any app. Unfortunately I’m still not well versed enough in WPF to create such a custom control for myself, and haven’t had a whole lot of time to investigate it.

Using HSL colors in WPF

One thing that has always irritated me about WPF is you’re still stuck specifying colors in RGB. HSL just feels so much more natural from a design standpoint. Well, we’re not completely out of luck—we’ve got markup extensions.

So I created my own HslColor and HslBrush extensions which are fairly simple to use:

<Window xmlns:e="clr-namespace:WpfExtensions"
        Background="{e:HslBrush H=300,S=50,L=75,A=80}"/>

Hue is specified in degrees from 0 to 360, while Saturation, Lightness, and Alpha are from 0 to 100. The parameters are all doubles and it converts to scRGB behind the scenes, which means you actually get a much higher color precision than if you had just used the equivalent RGB hex. With Windows 7 having native support for scRGB, this will future-proof your application to make good use of upcoming monitors with Deep Color support.

Converting SVG to XAML

While I understand (and even agree with some of) the reasons behind Microsoft reinventing the wheel and not using SVG for their WPF, I find myself constantly wishing they at least offered it as a supported image format. There is so much SVG out there, it’s a shame to not be able to use it.

On my search for a SVG to XAML converter I came across a few really old and out of date tools, one recent but still sub-par tool, and finally one almost perfect tool: Michael Swanson’s Adobe Illustrator to XAML Export plugin.

As the name suggests, it is a plugin for Adobe Illustrator. It works great, but It’s a bit odd to use – by default, it exports to a canvas which, for everything I’ve ever wanted to use a XAML image, is the wrong choice. Luckily it also supports exporting to a DrawingBrush if you hold down the right shift key when you click save in Illustrator.

DrawingBrush isn’t my first choice of format, but you can easily change it into a DrawingImage resource, which lets you use it just like any other ImageSource. To do so you just take what it spits out:

<Viewbox
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle>
   <Rectangle.Fill>
      <DrawingBrush>
         <DrawingBrush.Drawing>
            <DrawingGroup>
               ...
            </DrawingGroup>
         </DrawingBrush.Drawing>
      </DrawingBrush>
   </Rectangle.Fill>
</Rectangle>
</Viewbox>

And move it’s root DrawingGroup over like so:

<ResourceDictionary
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<DrawingImage x:Key="someImage">
   <DrawingImage.Drawing>
      <DrawingGroup>
         ...
      </DrawingGroup>
   </DrawingImage.Drawing>
</DrawingImage>
</ResourceDictionary>

Now you can use it just like any other resource:

<Image Source="{StaticResource someImage}"/>

All in all, it’s a fantastically useful tool. If it had some form of UI to select export options instead of asking you to use the shift key (really, wtf??), it would get an A+.