我的画布垂直和水平延伸，但里面的图像没有

Question

我正在创建一个弹出菜单，一个ToggleButton和一个Popup控件。所有这些都包含在画布中。以下图片位于我的应用程序的右下角。我将我的Canvas设置为在Index 1列中，拉伸2列，并在第二行到底行。

灰色图像只是一个占位符。从下面的XAML中，您可以看到我已将所有内容设置为拉伸。 Canvas延伸，但没有别的。注释掉StackPanel和/或Label什么都不做。所以我确信这两者都不是原因。 ToggleButton没有拉伸到Canvas的大小。

我做了截图，所以我可以更好地突出显示相关部分。但是，如果我需要粘贴代码，我可以。

修改的

更新了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>

Answer 1

Canvas不会拉伸其子元素。改为使用网格。

来自MSDN中Canvas文档的备注：

  

Canvas是唯一没有固有布局的面板元素   特点。 Canvas具有默认的Height和Width属性   零，除非它是自动调整大小的元素的子元素   它的子元素。 Canvas的子元素永远不会调整大小，它们   只是位于他们指定的坐标。这提供了   灵活的固有尺寸限制或   不需要或想要对齐。对于你想要孩子的情况   要自动调整大小和对齐的内容，通常最好   使用网格元素。

您只需在XAML中将Canvas替换为Grid即可。无需定义行或列。