WPF control-template: why specify a Grid with no ColumnDefinations/RowDefinations as the outter element?

Question

Hi, I've been reading Programming WPF, here is one of the examples about Control Template:

<Button DockPanel.Dock="Bottom" x:Name="addButton" Content="Add">
    <Button.Template>
        <ControlTemplate TargetType="{x:Type Button}">
            <Grid>
                <Ellipse Width="128" Height="32" Fill="Yellow" Stroke="Black" />
                <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" />
            </Grid>
        </ControlTemplate>
    </Button.Template>
</Button>

I'm wondering why use a grid but not a simpler panel such as canvas? Since we didn't decalre any row/columns?

Thanks!

Answer 1

If you don't specify any rows or columns, one of each is implicit, therefore giving you a single grid cell. Thus, both the Ellipse and ContentPresenter occupy the same grid cell. The z-order of items added to the same cell is determined by the order in which they are added. In this case, the ContentPresenter will appear "on top of" the Ellipse.

Were you to to use a Canvas instead of a Grid, the size of the children would not be restricted by the size of the container. That's because a Canvas does not impose any size restraints on its children like the Grid does. Therefore, you'd have to specify a size for both the Ellipse and ContentPresenter, and you'd need to know the size of the Canvas to set that size. Ergo, it's just a whole lot easier and more intuitive using a Grid.

HTH,
Kent