Creating a complex theme background

Oct 7, 2013 at 4:03 PM
Edited Oct 7, 2013 at 4:23 PM

I'm trying to create a more complex theme background than the one defined in the examples.

It would be similar to the "Hello Kitty" example, except that instead of having just an image on the bottom-right corner, I'd like to also have a gradient on the top with the accent color.

I've tried to modify the example, but just can't get it to work.

Here's what I have so far:
<!-- custom theme resources-->
<Rectangle x:Key="WindowBackgroundContent" x:Shared="false">
                    <Rectangle Height="96">
                            <LinearGradientBrush EndPoint="0,1" Opacity="0.1" StartPoint="0,0">
                                <GradientStop Color="Blue" Offset="0"/>
                                <GradientStop Color="White" Offset="0.3"/>
                                <GradientStop Color="Transparent" Offset="1"/>
                    <Rectangle Width="10" VerticalAlignment="Bottom" HorizontalAlignment="Right" Height="10">
                            <ImageBrush ImageSource="file:///C:/Users/Xavier/Documents/Visual Studio 2012/Projects Test/Test/Resources/background.lsi.png" Opacity="1"/>
So I've tried defining a VisualBrush for the inside of the rectangle and use a Grid to define 2 rectangles, one that will contain the gradient and the other that will contain the HelloKitty image.

If I put the grid inside the VisualBrush.Fill in a UserControl, it works with the placement of objects, but as soon as I have put it inside the VisualBrush.Fill, then everything stretches and the width of the second rectangle (the one with the ImageBrush is not took into account and it always stretches.

Any idea how to make this work?
Oct 14, 2013 at 10:32 PM
You don't need to use a VisualBrush. You can set the Grid (currently inside the VisualBrush) as the WindowBackgroundContent