How do I create a WPF Rounded Corner container

Question

We are creating an XBAP application that we need to have rounded corners in various locations in a single page and we would like to have a WPF Rounded Corner container to place a bunch of other elements within   Does anyone have some suggestions or sample code on how we can best accomplish this    Either with styles on a  or with creating a custom control

User · Answer

I know that this isn t an answer to the initial question     but you often want to clip the inner content of that rounded corner border you just created   Chris Cavanagh has come up with an excellent way to do just this   I have tried a couple different approaches to this     and I think this one rocks   Here is the xaml below    lt Page     xmlns  http   schemas microsoft com winfx 2006 xaml presentation      xmlns x  http   schemas microsoft com winfx 2006 xaml      Background  Black   gt       lt  -- Rounded yellow border -- gt       lt Border         HorizontalAlignment  Center          VerticalAlignment  Center          BorderBrush  Yellow          BorderThickness  3          CornerRadius  10          Padding  2       gt           lt Grid gt               lt  -- Rounded mask  stretches to fill Grid  -- gt               lt Border                 Name  mask                  Background  White                  CornerRadius  7                gt                lt  -- Main content container -- gt               lt StackPanel gt                   lt  -- Use a VisualBrush of  mask  as the opacity mask -- gt                   lt StackPanel OpacityMask gt                       lt VisualBrush Visual   Binding ElementName mask    gt                   lt  StackPanel OpacityMask gt                    lt  -- Any content -- gt                   lt Image Source  http   chriscavanagh files wordpress com 2006 12 chriss-blog-banner jpg   gt                   lt Rectangle                     Height  50                      Fill  Red   gt                   lt Rectangle                     Height  50                      Fill  White   gt                   lt Rectangle                     Height  50                      Fill  Blue   gt               lt  StackPanel gt           lt  Grid gt       lt  Border gt   lt  Page gt

User · Answer

VB Net code based implementation of kobusb s Border control solution  I used it to populate a ListBox of Button controls  The Button controls are created from MEF extensions  Each extension uses MEF s ExportMetaData attribute for a Description of the extension  The extensions are VisiFire charting objects  The user pushes a button  selected from the list of buttons  to execute the desired chart             Create a ListBox of Buttons  one button for each MEF charting component       For Each c As Lazy Of ICharts  IDictionary Of String  Object   In ext ChartDescriptions         Dim brdr As New Border         brdr BorderBrush   Brushes Black         brdr BorderThickness   New Thickness 2  2  2  2          brdr CornerRadius   New CornerRadius 8  8  8  8          Dim btn As New Button         AddHandler btn Click  AddressOf GenericButtonClick         brdr Child   btn         brdr Background   btn Background         btn Margin   brdr BorderThickness         btn Width   ChartsLBx ActualWidth - 22         btn BorderThickness   New Thickness 0  0  0  0          btn Height   22         btn Content   c Metadata  Description           btn Tag   c         btn ToolTip    Push button to see    amp  c Metadata  Description   ToString  amp    chart          Dim lbi As New ListBoxItem         lbi Content   brdr         ChartsLBx Items Add lbi      Next  Public Event Click As RoutedEventHandler  Private Sub GenericButtonClick sender As Object  e As RoutedEventArgs      Dim btn As Button   DirectCast sender  Button      Dim c As Lazy Of ICharts  IDictionary Of String  Object     DirectCast btn Tag  Lazy Of ICharts  IDictionary Of String  Object        Dim w As Window   DirectCast c Value  Window      Dim cc As ICharts   DirectCast c Value  ICharts      c Value CreateChart       w Show   End Sub   lt System ComponentModel Composition Export GetType ICharts   gt     lt System ComponentModel Composition ExportMetadata  Description    Data vs  Time   gt    Public Class DataTimeChart     Implements ICharts      Public Sub CreateChart   Implements ICharts CreateChart     End Sub End Class  Public Interface ICharts     Sub CreateChart   End Interface  Public Class Extensibility     Public Sub New           Dim catalog As New AggregateCatalog            catalog Catalogs Add New AssemblyCatalog GetType Extensibility  Assembly             Create the CompositionContainer with the parts in the catalog         ChartContainer   New CompositionContainer catalog           Try             ChartContainer ComposeParts Me          Catch ex As Exception             Console WriteLine ex ToString          End Try     End Sub        must use Lazy otherwise instantiation of Window will hold open app  Otherwise must specify Shutdown Mode of  Shutdown on Main Window        lt ImportMany   gt        Public Property ChartDescriptions As IEnumerable Of Lazy Of ICharts  IDictionary Of String  Object     End Class

