如何通过两种方式将Parent UIElement绑定到附加属性？

Question

I'm developing an on screen keyboard for use in a kiosk style application. I'm building it in such a way that I wish my on screen keyboard to display a preview of whatever text the user is entering using the keyboard.

In xaml I wish to add an attached property to input field controls within my application, for example a TextBox or ComboBox. I want the preview control on my OnScreenKeyboard to be bound to the same value that the underlying control it is attached to is. So if a user clicks on a TextBox, the preview on the on screen keyboard is also a TextBox and is also bound to the same underlying value as the TextBox, eg TextBox.Text.

The image I've provided above is how my keyboard will look. Because the keyboard itself is a popup at a fixed position, (Bottom center of the screen) the keyboard may cover the input control (TextBox, PasswordBox, ComboBox, RichTextBox etc...) that a user has clicked on to summon the keyboard, hence the requirement for the preview as part of the keyboard.

I know that in xaml I can create an attached property such as

<TextBox Text="{Binding Path=Entity.TextValue}" OSK.PopupKeyboard.UIElementControl="{How do I bind this to this parent control?}"/>

What I'd like to do is pass the parent control such as the textbox to the keyboard, set the preview bar along the top of my keyboard to be the same type with the same bindings as the underlying control that a user clicked on to summon the keyboard. This way the values that are entered into the preview on the keyboard are reflected on the control that the user clicked to summon the keyboard in the first place. I also figure it'll allow the keyboard to be flexible with the type of controls that can be used to summon it.

Answer 1

So I've figured out what I needed to do in this instance. I needed to create a dependency property of type FrameworkElement. On my on screen keyboard UserControl I needed a ContentControl to hold the FrameworkElement type. Naturally you have to disconnect the FrameworkElement from its original parent as it can't be in the visual tree more than once, store the parent, attach it to the new parent (ContentControl) then when you're done, reattach it to its original parent.

    public static readonly DependencyProperty FrameworkElementProperty =
            DependencyProperty.RegisterAttached("FrameworkElement",
            typeof(FrameworkElement),
            typeof(PopupKeyboard),
            new FrameworkPropertyMetadata(default(FrameworkElement),
                new PropertyChangedCallback(PopupKeyboard.OnFrameworkElementChanged)));

        [AttachedPropertyBrowsableForType(typeof(FrameworkElement))]
        public static FrameworkElement GetFrameworkElement(DependencyObject element)
        {
            if (element == null)
                throw new ArgumentNullException("element");

            return (FrameworkElement)element.GetValue(FrameworkElementProperty);
        }

        public static void SetFrameworkElement(DependencyObject element, bool value)
        {
            if (element == null)
                throw new ArgumentNullException("element");

            element.SetValue(FrameworkElementProperty, value);
        }

private static void OnFrameworkElementChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            FrameworkElement fe = d as FrameworkElement;
            if (fe != null)
            {
                // detach here
                keyboard.FrameworkElement = fe;
            }
        }

If I wanted to bind a control such as TextBox, ComboBox etc, I'd use the markup as follows:

<TextBox Content="{Binding Entity.Value}" local:PopupKeyboard.FrameworkElement="{Binding RelativeSource={RelativeSource Self}}" />