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> 

분명히 값을 조정해야하지만 분명히 적어도 당신이 겪고있는 효과를 줄이십시오.

Answer 2

다음은 저에게 잘 돌아갔습니다. 둥근 모서리가 위쪽 영역 그림자를 올바르게 만드는 데 몇 가지 추가 과제를 추가했지만 몇 가지 기술을 조합하여 작동시킬 수있었습니다.

첫 번째 기술에는 두 개의 테두리를 영리하게 사용합니다. 외부 테두리가 true로 ClipToBounds 세트를 가지고 있으며, 내부 테두리 ShadowDepth 0으로 설정하고이 우리에게 우리가 무엇을 필요 부분을 가져옵니다 주변 5의 BlurRadius과 더불어, DropShadowEffect을 가지고 있지만, 그것은을 처리하지 않습니다 둥근 모서리 쟁점 (우리는 그것에 관해 알 것이다). 이 기술은 this article에서 찾을 수 있습니다. 나는 둥근 모서리에서 (다시 우리가 그 주소거야 DropShadowEffect 것을 "출혈"를 제외하고 우리는 당신이 원하는에 가까운 무언가를 할 것이다이 시점에서 올바르게 기억

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

: 여기의 요점이다 곧).

우리가 지금 가지고있는 또 다른 문제는 우리가 내면 Border 내부에 배치하는 모든 자식 요소에도 DropShadowEffect이 적용된다는 것입니다. 이 문제를 해결하려면 두 번째 기술이 필요합니다. 두 Borders을 Grid에 다른 컨테이너 (내용을 담을 수 있음)와 함께 배치하여 Border 바깥 쪽과 새 컨테이너가 형제가되도록합니다. 이렇게하면 형제가 서로 겹치게되고 에만 DropShadowEffect을 적용합니다. 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)이 잘 테두리의 둥근 모서리의 윤곽을 다음 공지 사항 것을

: