Rounded Corner Container

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.

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