Properly sizing a WPF control to always stay the same size as its parent

Question

I am trying to create a grid of buttons for a simple WPF calculator application but I'm having trouble drawing the buttons properly.

I am using a Grid (grdPlusMinus) inside a Button (btnPlusMinus) - within the overall controls grid (grdControls) - so that I can make an elliptical Button with a simple Label over the top of it. The Ellipse should fill the visible portion of the Button.

When using the code below, the bottom and right-hand sides of the ellipse are "cut off" no matter how the window is resized. The ellipse is always in proportion but it is never displayed fully. When I reset the Width and Height of grdPlusMinus to Auto (via the VS UI, not in code) they are both set to 1 with the result that grdPlusMinus - and therefore everything in it - shrinks to a single pixel.

I'm probably doing something very stupid at a basic level but I just can't think what it is. I've tried all different kinds of bindings and settings - e.g. binding to Width instead of ActualWidth, etc. - but I cannot figure out what I'm doing wrong. I thought it might be because of the margins but removing the margin altogether doesn't change the problem much.

Can anyone point out what I must be doing wrong please? (I tried a variation of the XAML in Kaxaml and got the same problem.)

If there is a better way of doing - overall - what I'm trying to do then I'd like to hear about but I'd like to know what's wrong with this before I try anything else. (My eventual intention is to have the height and width of each button set to the smallest dimension of the button so that it is always displayed as a circle in the centre of the button but that's something for later, unless this extra information allows for a better solution.)

<Window x:Class="Calc.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Calc"
        mc:Ignorable="d"
        Title="MainWindow" Height="651.5" Width="525" WindowStartupLocation="CenterScreen">
    <Grid x:Name="grdControls">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Button x:Name="btnPlusMinus" Grid.Row="5" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" Margin="4">
            <Grid x:Name="grdPlusMinus" Width="{Binding ActualWidth, ElementName=btnPlusMinus, Mode=OneWay}" Height="{Binding ActualHeight, ElementName=btnPlusMinus, Mode=OneWay}">
                <Ellipse x:Name="ellipse" Stroke="#FF39A8DC" Fill="#FFA0D2E2"/>
                <Label x:Name="label" Content="XXX" HorizontalAlignment="Center" VerticalAlignment="Center" VerticalContentAlignment="Center" Foreground="#FF0A263A" HorizontalContentAlignment="Center"/>
            </Grid>
        </Button>

    </Grid>
</Window>

Answer 1

Well this is like asking why my umbrella doesn't work when I jump off an airplane. Simple answer for your problem not intended to be used that way. XAML has one of the best positioning systems ever so using it is easy(performance might not be so good but you should not worry about it).

 <Grid>
        <Grid.RowDefinitions>
            <!-- For what you are doing the multiple rows are not needed you can use relative size they work by adding all the values in rows (1+5) and deviding them by it
            so 5* is 5/6 of parant 
            and 1* is 1/6 of parent height
            -->
            <RowDefinition Height="5*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <!-- works the same for columns -->
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="4*"/>
        </Grid.ColumnDefinitions>
        <Button Grid.Row="1">
            <Button.Style>
                <!-- this is the template you button will use it's best to use global styles but you can inline it as well-->
                <Style TargetType="Button">
                    <Setter Property="Template" >
                        <Setter.Value>
                            <ControlTemplate TargetType="Button">
                                <Grid>
                                    <Ellipse Stroke="#FF39A8DC" Fill="#FFA0D2E2"/>
                                    <!-- used to show what ever is in you inner button content it can be an image or textblock or anything -->
                                    <ContentPresenter 
                                        Content="{TemplateBinding Content}" 
                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Button.Style>
            <Label Content="XXX"></Label>
        </Button>
    </Grid>

Here is more on how grid works.

Answer 2

I'm sorry i can't explain why it is happening, but i found that your desired results can be achieved by replacing the button line with this:

    <Button x:Name="btnPlusMinus" Grid.Row="5" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" Padding="-5">

notice the margin is replaced by padding="-5"