WPF圆形怪异边框 [英] Wpf round weird border

问题描述

嗨

我现在尝试了超过2天的时间来创建切换按钮，该按钮处于按下状态(如上图所示)，但是上边框让我头疼.有谁知道如何创建下降的圆角?背景是从上到下的线性渐变:#b8c7d6-#a8b3c4

I'm trying for over 2 days now to create toggle button that in pressed state like the above image, but that upper border is giving me a headache. Does anyone have any idea how to create that round corner that goes down? The background is a linear gradient top to bottom: #b8c7d6 - #a8b3c4

任何帮助都将不胜感激！

Any help at all would be greatly appreciated!!

我有类似的东西，但它与设计相去甚远:

I have something like this but it is far from the design:

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

推荐答案

这对我来说很有效.我发现圆角在正确创建顶部阴影方面增加了一些其他挑战，但是我可以通过结合多种技术来使阴影工作.

Here's what worked well for me. I found that the rounded corners added some additional challenges with creating the top area shadow correctly, but I was able to get that working by combining several techniques.

第一种技术涉及巧妙地使用两个边框.外部边框的 ClipToBounds 设置为true，内部边框的 DropShadowEffect ，ShadowDepth设置为0，BlurRadius大约为5.这使我们满足了我们的需求，但无法解决圆角问题(我们会解决).可以在这篇文章中找到此技术.这是要点:

The first technique involves the clever use of two Borders. The outer border has its ClipToBounds set to true, and the inner Border has a DropShadowEffect, with ShadowDepth set to 0 and a BlurRadius of around 5. This gets us part of what we need, but it won't handle the rounded corner issue (we'll get to that). This technique can be found at this article. Here's the gist of it:

<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在圆角处出血"(同样，我们会尽快解决).

If I recall correctly, at this point we would have something close to what you want, except that the DropShadowEffect "bleeds" out of the rounded corners (again we'll address that soon).

我们现在遇到的另一个问题是，放置在内部Border内部的任何子元素也将被应用DropShadowEffect！要解决该问题，我们需要第二种技术.将两个Borders以及另一个容器(用于保存您的内容)放入Grid中，以使外部的Border和新的容器成为同级.这将导致兄弟姐妹彼此重叠，而仅将DropShadowEffect应用于Border.参见此答案.

Another problem we would now have is that any child elements that we place inside the inner Border would also have the DropShadowEffect applied to them! To correct that problem, we need the second technique. Place the two Borders, along with another container (to hold your content) into a Grid, so that the outer Border and the new container are siblings. This will cause the siblings to overlap each other, while only applying the DropShadowEffect to the Border. See this answer.

现在要解决出血"问题，其中DropShadowEffect不遵循圆角的轮廓，而是像圆角是笔直的那样起作用.这需要第三种技术.我们需要使用 Michah的ClippingBorder 自定义控件.我们需要用他的ClippingBorder替换上面提到的外部Border控件，同时仍将ClipToBounds设置为true.这将消除圆角处的出血.

Now to address the "bleed" issue, where the DropShadowEffect does not follow the contour of the rounded corners, but rather acts as if the corners were straight. This requires the third technique. We need to use Michah's ClippingBorder custom control. We need to replace the above-mentioned outer Border control with his ClippingBorder, still keeping ClipToBounds set to true. This will trim off the bleed at the rounded corners.

我能够结合这三种技术来创建凹陷"(或插入")边框外观.看起来像这样:

I was able to combine these three techniques to create a "sunk in" (or "inset") border look. It looked something like:

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

Notice that the upper "glow" (DropShadowEffect) nicely follows the contour of the rounded corner of the Border:

这篇关于WPF圆形怪异边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！