2013-02-11 86 views
1

我創建了一個彈出菜單ToggleButton和一個Popup控件。所有這些都包含在畫布中。下圖是我的應用程序的右下角。我設置了我的畫布,使其位於索引1列中,延伸2列,並位於第二行。我的畫布垂直和水平延伸,但裏面的圖像不是

enter image description here

灰色圖像僅僅是一個佔位符。從下面的XAML,你可以看到我已經設置了所有的東西。帆布延伸,但沒有別的。註釋掉StackPanel和/或標籤什麼也不做。所以我確信這兩者都不是原因。 ToggleButton沒有伸展到Canvas的大小。

enter image description here

我做了截圖,所以我可以突出那些相關的部分,效果更好。但是如果我需要粘貼代碼,我可以。

任何想法?

編輯

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

回答

8

帆布不會延長其子元素。改爲使用網格。

Canvas文檔中的備註中MSDN:

Canvas是不具有固有的佈局 特性的唯一面板元件。畫布的默認高度和寬度屬性爲 零,除非它是元素的子元素,它自動將其子元素的大小設置爲 。 畫布的子元素永遠不會調整大小,他們 只是定位在他們指定的座標。這提供了 靈活性的情況下固有的大小限制或 對齊不需要或想要的。對於您希望子內容 自動調整大小和對齊的情況,通常最好使用Grid元素 。

您可以簡單地在您的XAML中用Grid代替Canvas。沒有必要定義行或列。

+0

那......工作起來。它現在水平延伸,但不是垂直延伸。我在網格周圍放置了一個綠色邊框,以便您可以更好地瞭解運行時發生了什麼。我要編輯我的原始文章以包含更新的XAML。 http://i2.minus.com/i3N8CGnhcgzy8.png – ernest 2013-02-11 15:22:28

+3

@ernest「StackPanels」僅僅意味着和他們的孩子一樣高,並且不應該長到填滿所有可用的空間。使用'DockPanel'或'Grid'而不是'StackPanel',它應該可以工作。 – Rachel 2013-02-11 15:43:59

+0

@Rachel謝謝,蕾切爾。 DockPanel幾乎修復了一切。我很感謝幫助。 – ernest 2013-02-11 18:30:40