CODEWITHSUNDEEP
wpfxamlshapes
Drarig29
Drarig29

Reputation: 2245

Transparent rectangle with colored rounded corners

I'd like to set a color to the rounded corners of a rectangle in WPF.

Here's an example of what I'd like to have :

enter image description here

For now, I've this code :

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

Upvotes: 2

Views: 289

Answers (2)

Clemens
Clemens

Reputation: 128097

It might be even simpler to draw the four rounded corners as four separate Path elements:

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

Upvotes: 2

lokusking
lokusking

Reputation: 7456

A simpler approach:

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

Note

If you change the Rectangle's Size, you have to adjust the Rect and Radius-Values of the Geometries too, so it will display the proper ratio.

I did this in a few minutes, so there might be room for improvements.

Cheers

EDIT

For a full satisfying approach, i've made you 2 converters

Code

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();
        }
    }

Usage

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

Upvotes: 3

Related Questions