CODEWITHSUNDEEP
wpfxamlvertical-alignmentstretchalignment
ernest
ernest

Reputation: 1724

My canvas stretches vertically and horizontally, but the image inside does not

I'm creating a popup menu a ToggleButton and a Popup control. All of which are contained within a canvas. The following image is of the bottom right corner of my application. I set my Canvas so that's in the Index 1 column, stretches 2 columns, and is in the second to bottom row.

enter image description here

The gray image is just a place holder. From the XAML below, you can see that I've set everything to stretch. The Canvas stretches, but nothing else does. Commenting out the StackPanel and/or the Label does nothing. So I'm convinced neither are the cause. The ToggleButton isn't stretching to the size of the Canvas.

enter image description here

I did a screenshot so I could highlight those relevant portions, better. But if I need to paste the code, I can.

EDIT

Updated XAML:

<Border BorderBrush="Green" BorderThickness="1" Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <Grid Name="ToggleButtonCanvas" Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
                <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
                    <ToggleButton x:Name="btnPluginMenu" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                        <ToggleButton.Template>
                            <ControlTemplate TargetType="{x:Type ToggleButton}">
                                <Border x:Name="bdr" BorderThickness="0">
                                    <Border.Background>
                                        <ImageBrush ImageSource="< omitted >" Stretch="Fill" TileMode="None" />
                                    </Border.Background>
                                    <ContentPresenter VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="8,6,8,6" ContentSource="Content" />
                                </Border>
                            </ControlTemplate>
                        </ToggleButton.Template>
                    </ToggleButton>
                    <Label Canvas.Left="10" Canvas.Top="10" Content="Menu" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
                </StackPanel>
                <Popup Placement="Relative"  HorizontalOffset="-120" VerticalOffset="-130" PlacementTarget="{Binding ElementName=btnPluginMenu}" IsOpen="{Binding ElementName=btnPluginMenu, Path=IsChecked}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" PopupAnimation="Scroll">
                    <Grid Background="Gray">
                        <Grid.BitmapEffect>
                            <DropShadowBitmapEffect />
                        </Grid.BitmapEffect>
                    </Grid>
                </Popup>
            </Grid>
        </Border>

Upvotes: 1

Views: 3496

Answers (1)

Clemens
Clemens

Reputation: 128061

Canvas does not stretch its child elements. Use a Grid instead.

From the Remarks in the Canvas documentation in MSDN:

Canvas is the only panel element that has no inherent layout characteristics. A Canvas has default Height and Width properties of zero, unless it is the child of an element that automatically sizes its child elements. Child elements of a Canvas are never resized, they are just positioned at their designated coordinates. This provides flexibility for situations in which inherent sizing constraints or alignment are not needed or wanted. For cases in which you want child content to be automatically resized and aligned, it is usually best to use a Grid element.

You can simply replace Canvas by Grid in your XAML. There is no need to define rows or columns.

Upvotes: 8

Related Questions