title: Draw a line/border on a custom panel
body: <p>I have made a custom panel, something similar to a WrapPanel but with columns (or like a Grid but the items are automatically positioned in the grid).</p>
  
  <p>This is what it looks like:<br>
  <img src="https://i.stack.imgur.com/WGL29.png" alt="My custom panel"></p>
  
  <p>I would like to have a property on my panel which makes a line between each column. Is it possible to draw on a custom panel?<br>
  The result I'm looking for is something like this (note the black line):
  <img src="https://i.stack.imgur.com/Nq3OJ.png" alt="Result wanted"><br>
  Edit: If I make the window wider the panel will automatically create more columns, so the separator lines have to be dynamic - that is, it may be zero, one, two, three or more separator lines.</p>
  
  <p>This is the code for my panel:</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Text;
  using System.Windows;
  using System.Windows.Controls;
  
  namespace WpfApplication26
  {
      public class AutoSizingColumnsWrapPanel : Panel
      {
          public double MinColumnWidth { get; set; }
          //public bool ShowColumnSeparator { get; set; }
  
          public AutoSizingColumnsWrapPanel()
          {
              MinColumnWidth = 100;
          }
  
          protected override System.Windows.Size MeasureOverride(System.Windows.Size availableSize)
          {
              return DoLayout(availableSize, (uiElement, size, pos) =&gt; uiElement.Measure(size));
          }
  
          protected override System.Windows.Size ArrangeOverride(System.Windows.Size finalSize)
          {
              return DoLayout(finalSize, (uiElement, size, pos) =&gt; uiElement.Arrange(pos));
          }
  
          private Size DoLayout(Size availableSize, Action&lt;UIElement, Size, Rect&gt; layoutAction)
          {
              // Calculate number of columns and column width
              int numberOfColumns = 0;
              double columnWidth = MinColumnWidth;
              if (double.IsInfinity(availableSize.Width))
              {
                  numberOfColumns = InternalChildren.Count;
              }
              else
              {
                  numberOfColumns = (int)Math.Max(Math.Floor(availableSize.Width / MinColumnWidth), 1);
                  columnWidth = availableSize.Width / numberOfColumns;
              }
  
              // Init layout parameters
              Size measureSize = new Size(columnWidth, availableSize.Height);
              int currentColumn = 0;
              int currentRow = 0;
              double currentY = 0;
              double currentRowHeight = 0;
              // Place all items.
              foreach (UIElement item in InternalChildren)
              {
                  var position = new Rect(currentColumn++ * columnWidth, currentY, columnWidth, item.DesiredSize.Height);
                  // Execute action passing: item = The child item to layout | measureSize = The size allocated for the child item | position = The final position and height of the child item.
                  layoutAction(item, measureSize, position);
                  // Keep the highest item on the row (so that we know where to start the next row).
                  currentRowHeight = Math.Max(currentRowHeight, item.DesiredSize.Height);
                  if (currentColumn == numberOfColumns)
                  {
                      // The item placed was in the last column. Increment/reset layout counters.
                      currentRow++;
                      currentColumn = 0;
                      currentY += currentRowHeight;
                      currentRowHeight = 0;
                  }
              }
              // Return total size of the items/panel.
              return new Size(numberOfColumns * columnWidth, currentY + currentRowHeight);
          }
      }
  }
  </code></pre>
  
  <p>And this is my WPF window hosting the panel:</p>
  
  <pre><code>&lt;Window x:Class="WpfApplication26.MainWindow"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:local="clr-namespace:WpfApplication26"
          Title="MainWindow" Height="350" Width="525"&gt;
  
      &lt;local:AutoSizingColumnsWrapPanel MinColumnWidth="200" VerticalAlignment="Top"&gt;
          &lt;TextBlock Text="One" Background="AliceBlue"/&gt;
          &lt;DockPanel &gt;
              &lt;TextBlock Text="Two: " Background="Beige"/&gt;
              &lt;TextBox HorizontalAlignment="Stretch" /&gt;
          &lt;/DockPanel&gt;
          &lt;TextBlock Text="Three" Background="DarkKhaki"/&gt;
          &lt;TextBlock Text="Four" Background="AliceBlue"/&gt;
          &lt;TextBlock Text="Five" Background="Beige" Height="50"/&gt;
          &lt;TextBlock Text="Six" Background="DarkKhaki"/&gt;
          &lt;TextBlock Text="Seven" Background="AliceBlue"/&gt;
          &lt;TextBlock Text="Eight" Background="Beige"/&gt;
          &lt;TextBlock Text="Nine" Background="DarkKhaki"/&gt;
          &lt;TextBlock Text="Ten" Background="AliceBlue"/&gt;
          &lt;TextBlock Text="Eleven" Background="Beige"/&gt;
      &lt;/local:AutoSizingColumnsWrapPanel&gt;
  &lt;/Window&gt;
  </code></pre>