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

这对我来说效果很好。我发现圆角在正确创建顶部区域阴影时增加了一些额外的挑战，但我能够通过组合几种技术来实现这一点。

第一项技术涉及巧妙使用两个边框。外边框的 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自定义控件。我们需要使用Border替换上述外部ClippingBorder控件，仍然将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）很好地遵循边框圆角的轮廓：

Answer 2

我会使用两个边框：外边看起来像：

<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>

显然你需要调整这些值，但这至少会产生你所追求的效果。