색이있는 둥근 모서리가있는 투명 사각형

Question

WPF에서 사각형의 둥근 모서리에 색상을 설정하고 싶습니다. 여기

내가 가지고 싶은 무엇의 예 :

<Rectangle x:Name="rect" Fill="Transparent" RadiusY="10" RadiusX="10"/> 

Answer 1

네 개의 별도의 경로 요소로 네 개의 둥근 모서리를 그릴 더 간단 수 있습니다

:

<Grid> 
    <Path HorizontalAlignment="Left" VerticalAlignment="Top" Fill="Red" 
      Data="M0,0 L10,0 A10,10 0 0 0 0,10Z"/> 
    <Path HorizontalAlignment="Right" VerticalAlignment="Top" Fill="Red" 
      Data="M0,0 L0,10 A10,10 0 0 0 -10,0Z"/> 
    <Path HorizontalAlignment="Left" VerticalAlignment="Bottom" Fill="Red" 
      Data="M0,0 L10,0 A10,10 0 0 1 0,-10Z"/> 
    <Path HorizontalAlignment="Right" VerticalAlignment="Bottom" Fill="Red" 
      Data="M0,0 L0,-10 A10,10 0 0 1 -10,0Z"/> 
</Grid> 

Answer 2

더 간단한 방법 :

<Rectangle Fill="Red" Height="200" Width="200" > 
       <Rectangle.Clip > 
        <CombinedGeometry GeometryCombineMode="Exclude"> 
         <CombinedGeometry.Geometry1> 
          <RectangleGeometry Rect="0,0,200,200"/> 
         </CombinedGeometry.Geometry1> 
         <CombinedGeometry.Geometry2> 
          <EllipseGeometry x:Name="transparentRect" Center="100 100" RadiusX="120" RadiusY="120"/> 
         </CombinedGeometry.Geometry2> 
        </CombinedGeometry> 
       </Rectangle.Clip> 
      </Rectangle> 

지금은

을,이 코드를했습니다

참고

직사각형의 크기를 변경하면 도형의 직사각형과 반경 값도 조정해야 적절한 비율이 표시됩니다.

몇 분 후에이 작업을 수행 했으므로 개선 할 여지가 있습니다. 전체 만족스러운 접근 방식에 대한

건배

편집

, 난 당신이 컨버터

코드

public class RectangleConverter : IValueConverter { 
     public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { 
      var recta = value as Rectangle; 
      if (recta == null) return null; 
      return new Rect { X = 0, Y = 0, Height = recta.ActualHeight, Width = recta.ActualWidth }; 
     } 

     public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { 
      throw new NotImplementedException(); 
     } 
    } 

    public class ElipseGeoConverter : IValueConverter { 
     public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { 
      var recta = value as Rectangle; 
      if (recta == null) return null; 
      return new EllipseGeometry(new Point(recta.ActualWidth/2, recta.ActualHeight/2), recta.ActualWidth/3 * 2, 
       recta.ActualHeight/3 * 2); 
     } 

     public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { 
      throw new NotImplementedException(); 
     } 
    } 

사용

를했습니다

<Rectangle Fill="Red" Height="100" Width="100" > 
       <Rectangle.Clip > 
        <CombinedGeometry GeometryCombineMode="Exclude"> 
         <CombinedGeometry.Geometry1> 
          <RectangleGeometry> 
           <RectangleGeometry.Rect> 
            <Binding RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type Rectangle}}" Converter="{StaticResource RectangleConverter}"></Binding> 
           </RectangleGeometry.Rect> 
          </RectangleGeometry> 
         </CombinedGeometry.Geometry1> 
         <CombinedGeometry.Geometry2> 
          <Binding RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type Rectangle}}" Converter="{StaticResource GeoConverter}"/> 
         </CombinedGeometry.Geometry2> 
        </CombinedGeometry> 
       </Rectangle.Clip> 
      </Rectangle>