Preventing deformation in XAML Grid's background when resizing - wpf

I am writing a brush in XAML that I can use to paint the background of a Grid to create a banner. It looks like this:
I want the brush to "stretch" with the Grid when the Window resizes, but I do not want the center angles to deform.
I only need to be able to draw the shapes in the background of a Grid. How can I avoid the deformation?
The code I've written looks like this:
<Window x:Class="WpfApplication.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="60" Width="300">
<Window.Resources>
<DrawingBrush x:Key="GridBackground">
<DrawingBrush.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing Geometry="M0,1 0,0 0.4,0 0.45,0.5 0.4,1Z" Brush="#FF6A00" />
<GeometryDrawing Geometry="M0.6,1 0.55,0.5 0.6,0 1,0 1,1Z" Brush="#FF0000" />
</DrawingGroup.Children>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Window.Resources>
<Grid Background="{StaticResource GridBackground}">
<TextBlock Foreground="White" VerticalAlignment="Center">Some text</TextBlock>
</Grid>
</Window>

I would make it two brushes, one anchored to the right, and one anchored to the left. Something like this:
<Grid>
<GeometryXXX Geometry="M0,1 0,0 0.4,0 0.45,0.5 0.4,1Z" Width="300" HorizontalAlignment="Left" Brush="#FF6A00">
<GeometryXXX Geometry="M0,1 0,0 0.4,0 0.45,0.5 0.4,1Z" Width="300" HorizontalAlignment="Right" Brush="#FF0000">
<TextBlock Foreground="White" VerticalAlignment="Center">Some text</TextBlock>
</Grid>
I don't have my compiler open, and I don't remember the name of the Geometry drawing object.
The other way of doing it would be to create a valueconverter, and do something like:
...
<GeometryDrawing Geometry="{Binding Width, ValueConverter=LeftAngledThing}" Brush="#FF6A00" />
<GeometryDrawing Geometry="{Binding Width, ValueConverter=LeftAngledThing}" Brush="#FF0000" />
...
You would need to look up the exact syntax for how to do this though, as I don't remember it right now.

Related

How to create and use ResourceDictionary of external XAML images

I would like to use icons from Visual Studio icon set for a WPF app and I would like to do it properly using ResourceDictionaries, but it seems more challenging than I thought.
The example icon is a ViewBox provided in a separate XAML file, it's named home_16x.xaml and the XAML content looks like this:
<Viewbox Width="16" Height="16" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Rectangle Width="16" Height="16">
<Rectangle.Fill>
<DrawingBrush>
<DrawingBrush.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing Brush="#00FFFFFF" Geometry="F1M16,16L0,16 0,0 16,0z" />
<GeometryDrawing Brush="#FFF6F6F6" Geometry="F1M7.8786,-0.000199999999999534L-0.000399999999999956,7.8798 -0.000399999999999956,9.4138 0.9996,10.4138 0.9996,15.9998 15.0006,15.9998 15.0006,10.4138 16.0006,9.4138 16.0006,7.8798 8.1206,-0.000199999999999534z" />
<GeometryDrawing Brush="#FFF0EFF1" Geometry="F1M13,14L10,14 10,9 6,9 6,14 3,14 3,7.707 8,2.707 13,7.707z" />
<GeometryDrawing Brush="#FF424242" Geometry="F1M0.6462,8.6461L1.3532,9.3531 2.0002,8.7071 2.0002,15.0001 7.0002,15.0001 7.0002,10.0001 9.0002,10.0001 9.0002,15.0001 14.0002,15.0001 14.0002,8.7071 14.6462,9.3531 15.3532,8.6461 8.0002,1.2931z M3.0002,7.7071L8.0002,2.7071 12.9992,7.7071 12.9992,14.0001 10.0002,14.0001 10.0002,9.0001 6.0002,9.0001 6.0002,14.0001 3.0002,14.0001z" />
</DrawingGroup.Children>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.Fill>
</Rectangle>
</Viewbox>
If I use the following on my page then it works, but that's not what I am after. It doesn't seem elegant and I would like to keep the option open for switching ResourceDictionaries (for themes).
<Viewbox Width="400" Height="400">
<Frame Source="\Media\Icons\Home_16x.xaml"/>
</Viewbox>
It also shows the following in design view, which is quite confusing:
I would really like to be able to build a dictionary of the icons, that I could call with something like (or cleaner, if possible):
<Viewbox Width="400" Height="400">
<Frame Content="{StaticResource ResourceKey=Icons.Home}"/>
</Viewbox>
My current Icons ResourceDictionary looks like this:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Viewbox x:Key="Home">
<Viewbox.Resources>
<ResourceDictionary>
<Frame x:Key="Home" Source="\Media\Icons\Home_16x.xaml"/>
</ResourceDictionary>
</Viewbox.Resources>
</Viewbox>
</ResourceDictionary>
I admit I am quite lost. Any help would be much appreciated.
If you use a visualbrush on say a rectangle as fill, that will stretch to whatever size the rectangle is.
Hence you could have a visualbrush in a resource dictionary:
<DrawingBrush x:Key="HomeBrush">
<DrawingBrush.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing Brush="#00FFFFFF" Geometry="F1M16,16L0,16 0,0 16,0z" />
<GeometryDrawing Brush="#FFF6F6F6" Geometry="F1M7.8786,-0.000199999999999534L-0.000399999999999956,7.8798 -0.000399999999999956,9.4138 0.9996,10.4138 0.9996,15.9998 15.0006,15.9998 15.0006,10.4138 16.0006,9.4138 16.0006,7.8798 8.1206,-0.000199999999999534z" />
<GeometryDrawing Brush="#FFF0EFF1" Geometry="F1M13,14L10,14 10,9 6,9 6,14 3,14 3,7.707 8,2.707 13,7.707z" />
<GeometryDrawing Brush="#FF424242" Geometry="F1M0.6462,8.6461L1.3532,9.3531 2.0002,8.7071 2.0002,15.0001 7.0002,15.0001 7.0002,10.0001 9.0002,10.0001 9.0002,15.0001 14.0002,15.0001 14.0002,8.7071 14.6462,9.3531 15.3532,8.6461 8.0002,1.2931z M3.0002,7.7071L8.0002,2.7071 12.9992,7.7071 12.9992,14.0001 10.0002,14.0001 10.0002,9.0001 6.0002,9.0001 6.0002,14.0001 3.0002,14.0001z" />
</DrawingGroup.Children>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
And use that:
<Rectangle Fill="{StaticResource HomeBrush}" Width="16" Height="16"/>
Or you could let your rectangle fill whatever cell of a grid it's in and omit width and height.
You don't need a viewbox to scale vectors, they can stretch.
You can also use a visualbrush within a path. The path can define one shape with a geometry ( which could be from a resource ) and within that your drawingbrush could put another geometry drawing with a different colour.
An example geometry out a resource file I have:
<Geometry x:Key="BeeIcon">
M15.551045,25.144995L16.748029,25.144995 ....
</Geometry>
I removed a big chunk of the geometry there.
That BeeIcon can then be re-used in different drawinggroups which is useful if you want to construct icons with several parts.
Brushes and colours for them can also be from a resource dictionary so you can switch them out for different themes or branding.

Relative coordinates in DrawingBrush

