HypernovaDesktop Components · docs
Binarymission
WPF › Rounded Corner Container › RoundedCornerContainer

RoundedCornerContainer

class.NET 6 / 8 / 10.NET Framework 4.8Binarymission.WPF.Controls.Containers

A content control that rounds its corners and its content's corners with them, so a picture, a video or a grid placed inside is cut off at the curve instead of showing square corners over it.

public class RoundedCornerContainer : ContentControl

Inherits from / implements: ContentControl

Remarks

A plain Border with a CornerRadius rounds only its own outline: a child that paints into the corner – an image, a map, a chart, a list with a coloured header – is drawn over the curve. Put the child inside a RoundedCornerContainer instead and everything it draws is clipped to the rounded outline.

How to use it

Set CornerRadius and give the container one piece of content, as for any ContentControl. Each corner can have its own radius. The outline is drawn with the control's own Control.Background, Control.BorderBrush, Control.BorderThickness and Control.Padding, and the clip follows the control's actual size, so it stays correct as the container is resized.

Appearance

The default style gives the container a Transparent background and a FrameworkElement.Margin of 8 logical pixels on every side; set Margin="0" to place it flush. A radius larger than half the shorter side is drawn at half the shorter side. A drop shadow (UIElement.Effect) set on the container falls outside the clip and is drawn normally.

Examples

A product photo and its caption in a card with 12-pixel corners and a soft shadow.

<Window x:Class="Catalogue.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:rc="clr-namespace:Binarymission.WPF.Controls.Containers;assembly=Binarymission.WPF.Controls.RoundedCornerContainer"
        Title="Catalogue" Width="420" Height="420">

    <rc:RoundedCornerContainer CornerRadius="12" Width="280" Height="300"
                               Background="White" BorderBrush="#D0D7E2" BorderThickness="1">
        <rc:RoundedCornerContainer.Effect>
            <DropShadowEffect BlurRadius="14" ShadowDepth="3" Opacity="0.25" />
        </rc:RoundedCornerContainer.Effect>

        <DockPanel>
            <TextBlock DockPanel.Dock="Bottom" Margin="12" FontSize="14"
                       Text="Oak desk, 140 x 70 cm - 349.00 GBP" />
            <Image Source="Images/oak-desk.jpg" Stretch="UniformToFill" />
        </DockPanel>
    </rc:RoundedCornerContainer>
</Window>

The same card built in code.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using Binarymission.WPF.Controls.Containers;

RoundedCornerContainer card = new RoundedCornerContainer
{
    CornerRadius = new CornerRadius(12),
    Width = 280,
    Height = 300,
    Background = Brushes.White,
    Content = new Image
    {
        Source = new BitmapImage(new Uri("pack://application:,,,/Images/oak-desk.jpg")),
        Stretch = Stretch.UniformToFill
    }
};

See also

Members at a glance

Properties
CornerRadiusGets or sets how far each corner of the container, and of the content inside it, is rounded.
Fields
CornerRadiusPropertyIdentifies the CornerRadius dependency property.

Properties

CornerRadius

public CornerRadius CornerRadius

Gets or sets how far each corner of the container, and of the content inside it, is rounded.

Value
The radius of each corner in logical pixels (1/96 inch), given top-left, top-right, bottom-right, bottom-left. The default is 0 on every corner: square corners and no rounding of the content.
Remarks

The same radius rounds the outline drawn with Control.BorderBrush and clips whatever the content draws. A radius larger than half the container's shorter side is drawn at half the shorter side, and a negative radius is drawn as a square corner.

In XAML a single number rounds all four corners (CornerRadius="10"); four numbers set them one by one (CornerRadius="10,10,0,0" rounds only the top).

Example
<!-- A header panel rounded only along its top edge. -->
<rc:RoundedCornerContainer CornerRadius="10,10,0,0" Background="#1F4E79">
    <TextBlock Margin="12,8" Foreground="White" Text="Open orders" />
</rc:RoundedCornerContainer>

Fields

CornerRadiusProperty static

public static readonly DependencyProperty CornerRadiusProperty

Identifies the CornerRadius dependency property.