WPF圓怪異的邊界

Question

嗨

我想超過2天了創建切換按鈕，在像上面的圖片按下狀態，但上邊框讓我頭疼。有沒有人有任何想法如何創建那個倒下的圓角？背景是從上到下的線性漸變：＃b8c7d6 - ＃a8b3c4

任何幫助都將不勝感激！

我有這樣的事情，但它是遠離設計：

<Style x:Key="ToggleButtonStyle" TargetType="{x:Type ToggleButton}"> 
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> 
    <Setter Property="HorizontalContentAlignment" Value="Center"/> 
    <Setter Property="VerticalContentAlignment" Value="Center"/> 
    <Setter Property="Padding" Value="1"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type ToggleButton}"> 
       <Grid> 
        <Border Background="Black" BorderThickness="1" BorderBrush="#FF4E4F50" CornerRadius="3"/> 
        <Border Background="Black" Margin="1" CornerRadius="3"/> 
        <Border Margin="2" CornerRadius="3"> 
         <Border.Background> 
          <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
           <GradientStop Color="#0099B9D1" Offset="0"/> 
           <GradientStop Color="#FF99B9D1" Offset="1"/> 
           <GradientStop Color="#B299B9D1" Offset="0.054"/> 
          </LinearGradientBrush> 
         </Border.Background> 
        </Border> 
        <Border Margin="2" CornerRadius="3" Opacity="0.3"> 
         <Border.Background> 
          <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
           <LinearGradientBrush.RelativeTransform> 
            <TransformGroup> 
             <ScaleTransform CenterY="0.5" CenterX="0.5"/> 
             <SkewTransform CenterY="0.5" CenterX="0.5"/> 
             <RotateTransform Angle="90" CenterY="0.5" CenterX="0.5"/> 
             <TranslateTransform/> 
            </TransformGroup> 
           </LinearGradientBrush.RelativeTransform> 
           <GradientStop Color="Black" Offset="0"/> 
           <GradientStop Color="Black" Offset="1"/> 
           <GradientStop Color="#00090909" Offset="0.022"/> 
           <GradientStop Color="#00000000" Offset="0.99"/> 
           <GradientStop Color="#45060606" Offset="0.001"/> 
          </LinearGradientBrush> 
         </Border.Background></Border> 

        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
        </Grid> 


       <ControlTemplate.Triggers> 
        <Trigger Property="IsKeyboardFocused" Value="true"> 

        </Trigger> 
        <Trigger Property="IsChecked" Value="true"> 

        </Trigger> 
        <Trigger Property="IsEnabled" Value="false"> 
         <Setter Property="Foreground" Value="#ADADAD"/> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Answer 1

我會使用兩個邊界：外看起來像：

<Border CornerRadius="3" BorderBrush="White" BorderThickness="1"> 

內將創建陰影效果如下：

<Border CornerRadius="3" BorderThickness="2,4,2,0"> 
    <Border.BorderBrush> 
     <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 
      <GradientStop Offset="0" Color="Black"/> 
      <GradientStop Offset="0.2" Color="#00000000"/> 
     </LinearGradientBrush> 
    </Border.BorderBrush> 

顯然你需要調整值，但至少應該pr請注意你之後的效果。

Answer 2

以下是對我有用的工具。我發現圓角添加了一些額外的挑戰，正確地創建頂部區域陰影，但我能夠通過結合多種技術來實現這一目標。

第一種技術涉及巧妙使用兩個邊界。外邊框有ClipToBounds設置爲true，內部邊界具有DropShadowEffect，用ShadowDepth設置爲0和5左右。一個BlurRadius這會讓我們的正是我們需要的部分，但不會處理圓角的問題（我們會談到這一點）。該技術可在this article找到。下面是它的要點：

<Border BorderBrush="DarkGray" BorderThickness="1" ClipToBounds="True"> 
    <Border BorderBrush="Black" BorderThickness="1" Margin="-1"> 
    <Border.Effect> 
     <DropShadowEffect ShadowDepth="0" BlurRadius="6"> 
    </Border.Effect> 
    </Border> 
</Border> 

如果我沒有記錯，在這一點上，我們將有東西接近你想要什麼，除了DropShadowEffect「流血」了圓角的（再次，我們將解決不久）。

我們現在要面對的另一個問題是，我們在內部Border內部放置的任何子元素也會應用DropShadowEffect！要糾正這個問題，我們需要第二技術。將兩個Borders以及另一個容器（用於容納您的內容）放入Grid，以便外部Border和新容器是兄弟。這將導致兄弟姐妹相互重疊，而只將DropShadowEffect應用於Border。見this answer。

現在要解決「流血」問題，其中DropShadowEffect不遵循圓角的輪廓，而是像角落是筆直的。這需要第三技術。我們需要使用Michah's ClippingBorder自定義控件。我們需要用他的ClippingBorder替換上述外部控制Border，仍將ClipToBounds設置爲true。這將削減圓角處的流血。

我能夠結合這三種技術創建一個「沉入」（或「插入」）邊框外觀。它看起來是這樣的：

<Grid>  
    <local:ClippingBorder x:Name="TopShadowClippingBorder" 
     BorderThickness="0" 
     CornerRadius="5" 
     ClipToBounds="True"> 

     <Border x:Name="TopShadowBorder" 
       BorderBrush="#D8333333" BorderThickness=".5,1,.5,0" 
       Padding="0" 
       CornerRadius="5" 
       ClipToBounds="True">   
       <Border.Effect> 
         <DropShadowEffect Direction="270" ShadowDepth="0.5"/> 
       </Border.Effect> 
     </Border> 
    </local:ClippingBorder> 

    <Border x:Name="InsetBorder" 
      BorderBrush="#99A1A1A1" BorderThickness="0.5,0,0.5,1" 
      CornerRadius="5" /> 

    <StackPanel x:Name="Contents_StackPanel" Orientation="Horizontal" Margin="5,5,5,5"> 
     (Contents go here...) 
    </StackPanel> 
</Grid> 

注意，上面的 「光暈」（DropShadowEffect）很好地遵循邊框的圓角的輪廓：