I am somewhat confused about how relative coordinates work in WPF, especially in scenarios with DrawingBrushes.
Let's say I want to paint the background of a square area, which is flexible in it's size. I want to paint the background with a special "shape", let's say a kind of "T" laying on the side, with the vertical stroke going through the middle of the area.
Using relative coordinates (the size of the area is flexible), I came up with the following XAML:
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="722" Width="722" UseLayoutRounding="True">
<Window.Resources>
<DrawingBrush x:Key="EdgeGrid">
<DrawingBrush.Drawing>
<GeometryDrawing>
<GeometryDrawing.Geometry>
<!-- draw a single T laying on the side -->
<GeometryGroup>
<!-- top to bottom -->
<LineGeometry StartPoint="0.5,0.0" EndPoint="0.5,1"/>
<!-- left to right -->
<LineGeometry StartPoint="0.5,0.5" EndPoint="1,0.5"/>
</GeometryGroup>
</GeometryDrawing.Geometry>
<GeometryDrawing.Pen>
<Pen Thickness="0.01" Brush="Black" />
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
</Window.Resources>
<Grid Name="LayoutRoot">
<Rectangle Width="400" Height="400" Stroke="Black" StrokeThickness="1" Fill="{StaticResource EdgeGrid}">
</Rectangle>
</Grid>
But the result I get looks like this:
(source: bilder-hochladen.net)
Shouldn't the vertical stroke go right through the middle (X coordinate is 0.5)?
And also how can I set the pen thickness to be 1 or 2 pixels in relative mode?
Any ideas?
You'll have to set the ViewboxUnits property of the DrawingBrush to Absolute (instead of the default RelativeToBoundingBox). The Viewbox would still be (0,0,1,1).
See the TileBrush Overview article on MSDN for details about a brush's viewbox and viewport.
<DrawingBrush x:Key="EdgeGrid" ViewboxUnits="Absolute">
<DrawingBrush.Drawing>
<GeometryDrawing>
<GeometryDrawing.Geometry>
<GeometryGroup>
<LineGeometry StartPoint="0.5,0.0" EndPoint="0.5,1"/>
<LineGeometry StartPoint="0.5,0.5" EndPoint="1,0.5"/>
</GeometryGroup>
</GeometryDrawing.Geometry>
<GeometryDrawing.Pen>
<Pen Thickness="0.01" Brush="Black" />
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
Of course this won't let you define stroke widths in pixels. Making the drawing in absolute coordinates and then putting the whole thing in a Viewbox won't also help much, because strokes would still be scaled.
In order to get a scalable drawing with fixed stroke width, you would have to use a Path element, where you set the StrokeThickness and Data properties and assign a ScaleTransform to the Transform property of the Geometry used as Data.
In your special case of drawing a centered, T-shaped figure with fixed stroke width, you may simply draw two (very long) Lines in a Canvas, where the coordinate origin is centered by putting the Canvas in a 2x2 Grid. You may even choose to have different strokes and stroke widths for the two Lines.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Canvas Grid.Column="1" Grid.Row="1">
<Line Y1="-10000" Y2="10000" Stroke="Black" StrokeThickness="1"/>
<Line X2="10000" Stroke="Black" StrokeThickness="1"/>
</Canvas>
</Grid>
To get vertical stroke right you need to do it like this:
<GeometryGroup>
<!-- top to bottom -->
<LineGeometry StartPoint="0.75,0.0"
EndPoint="0.75,1" />
<!-- left to right -->
<LineGeometry StartPoint="0.5,0.5"
EndPoint="1,0.5" />
</GeometryGroup>
But that won't help you with pen thickness. In general, if you want to scale a geometry - first create it using absolute coordinates you like (say in 0-100 range), then put that into ViewBox or use ScaleTransform, like this:
<Viewbox Width="400"
Height="400">
<Path Stroke="Black"
StrokeThickness="1">
<Path.Data>
<GeometryGroup>
<!-- top to bottom -->
<LineGeometry StartPoint="75,0"
EndPoint="75, 100" />
<!-- left to right -->
<LineGeometry StartPoint="50,50"
EndPoint="100, 50" />
</GeometryGroup>
</Path.Data>
</Path>
</Viewbox>
Let's see how the proposed solution would look like.
Let's assume we want to show the shapes in a kind of grid and draw various shapes depending on the data (by selecting an appropriate DateTemplate). For simplicity, in this example, let's draw only one kind of shape (a cross, as in my initial question):
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="722" Width="722" UseLayoutRounding="True">
<ItemsControl ItemsSource="{Binding data}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="10" Rows="10">
</UniformGrid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="Cell">
<Path StrokeThickness="2" Stroke="Blue" SnapsToDevicePixels="True">
<Path.Data>
<GeometryGroup>
<GeometryGroup.Transform>
<ScaleTransform ScaleX="{Binding ElementName=Cell, Path=ActualWidth}" ScaleY="{Binding ElementName=Cell, Path=ActualHeight}"/>
</GeometryGroup.Transform>
<!-- top to bottom -->
<LineGeometry StartPoint="0.5,0.0" EndPoint="0.5,1"/>
</GeometryGroup>
</Path.Data>
</Path>
<Path StrokeThickness="1" Stroke="Black" SnapsToDevicePixels="True">
<Path.Data>
<GeometryGroup>
<GeometryGroup.Transform>
<ScaleTransform ScaleX="{Binding ElementName=Cell, Path=ActualWidth}" ScaleY="{Binding ElementName=Cell, Path=ActualHeight}"/>
</GeometryGroup.Transform>
<!-- left to right -->
<LineGeometry StartPoint="0,0.5" EndPoint="1,0.5"/>
</GeometryGroup>
</Path.Data>
</Path>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Window>
#Clemens Is this the solution you had in mind? Is this the correct way of doing it?
The only problem I have with the result is that the lines are blurry and there is even a break to be seen in the horizontal line. Is there any solution for this?

