How to stretch a Rectangle inside a Button? - wpf

Question

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.

Answer 1

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'.