Question

i’m new to wpf .
i got a wpf button ,
in it i need to place 2 elements a textblock and a viewbox encapsulating a canvas

the problem is i can’t seem to see the canvas at all , unless i give it static values for its size

 <Button Margin="10,30,10,10" Padding="0">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition  Width="1*"/>
            <ColumnDefinition  Width="2*"/>                        
        </Grid.ColumnDefinitions>

        <TextBlock Text="Me" Grid.Row="0" Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"></TextBlock>
        <Viewbox Margin="0,0,0,5">
            <Canvas Background="red" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0" Grid.Column="1" >
                  <Ellipse  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="Black"  StrokeThickness="4"   ></Ellipse>                          
            </Canvas>
        </Viewbox>
    </Grid>
</Button>

iv’e also attempted this using a stack panel with an horizontal orintation
in any case the canvas does not show

any thoughts of what i’m doing wrong ?
thanks.

Answer 1

1. Attached Grid properties only work when at the Grid-child-level, i.e. the properties set on the canvas do not take effect they should be set on the container, the ViewBox which is a direct child of the Grid.

2. Viewboxes only work if the content has a concrete size, you probably need neither the ViewBox nor the Canvas. If you want the Ellipse to be a circle set Stretch="Uniform"

3. The contents of Buttons do not stretch by default you should set HorizontalContentAligment and its vertical counterpart to Stretch.

e.g.

<Button Margin="10,30,10,10" Padding="0" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="2*" />
        </Grid.ColumnDefinitions>

        <TextBlock Text="Me" Grid.Row="0" Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"></TextBlock>
        <Ellipse Stretch="Uniform" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                Stroke="Black" StrokeThickness="4"></Ellipse>
    </Grid>
</Button>