Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WPF adorner with controls inside

Tags:

c#

.net

wpf

I am trying to achieve an unusual use of an Adorner. When you mouse-over a RichTextBox, an Adorner (see diagram below) will appear above it, allowing you to add a list of strings to a ListBox contained in the Adorner. This is used for adding "tags" (à la Flickr) to the passage contained in the adorned element.

adorner diagram

Firstly: is this even possible?

Most examples of Adorners show how to override the Adorner's OnRender method to do trivial things like draw shapes. I was able to use this to render a set of rectangles that creates the gray border of the Adorner, which also resizes automatically if the height of RichTextBox increases due to additional lines text being added while the Adorner is displayed.

protected override void OnRender(DrawingContext drawingContext)
{
    SolidColorBrush grayBrush = new SolidColorBrush();
    grayBrush.Color = Color.FromRgb(153, 153, 153);

    // left
    drawingContext.DrawRectangle(grayBrush, null, new System.Windows.Rect(1, 1, 5, ActualHeight));
    // right
    drawingContext.DrawRectangle(grayBrush, null, new System.Windows.Rect(ActualWidth - 6, 1, 5, ActualHeight));
    //bottom
    drawingContext.DrawRectangle(grayBrush, null, new System.Windows.Rect(1, ActualHeight, ActualWidth - 2, 5));

    // for reasons unimportant to this example the top gray bar is rendered as part of the RichTextBox

}

However, adding controls is slightly more problematic. Generally speaking, WPF's adorner requires adding child controls in code rather than XAML. Using the technique described in DrawingContext adorner - possible to draw stackpanel?, I have learned how to add child controls (like a TextBox) to an Adorner without any problem within the Adorner's initializer.

The issue, however, is the placement of those controls within the Adorner.

If I could create a grid with a gray background and position it at the bottom of the Adorner, I should be good to go. I would assume (hope) that things like automatic resizing of the Adorner based on the changing size of that Grid as tags are added would then happen automatically.

In short, assuming this is possible, can anyone recommend a way of creating this lower tagging control area within the Adorner and positioning it relative to the bottom of Adorner (which may possibly have to resize as the RichTextBox content resizes)?

like image 220
Ryan Norbauer Avatar asked Apr 03 '12 17:04

Ryan Norbauer


1 Answers

Huzah! With the help of Ghenadie Tanasiev, I've got an answer.

Unlike most controls in WPF, adorners don't have any out-of-the-box way of assigning child elements (such as the controls I wanted to add). Without adding anything to adorners, you can only override their OnRender method and draw stuff within the DrawingContext that gets passed into it. To be honest, this fits probably 99% of use cases for adorners (stuff like creating drag handles around an object), but I needed to add some proper controls to my Adorner.

The trick to doing this is to create a VisualCollection and set your adorner as its owner by passing it into the constructor for the collection.

This is all described pretty comprehensively in this blog article. Unfortunately, my repeated Google searches weren't turning this article up until I knew to search for VisualCollection, thanks to Ghenadie's guidance.

This isn't mentioned in the article, but note that it is possible to combine the VisualCollection technique along with drawing in the OnRender method of the adorner. I'm using OnRender to achieve the side and top borders described in my diagram above and using VisualCollection to place and create the controls.

Edit: here is the source code from the mentioned blog post since it is no longer available:

public class AdornerContentPresenter : Adorner {   private VisualCollection _Visuals;   private ContentPresenter _ContentPresenter;    public AdornerContentPresenter(UIElement adornedElement)     : base(adornedElement)   {     _Visuals = new VisualCollection(this);     _ContentPresenter = new ContentPresenter();     _Visuals.Add(_ContentPresenter);   }    public AdornerContentPresenter(UIElement adornedElement, Visual content)     : this(adornedElement)   { Content = content; }    protected override Size MeasureOverride(Size constraint)   {     _ContentPresenter.Measure(constraint);     return _ContentPresenter.DesiredSize;   }    protected override Size ArrangeOverride(Size finalSize)   {     _ContentPresenter.Arrange(new Rect(0, 0,          finalSize.Width, finalSize.Height));     return _ContentPresenter.RenderSize;   }    protected override Visual GetVisualChild(int index)   { return _Visuals[index]; }    protected override int VisualChildrenCount   { get { return _Visuals.Count; } }    public object Content   {     get { return _ContentPresenter.Content; }     set { _ContentPresenter.Content = value; }   } } 
like image 70
Ryan Norbauer Avatar answered Sep 18 '22 21:09

Ryan Norbauer