色付きの丸い角を持つ透明な長方形

Question

WPFで四角形の丸い角に色を設定したいと思います。ここで

は私がしたいのですが何の例です：

今の

、私はこのコードをしました：

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

Answer 1

4つの別々のパス要素として4つの丸角の描画にもっと簡単かもしれません：

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

を

注

矩形のサイズを変更する場合は、ジオメトリの矩形と半径値を調整する必要があります。これにより、適切な比率が表示されます。

私はこれを数分でやったので、改善の余地があるかもしれません。完全な満足のいくアプローチの

乾杯

EDIT

、私はあなたに2つのコンバータ

コード

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>