Wpf圆角奇怪的边框。

Question

你好

我已经尝试了两天以上来创建一个切换按钮，就像上面的图片一样，在按下状态时，但是上边框让我很头疼。 有人有任何想法如何创建那个向下的圆角？ 背景是从上到下的线性渐变：＃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>

- Narcis

Answer 1

以下是我为您翻译的内容，涉及IT技术：

以下是我的成功经验。我发现圆角会增加创建顶部区域阴影的难度，但是通过结合多种技术，我成功地解决了这个问题。

第一种技术是巧妙地使用两个边框。外部边框的ClipToBounds设置为true，内部边框具有DropShadowEffect，其中ShadowDepth设置为0，BlurRadius约为5。这样我们就得到了部分需求，但它无法处理圆角问题（后面会提到）。此技术可在本文中找到。以下是要点：

<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！为了解决这个问题，我们需要使用第二种技术。将两个 Border 和另一个容器（来容纳您的内容）放置到一个 Grid 中，使得外部的 Border 和新容器成为兄弟元素。这将导致兄弟元素彼此重叠，而只将 DropShadowEffect 应用到 Border 上。详见此回答。

现在解决 “溢出” 问题，即 DropShadowEffect 不遵循圆角轮廓，而是像直角一样工作。这需要使用第三种技术。我们需要使用Michah 的 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）很好地跟随着边框的圆角轮廓：

- Jason Frank

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>

显然，您需要调整这些值，但至少可以产生您想要的效果。

- Kent Boogaart

---

我已经尝试过了，但是最终的圆角看起来不一样...有点直。感谢您的回复。 - Narcis