Question

I have a number of buttons within a grid, that all change size based on the application being resized. Some buttons have child elements such as an ellipse or rectangle. I can’t seem to get these to resize as well.

Here is some code:

<Grid DockPanel.Dock="Right" Width="121">
        <Grid.RowDefinitions>
            <RowDefinition Height="121*" />
            <RowDefinition Height="121*" />
            // Snip
        </Grid.RowDefinitions>
        <Button Name="ellipseButton" PreviewMouseDown="EllipseButtonClickedEvent" HorizontalAlignment="Stretch" Grid.Row="0">
            <Ellipse Width="90" Height="90" Stroke="Black"></Ellipse>
        </Button>
       // Snip
    </Grid>

I know that the height and width of the ellipse is explicitly set, but when I remove that, I can’t seem to get the ellipse to show at all.

I would appreciate any advice.

Thanks.

Answer 1

Just set the HorizontalContentAlignment and VerticalContentAlignment properties of the button to Stretch:

<Button Name="ellipseButton" PreviewMouseDown="EllipseButtonClickedEvent" HorizontalAlignment="Stretch" Grid.Row="0"
        HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" >
   <Ellipse Stroke="Black" />
</Button>