How to stretch a Rectangle inside a Button?

I have the following Window:
<Window x:Class="WpfApplication8.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
Width="525"
Height="350">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.Resources>
<DrawingBrush x:Key="_2_Agenda" Stretch="Uniform">
<DrawingBrush.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing Brush="#FF000000" Geometry="F1 M 9.36198,78.5885L 9.36198,100L 29.362,100L 29.362,78.5885L 9.36198,78.5885 Z " />
<GeometryDrawing Brush="#FF000000" Geometry="F1 M 36.1875,69.6576L 36.1875,100L 56.1875,100L 56.1875,69.6576L 36.1875,69.6576 Z " />
<GeometryDrawing Brush="#FF000000" Geometry="F1 M 63.0137,49.5989L 63.0137,100L 83.0137,100L 83.0137,49.5989L 63.0137,49.5989 Z " />
<GeometryDrawing Brush="#FF000000" Geometry="F1 M 89.8379,36.1133L 89.8379,100L 109.838,100L 109.838,36.1133L 89.8379,36.1133 Z " />
</DrawingGroup.Children>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Grid.Resources>
<Rectangle Fill="{StaticResource _2_Agenda}" />
<Button Grid.Column="1">
<Image Source="/WpfApplication8;component/Images/accept_32x32.png" />
</Button>
<Button Grid.Column="2">
<Button.ContentTemplate>
<DataTemplate>
<Rectangle Fill="{StaticResource _2_Agenda}"/>
</DataTemplate>
</Button.ContentTemplate>
</Button>
</Grid>
</Window>
In column 0 and 1 the icons are stretched. But the Rectangle in column 2 is squeezed to 0 pixels. I can set the width & height explicitly, but I would like to stretch it with the window, just as column 0 and 1. How can I do that? Or shouldn't I have used a GeometryDrawing and a DrawingBrush in the first place?
This resource is exported from Expression Design, so if I should create my resources in a different way, it will probably cost me a lot of work to convert all my icons.
The content of a button is not stretched by default, entering some text will put it at the center of a button. You can control this behavior by the HorizontalContentAlignment and VerticalContentAlignment properties.
<Button Grid.Column="2"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch">
...
</Button>
When center aligned, the layout behavior of the content will be different: the button will ask the rectangle 'How big do you need to be?'. As there is no width or height defined it will default to zero. When stretching it will tell the rectangle: 'Fill up this space as best you can'.

DrawingImage icon gets automatically trimmed when stretch=uniform

