如何將渲染限制在圓形邊框內？

我正在嘗試創建一個帶圓角的邊框，並在其上半部分突出顯示。我正在使用帶有徑向漸變的橢圓，它與邊框的上半部分重疊，以便突出顯示，但我無法弄清楚如何防止橢圓着色邊框的邊角。下面是從Kaxaml截圖：如何將渲染限制在圓形邊框內？

ClipToBounds not working

而這裏的XAML代碼：

<Page 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="DarkGray"> 

    <Grid Width="256" Height="256"> 
    <Border CornerRadius="16" Background="Black" Margin="4"> 
     <Border Background="Gray" Margin="32"> 
     <TextBlock Foreground="Black" Text="1" FontFamily="Trebuchet MS" FontSize="96pt" 
        HorizontalAlignment="Center" VerticalAlignment="Center"/> 
     </Border> 
    </Border> 
    <Border CornerRadius="16" ClipToBounds="True"> 
     <Ellipse> 
     <Ellipse.Fill> 
      <RadialGradientBrush> 
      <GradientStop Color="White" Offset="0"/> 
      <GradientStop Color="Transparent" Offset="1"/> 
      </RadialGradientBrush> 
     </Ellipse.Fill> 
     <Ellipse.RenderTransform> 
      <TransformGroup> 
      <ScaleTransform ScaleX="3" ScaleY="2" CenterX="128" CenterY="128"/> 
      <TranslateTransform Y="-235"/> 
      </TransformGroup> 
     </Ellipse.RenderTransform> 
     </Ellipse> 
    </Border> 
    <Border CornerRadius="16" BorderThickness="8" BorderBrush="Black"/> 
    </Grid> 
</Page>

如何停止右上角區域的影響而橢圓形的陰影？

我試過玩弄OpacityMask，但我不得不承認我真的不明白如何使用它，特別是橢圓被轉換爲渲染。無論我嘗試什麼，橢圓要麼完全消失，要麼完全不受影響。

任何幫助將不勝感激。

在此先感謝。

來源

2010-11-24 Mal Ross

首先，我在Visual Studio中編譯並運行代碼時看起來很好。二，你爲什麼不用這個RadialGradientBrush作爲Background的第一個Border？是這樣的：

<Border CornerRadius="16" > 
    <Border.Background> 
     <RadialGradientBrush Center=".5 0" GradientOrigin=".5 0" RadiusX="1" > 
      <GradientStop Color="White" Offset="0"/> 
      <GradientStop Color="Black" Offset="1"/> 
     </RadialGradientBrush> 
    </Border.Background> 
</Border>

來源

2010-11-24 12:26:01

這會教我不要過分簡化我的示例代碼。 :(原因是我沒有把徑向漸變放在邊框本身上，在我的實際應用中，邊框包含了其他元素，然後橢圓位於邊框及其內容的頂部。邊框背景將意味着它是*邊框的內容下面對不起，我對此並不清楚 – 2010-11-24 13:50:02

代替使用ClipToBounds或OpacityMask的，我結束了使用徑向漸變爲背景，以額外Border元件。感謝alpha-mouse的提示。

<Page 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="DarkGray"> 

    <Grid Width="256" Height="256"> 
    <Border CornerRadius="16" Background="Black" Margin="4"> 
     <Border Background="Gray" Margin="32"> 
     <TextBlock Foreground="Black" Text="1" FontFamily="Trebuchet MS" FontSize="96pt" 
        HorizontalAlignment="Center" VerticalAlignment="Center"/> 
     </Border> 
    </Border> 
    <Border CornerRadius="16" Margin="4"> 
     <Border.Background> 
     <RadialGradientBrush> 
      <RadialGradientBrush.Transform> 
      <TransformGroup> 
       <ScaleTransform ScaleX="3" ScaleY="2" CenterX="128" CenterY="128"/> 
       <TranslateTransform Y="-235"/> 
      </TransformGroup> 
      </RadialGradientBrush.Transform> 
      <GradientStop Color="White" Offset="0"/> 
      <GradientStop Color="Transparent" Offset="1"/> 
     </RadialGradientBrush> 
     </Border.Background> 
    </Border> 
    <Border CornerRadius="16" BorderThickness="8" BorderBrush="Black"/> 
    </Grid> 
</Page>

而這裏的最終外觀：

No more little grey ears on the border

感謝。

來源

2010-11-24 14:14:21

如何將渲染限制在圓形邊框內？

回答

相關問題