uwpc++-cx

Rounded Corners only on one side of a Visual

I'm trying to have a Visual with rounded corners. Here's the code I have:

auto clip = compositor->CreateGeometricClip();
auto roundedRectangle = compositor->CreateRoundedRectangleGeometry();
roundedRectangle->Size = Windows::Foundation::Numerics::float2(width, height);
roundedRectangle->CornerRadius = Windows::Foundation::Numerics::float2(10, 10);
clip->Geometry = roundedRectangle;
visual->Clip = clip;

This works but this creates rounded corners on all 4 corners of the visual. Is it possible to use the Composition APIs to achieve what I'm targetting? For reference, here's what I want the end result to look like.

enter image description here

and not what I have now

enter image description here

Solution

  • You could try to use the Offset property and the CornerRadius property of a CompositionRoundedRectangleGeometry instance to gain the effect you target. The Visual.Clip property specifies the clipping region for the visual. When a visual is rendered, only the protion of the visual that falls inside the clipping region is displayed, while any content that extends outside the clipping region is clipped. Therefore, we could cut off a small part of the right side of the rounded rectangle by adjusting the size of visual and the size and offset of the clip.

    Please check the following code as a sample:

    auto clip = _compositor->CreateGeometricClip();
auto roundedRectangle = _compositor->CreateRoundedRectangleGeometry();
roundedRectangle->Size = float2(100, 100);
//roundedRectangle->CornerRadius = float2(20, 20);
roundedRectangle->Offset = float2(20, 0);
clip->Geometry = roundedRectangle;

//auto visual = _compositor->CreateSpriteVisual();
//visual->Brush = _compositor->CreateColorBrush(ColorHelper::FromArgb(0xFF, 0xFF, 0x11, 0xFF));
visual->Size = float2(100+20, 100);
roundedRectangle->Size = visual->Size;
visual->Clip = clip;

    The key is let the size of visual the same as the size of clip, and set a value of Offset property of the clip to make the right part of the rounded rectangle exceed the size of the visual. The first parameter of Offset property represents the left and right space between clip and visual. I set the value of Offset as float2(20, 0) to let the right part of the rounded rectangle exceed the size of the visual. You could adjust the value of Offset property based on your needs.