We use vector icons exported from Expression Design in our application, but I just noticed that all empty space in the icons gets trimmed away when they are displayed inside a stretched Image. Since the whole point of having vector icons is to allow them to stretch and scale nicely, this seems very strange.
Here is an example. Both the red and the blue star are designed in a 32 pixels wide document, but the blue star is much smaller. Setting the stretch property to Uniform suddenly makes the two icons the same size.
Is it possible to solve this and keep the whitespace around the icons? I guess a possible workaround would be to add a transparent background rectangle that covers the whole icon area, but this seems like a bad solution to me.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="GeneralTest.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Window.Resources>
<DrawingImage x:Key="small_blue_star">
<DrawingImage.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing Brush="Blue" Geometry="F1 M 20.4989,22C 20.4634,22.0177 16.2771,19.0022 16.2416,19.0022C 16.2061,19.0022 12.0021,22.0177 11.9844,22C 11.9489,21.9823 13.4921,17.0332 13.4744,16.9977C 13.4744,16.9623 9.4655,14.0354 9.48323,13.9999C 9.48323,13.9644 14.45,14.0177 14.4855,13.9999C 14.5032,13.9822 16.2061,8.99765 16.2416,8.99765C 16.2771,8.99765 17.9623,13.9822 17.98,13.9999C 18.0155,14.0177 22.9823,13.9644 23,13.9999C 23,14.0354 18.9911,16.9623 18.9911,16.9977C 18.9734,17.0332 20.5166,21.9823 20.4989,22 Z "/>
</DrawingGroup.Children>
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
<DrawingImage x:Key="big_red_star">
<DrawingImage.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing Brush="Red" Geometry="F1 M 26.0781,32C 25.9941,32.0436 16.0823,24.6277 15.9983,24.6277C 15.9143,24.6277 5.96055,32.0436 5.91855,32C 5.83455,31.9564 9.48848,19.7856 9.44648,19.6983C 9.44648,19.6111 -0.0453207,12.4133 -0.00332647,12.326C -0.00332647,12.2388 11.7564,12.3697 11.8404,12.326C 11.8824,12.2824 15.9143,0.0243702 15.9983,0.0243702C 16.0823,0.0243702 20.0723,12.2824 20.1142,12.326C 20.1982,12.3697 31.958,12.2388 32,12.326C 32,12.4133 22.5082,19.6111 22.5082,19.6983C 22.4662,19.7856 26.1201,31.9564 26.0781,32 Z "/>
</DrawingGroup.Children>
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
</Window.Resources>
<StackPanel x:Name="LayoutRoot">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Stretch=None" Width="100"/>
<Image Source="{StaticResource big_red_star}" Width="32" Stretch="None"/>
<Image Source="{StaticResource small_blue_star}" Width="32" Stretch="None"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Stretch=Uniform" Width="100"/>
<Image Source="{StaticResource big_red_star}" Width="32" Stretch="Uniform" />
<Image Source="{StaticResource small_blue_star}" Width="32" Stretch="Uniform"/>
</StackPanel>
</StackPanel>
</Window>

WPF Dynamic Resource Not Updating when inside data template

