tofutim
tofutim

Reputation: 23374

How can I stretch a Grid or Canvas to fill the contents of a Button?

Let's say in an example like this, I would like the Grid to fill the entire Button with Red.

<Button Margin="2">
    <Grid x:Name="adGrid" Background="Red">                             
        <StackPanel>                                    
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding ActualWidth, ElementName=adGrid}"></TextBlock>
                <TextBlock Text="x"></TextBlock>
                <TextBlock Text="{Binding ActualHeight, ElementName=adGrid}"></TextBlock>
            </StackPanel>
        </StackPanel>
    </Grid>
</Button>

I just end up with this:

enter image description here

Upvotes: 0

Views: 123

Answers (1)

Haris Hasan
Haris Hasan

Reputation: 30097

The problem here is that Grid is not covering the entire Button. If you want the entire Button to be red either set the background color of button to red or stretch the grid to cover rest of the button

Either do

<Button Margin="2" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">

or

<Button Margin="2" Background="Red">
        ...
</Button>

Upvotes: 4

Related Questions