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）很好地遵循边框的圆角的轮廓：