I am trying to setup a system in a WPF app where the user can select a different theme and the UI updates. To achieve this I am removing one resource dictionary and merging in another one.
Everything is working fine except one scenario.
I have some pages that define a datatemplate. In the datatemplate is a rectangle that is bound to a string property on the viewmodel (using Caliburn.Micro) and I have a converter that converts the string into a drawingbrush (it finds it from the resources).
The problem is that the dynamicresource in the drawingbrush (the color) will not update.
Every other instance of rectangle I have bound the same way (not in a datatemplate) the color of the drawing brush updates perfectly. Only when inside the datatemplate does this problem occur.
Here is a sample of the data template on a view
<DataTemplate x:Key="ListBoxItemTemplate">
<Border Style="{DynamicResource EntitySelectListBox}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Fill="{Binding IconName, Converter={converters:StringToResourceConverter}}" Width="50" Height="50" Margin="5" ToolTip="{Binding ToolTip}" />
<TextBlock FontFamily="Segoe WP"
FontWeight="Light"
FontSize="22"
Grid.Column="1"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Text="{Binding ButtonText}" />
</Grid>
</Border>
</DataTemplate>
Here is an example of a drawing brush that has a dynamicresource for the color:
<DrawingBrush x:Key="BankIcon" Viewbox="0,0,442,442" ViewboxUnits="Absolute">
<DrawingBrush.Drawing>
<DrawingGroup>
<DrawingGroup.Transform>
<MatrixTransform Matrix="9.20833333333333,0,0,9.20833333333333,0,0"/>
</DrawingGroup.Transform>
<DrawingGroup>
<DrawingGroup.Transform>
<MatrixTransform Matrix="1,0,0,1,0,2.04885336170188"/>
</DrawingGroup.Transform>
<GeometryDrawing Brush="{DynamicResource SecondaryText}" Geometry="M32.015748,33.342608 L46.283901,33.342608 C47.231779,33.342608 48,34.111116 48,35.061416 L48,40.968297 29.109026,40.968297 C31.057581,39.645195 32.207827,37.567466 32.207827,35.105579 32.207827,34.463728 32.135616,33.879828 32.015748,33.342608 z M1.7188548,33.342608 L21.193252,33.342608 C21.734045,33.580305 22.220392,33.759667 22.584643,33.892346 24.90359,34.727827 24.90359,35.253493 24.90359,35.449457 24.90359,35.986481 23.92294,36.182345 23.261798,36.182345 21.415607,36.182345 19.949486,35.468384 19.243114,35.041909 L17.321123,33.889921 15.507445,40.263165 16.585441,40.951892 0,40.968297 0,35.061416 C8.7927075E-13,34.111116 0.76985754,33.342608 1.7188548,33.342608 z M22.790523,18.230994 L25.366021,18.230994 25.366021,21.121156 C27.345029,21.183175 28.700861,21.687368 29.703128,22.191564 L28.856339,25.079107 C28.100782,24.702539 26.716707,23.982205 24.582318,23.982205 22.381153,23.982205 21.594926,25.110746 21.594926,26.179891 21.594926,27.467599 22.72608,28.221998 25.431822,29.259503 28.949705,30.578852 30.489161,32.27603 30.489161,35.105438 30.489161,37.771993 28.636319,40.099727 25.209281,40.667104 L25.209281,43.902294 22.602338,43.902294 22.602338,40.855485 C20.623328,40.792207 18.644319,40.22619 17.510837,39.502072 L18.362478,36.519611 C19.618635,37.270223 21.344919,37.898937 23.261813,37.898937 25.271298,37.898937 26.620819,36.927818 26.620819,35.449302 26.620819,34.003588 25.522762,33.125251 23.167186,32.27603 19.901545,31.081883 17.733186,29.541929 17.733186,26.651183 17.733186,23.9494 19.618635,21.844013 22.790523,21.279064 z M40.239403,16.937238 L44.995147,16.937238 44.995147,31.067614 40.239403,31.067614 z M32.794241,16.937238 L37.545128,16.937238 37.545128,31.067614 32.794241,31.067614 z M10.453898,16.937238 L15.205758,16.937238 15.205758,31.067614 10.453898,31.067614 z M3.0077641,16.937238 L7.7625359,16.937238 7.7625359,31.067614 3.0077641,31.067614 z M23.952052,0 L24.047946,0.0024883747 C24.709093,0.017653378 25.175256,0.11243361 26.113014,0.68999864 L48,14.939825 24.047946,14.939825 23.952052,14.939825 0,14.939825 21.885821,0.68999864 C22.824745,0.11243361 23.292458,0.017653378 23.952052,0.0024883747 z"/>
</DrawingGroup>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
Here is a resource dictionary that imports a couple other resource dictionarys. One for styles and one for the vectoricons (they are shared between the skins).
ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SixtenLabs.CashFlow.Client.Skins.Monochrome">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Resources/CommonStyles.xaml"/>
<ResourceDictionary Source="/Resources/VectorIcons.xaml"/>
I have tried moving various parts around to different places (app.xaml, window.resources) to no avail. Any ideas would be appreciated.
Thanks.
Try turning off virtualization in your ListBox as you may be recycling containers and the containers wont allways honour changes in DynamicResource bindings.
<ListBox VirtualizingStackPanel.IsVirtualizing="False"
VirtualizingStackPanel.VirtualizationMode="Standard" />

Resources