User · Answer

You don t need a custom control  just put your container in a border element    lt Border BorderBrush   FF000000  BorderThickness  1  CornerRadius  8  gt      lt Grid  gt   lt  Border gt    You can replace the  lt Grid  gt  with any of the layout containers

User · Answer

I just had to do this myself  so I thought I would post another answer here   Here is another way to create a rounded corner border and clip its inner content  This is the straightforward way by using the Clip property  It s nice if you want to avoid a VisualBrush   The xaml    lt Border     Width  200      Height  25      CornerRadius  11      Background   FF919194   gt       lt Border Clip gt           lt RectangleGeometry             RadiusX   Binding CornerRadius TopLeft  RelativeSource  RelativeSource AncestorType  x Type Border                 RadiusY   Binding RadiusX  RelativeSource  RelativeSource Self             gt               lt RectangleGeometry Rect gt                   lt MultiBinding                     Converter   StaticResource widthAndHeightToRectConverter                    gt                       lt Binding                         Path  ActualWidth                          RelativeSource   RelativeSource AncestorType  x Type Border                          gt                       lt Binding                         Path  ActualHeight                          RelativeSource   RelativeSource AncestorType  x Type Border                          gt                   lt  MultiBinding gt               lt  RectangleGeometry Rect gt           lt  RectangleGeometry gt       lt  Border Clip gt        lt Rectangle         Width  100          Height  100          Fill  Blue          HorizontalAlignment  Left          VerticalAlignment  Center        gt   lt  Border gt    The code for the converter   public class WidthAndHeightToRectConverter   IMultiValueConverter       public object Convert object   values  Type targetType  object parameter  CultureInfo culture                double width    double values 0           double height    double values 1           return new Rect 0  0  width  height             public object   ConvertBack object value  Type   targetTypes  object parameter  System Globalization CultureInfo culture                throw new NotImplementedException

User · Answer

I know that this isn t an answer to the initial question     but you often want to clip the inner content of that rounded corner border you just created   Chris Cavanagh has come up with an excellent way to do just this   I have tried a couple different approaches to this     and I think this one rocks   Here is the xaml below    lt Page     xmlns  http   schemas microsoft com winfx 2006 xaml presentation      xmlns x  http   schemas microsoft com winfx 2006 xaml      Background  Black   gt       lt  -- Rounded yellow border -- gt       lt Border         HorizontalAlignment  Center          VerticalAlignment  Center          BorderBrush  Yellow          BorderThickness  3          CornerRadius  10          Padding  2       gt           lt Grid gt               lt  -- Rounded mask  stretches to fill Grid  -- gt               lt Border                 Name  mask                  Background  White                  CornerRadius  7                gt                lt  -- Main content container -- gt               lt StackPanel gt                   lt  -- Use a VisualBrush of  mask  as the opacity mask -- gt                   lt StackPanel OpacityMask gt                       lt VisualBrush Visual   Binding ElementName mask    gt                   lt  StackPanel OpacityMask gt                    lt  -- Any content -- gt                   lt Image Source  http   chriscavanagh files wordpress com 2006 12 chriss-blog-banner jpg   gt                   lt Rectangle                     Height  50                      Fill  Red   gt                   lt Rectangle                     Height  50                      Fill  White   gt                   lt Rectangle                     Height  50                      Fill  Blue   gt               lt  StackPanel gt           lt  Grid gt       lt  Border gt   lt  Page gt

User · Answer

If you re trying to put a button in a rounded-rectangle border  you should check out msdn s example  I found this by googling for images of the problem  instead of text   Their bulky outer rectangle is  thankfully  easy to remove    Note that you will have to redefine the button s behavior  since you ve changed the ControlTemplate   That is  you will need to define the button s behavior when clicked using a Trigger tag  Property  IsPressed  Value  true   in the ControlTemplate Triggers tag  Hope this saves someone else the time I lost

[wpf] How do I create a WPF Rounded Corner container?

Examples related to wpf

Examples related to rounded-corners