居中網格，其尺寸更小內大矩形（和ClipToBounds不工作）

我試圖定位在網格的中心矩形具有高度受到限制，就像這樣：居中網格，其尺寸更小內大矩形（和ClipToBounds不工作）

<Grid ClipToBounds="False"> 
    <Grid Background="LightBlue" Height="10" ClipToBounds="False" Margin="0,27,0,79"> 
     <Rectangle Height="40" Width="20" Fill="Black" VerticalAlignment="Center" HorizontalAlignment="Center" ClipToBounds="False"/> 
    </Grid> 
</Grid>

我希望它看起來像：

enter image description here

但相反，它看起來像這樣：

enter image description here

我知道我的孩子的矩形是更大的，它剪輯是可以理解的，但是，我的ClipToBounds沒有任何效果。閱讀後，我發現的確是Grid does not respect "ClipToBounds"。

我試圖使用Canvas，如Dr.Wpf的aforementioned article中所建議的，但我似乎無法正確使用Canvas。

有什麼我可以做，使它看起來像第一張圖片，而不訴諸於C＃代碼？

謝謝！

來源

2011-05-22 VitalyB

這裏有點難以確切地說出你的要求在這裏。你說你用帆布試過了，但你似乎無法做到。什麼沒有用？

我用這個代碼：

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    x:Class="TestApp.MainWindow" 
    x:Name="Window" 
    Title="MainWindow" 
    Width="175" Height="170" Background="LightGray"> 

    <Grid> 
     <Canvas Background="LightBlue" Height="10" 
       Margin="0,27,0,79" VerticalAlignment="Top"> 
      <Rectangle Height="40" Width="20" Fill="Black" 
         Canvas.Left="66" Canvas.Top="-15" /> 
     </Canvas> 
    </Grid> 

</Window>

，並能夠基本上是假的截圖是什麼樣子。但是（正如你可以通過我的代碼中的Canvas.Left和Canvas.Top部分所分辨的那樣），這有點駭人聽聞。您可以通過綁定的ActualWidth並使用將其轉換爲正確值的IValueConverter來擺脫Canvas.Left。

編輯：

遠一點的探索後，我想出了這樣做的稍微少hackish的方式。儘管嵌套類型讓我感到畏縮，但硬編碼唯一的東西是讓頁面垂直居中的頂部邊距。再次，這可以通過IValueConverter來完成，但你不需要。不幸的是，我不知道我能比這更好。

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    x:Class="WpfApplication10.MainWindow" 
    x:Name="Window" 
    Title="MainWindow" 
    Width="640" Height="480"> 

    <Grid x:Name="LayoutRoot"> 
     <Grid Background="LightBlue" Height="10" ClipToBounds="False" Margin="0,27,0,79">   
      <Canvas> 
       <Grid Width="{Binding ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType=Canvas}}" 
         Height="{Binding ActualHeight, RelativeSource={RelativeSource FindAncestor, AncestorType=Canvas}}"> 
        <Canvas HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0 -40 0 0"> 
         <Rectangle Height="40" Width="20" Fill="Black" ClipToBounds="False"/>   
        </Canvas> 
       </Grid> 
      </Canvas> 
     </Grid> 
    </Grid> 
</Window>

來源

2011-05-22 23:10:37 Tim

我想要做的是使矩形的中心出現在父網格的中心，並忽略網格的邊界溢出邊界以上。您的解決方案太硬編碼以滿足我的需求。然而，我可能會使用像你說的轉換器，但是如果可能的話，我寧願只使用XAML解決方案（但不對這些值進行硬編碼）。 – VitalyB 2011-05-23 06:44:12

@VitalyB - 理解。我再試一次。仍然有一個硬編碼值，但我擺脫了另一個值。看我的編輯。仍然可能不適合你，但只是想看看我能想出什麼。 – Tim 2011-05-23 13:09:20

不錯的解決方案！ :)。標記爲答案。你是對的，它不是非常漂亮，而且相當危險，我猜在這種情況下最好使用轉換器，但問題是，這是一個合法的答案，硬編碼的部分是非常小的。謝謝！ – VitalyB 2011-05-23 14:31:34

居中網格，其尺寸更小內大矩形（和ClipToBounds不工作）

回答

相關問題