Preventing deformation in XAML Grid's background when resizing

Question

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>

score 0 · Answer 1 · answered Jun 23 '09 at 02:08

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.

It is important that the shapes are in the background of the Grid. The only change I want to make to the Grid itself is to add the Background attribute. — sourcenouveau, Jun 23 '09 at 02:18

Preventing deformation in XAML Grid's background when resizing

1 Answers1