2013-02-12 102 views
2

下面這段代碼應該在圓形容器內繪製一個菜單欄。你會注意到底部是圓形的,但是菜單的邊角不是。我跟着選擇答案的方向,因爲它似乎是最有效的:如何創建一個剪輯兒童的WPF舍入容器?

How do I create a WPF Rounded Corner container?

爲了記錄在案,我運行.NET 4.5與WPF的最新版本。這裏是我的代碼:

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="240" Height="320" Background="Black" > 
     <Border BorderBrush="Red" CornerRadius="10" BorderThickness="1" Background="Gray" > 
     <StackPanel> 
      <Menu IsMainMenu="True" HorizontalAlignment="Stretch" > 
         <MenuItem Header="_File" /> 
         <MenuItem Header="_Edit" /> 
         <MenuItem Header="_View" /> 
         <MenuItem Header="_Window" /> 
         <MenuItem Header="_Help" /> 
        </Menu> 

     </StackPanel> 
     </Border> 
</Window> 

編輯: 有一個在同一職位建議由克里斯·卡瓦納提出了一個更復雜的解決方案的另一個答案。他的解決方案不是那麼簡單或者很快,但是它確實夾住了我想要的角落。這個問題沒有說明剪裁,並且建議的答案也沒有。希望問題和/或答案將被更新以反映這一點。

回答

2

Chris Cavanagh有一個關於舍入控制的blog post。它應該可以幫助你實現你想要的。

編輯: 下面是該博客的代碼。

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="Black"> 
    <!-- Rounded yellow border --> 
    <Border BorderThickness="3" BorderBrush="Yellow" CornerRadius="10" Padding="2" HorizontalAlignment="Center" VerticalAlignment="Center"> 
     <Grid> 
      <!-- Rounded mask (stretches to fill Grid) --> 
      <Border Name="mask" Background="White" CornerRadius="7"/> 
      <!-- Main content container --> 
      <StackPanel> 
       <!-- Use a VisualBrush of 'mask' as the opacity mask --> 
       <StackPanel.OpacityMask> 
        <VisualBrush Visual="{Binding ElementName=mask}"/> 
       </StackPanel.OpacityMask> 
       <!-- Any content --> 
       <Image Source="https://chriscavanagh.files.wordpress.com/2006/12/chriss-blog-banner.jpg"/> 
       <Rectangle Height="50" Fill="Red"/> 
       <Rectangle Height="50" Fill="White"/> 
       <Rectangle Height="50" Fill="Blue"/> 
      </StackPanel> 
     </Grid> 
    </Border> 
</Page> 

它所做的是包括「面具」 Border元素,你要裁剪的內容的兄弟姐妹。在內容中,它使用綁定到該掩碼的VisualBrush。面具會根據您的內容自動調整大小,所以這是一個不錯的「一勞永逸」解決方案