Grid leaving extra space between column definitions

Question

I have a custom button with a custom defined template. In the template i'm using grid definitions to sort the content of a Rectangle, Canvas and Label.

Here's the template:

<ControlTemplate
    TargetType="{x:Type l:UXButton}">
    <Border
        Name="TEMP_Container"
        Padding="{TemplateBinding Padding}"
        Background="{TemplateBinding Background}"
        BorderBrush="{TemplateBinding BorderBrush}"
        BorderThickness="{TemplateBinding BorderThickness}"
        CornerRadius="{TemplateBinding CornerRadius}"
        FlowDirection="{Binding Converter={StaticResource LocalizedFlowConverter}}">
        <Grid
            Name="TEMP_ContentContainer"
            Background="Blue">
            <Grid.ColumnDefinitions>
                <ColumnDefinition
                    Name="ColumnIcon"
                    Width="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType={x:Type Border}}}" />
                <ColumnDefinition
                    Name="ColumnSpace"
                    Width="auto" />
                <ColumnDefinition
                    Name="ColumnContent"
                    Width="auto" />
            </Grid.ColumnDefinitions>
            <Rectangle
                Name="TEMP_Icon"
                Grid.Column="0"
                Margin="0"
                Fill="{TemplateBinding Foreground}">
                <Rectangle.OpacityMask>
                    <VisualBrush
                        Stretch="{Binding RelativeSource={RelativeSource AncestorType=l:UXButton}, Path=Stretch}"
                        Visual="{Binding RelativeSource={RelativeSource AncestorType=l:UXButton}, Path=IconSource}" />
                </Rectangle.OpacityMask>
            </Rectangle>
            <Canvas
                Name="TEMP_Space"
                Grid.Column="1"
                Margin="0"
                Width="{TemplateBinding Spacing}" />
            <Label
                Name="TEMP_Content"
                Grid.Column="2"
                Margin="0"
                Padding="0"
                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                Foreground="{TemplateBinding Foreground}">
                <TextBlock
                    Margin="0"
                    Padding="0"
                    Text="{TemplateBinding Content}"
                    TextDecorations="{TemplateBinding TextDecorations}" />
            </Label>
        </Grid>
    </Border>
</ControlTemplate>

And here's the result:

As you can see the grid is leaving an extra space (blue) between the Canvas (red) and Rectangle (green) which i can't seem to figure why! I even tried using static values for the column width but it didn't help. I also used the XAML debugging tools and it seems to be part of the Grid.

Where is this space coming from?

Answer 1

It turned out to be a bug. Cleaning up bin and obj folders and simply doing a Rebuild fixed it. It must have been a Resource that got stuck somewhere in the middle.

Answer 2

I think the simple way to "fix" what you have but retain that grid as you have it is wrap it in another.

That way it should centralise and shrink. Unless you have something sets the grid's width.