How to refer to another XAML element inside a custom nested user control?

Question

I want to refer to another element, which resides as nested under a custom user control:

<userControls:Test>
     <TextBox Name="Foo" />

     <Button CommandParameter="{Binding Text, ElementName=Foo" Command="{Binding anything}" />
</userControls:Test>

Basically I'm using commands and I'm trying to refer to another element with a name, but I get this famous:

Cannot set Name attribute value '...' on element '...'. '...' is under the scope of element '...', which already had a name registered when it was defined in another scope.

I figured it's impossible to name an element: How to create a WPF UserControl with NAMED content

So is there any other way to refer to the element that would work inside nested custom user control content?

In xaml you should not use x:Name instead of just Name? I know it's not the answer... — mlemay, Jul 06 '12 at 14:51
Can you show some code, including the actual trimmed-down version of the XAML it operates on? — Jon, Jul 06 '12 at 14:58
The code above works ok for me with a UserControl. Can you give more details, do you mean custom control, or user control? Also I assume there should be a closing } in your example. — Phil, Jul 07 '12 at 08:29

score 3 · Answer 1 · answered Jul 06 '12 at 15:08

Not a direct answer to your question, but a reasonable workaround. In your view bind the Text to FooText property on the viewmodel, directly beside the declaration of the ICommand. When the command executes, use the latest FooText

<!-- View -->
<userControls:Test>
     <TextBox Text={Binding FooText, Mode=TwoWay} />

     <Button Command="{Binding FooCommand}" />
</userControls:Test>


// ViewModel
public string FooText { get; set; }

public ICommand FooCommand 
{ 
    get 
    { 
        return new DelegateCommand(() => ExecuteFoo(FooText)); 
    } 
}

Lee Louviere · Answer 2 · 2012-07-06T16:49:56.650

Why not make a template to the UserControl.

<....Resources>
    <Style TargetType="{x:Type UserControl}" x:Key="MyUserControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <StackPanel>
                        <TextBox x:Name="PART_Foo"/>
                        <TextBlock Text="{Binding ElementName=PART_Foo, Path=Text}"/>
                        <ContentPresenter  Content="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Path=Content}"/>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</....Resources>
<UserControl Style="{StaticResource MyUserControl}">
</UserControl>

Then name the template with a key, and specify which UserControl uses which template.

Also, in your code, you could get the PART_Name of the templated part using:

UIElement GetUserControlPart(UserControl control, String name)
{
   return control.Template.FindName(name, control) as UIElement;
}

How would this work if I used custom properties like `...`? Because right now with this approach it renders the text `"System.Windows.Controls.ControlTemplate"`. — Tower, Jul 08 '12 at 14:14
After removing the `ControlTemplate` it seems to work in VS preview mode but throws about unable to cast `TextBox` into a `DockPanel` (add it to a collection of dock panels). — Tower, Jul 08 '12 at 14:48

score 1 · Accepted Answer · edited May 23 '17 at 12:34

I ended up doing it like this:

<UserControl x:Class="MyProject.FooBar"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:userControls="clr-namespace:MyProject.UserControls"
         Loaded="Loaded"> <!-- notice -->

    <userControls:Test>
         <TextBox Initialized="FooInitialized" />

         <Button Initialized="AnotherInitialized" />
    </userControls:Test>

And code:

// This for every initialization, all we do is set names after the elements are initialized.
private void FooInitialized(object sender, EventArgs e)
{
    ((TextBox) sender).Name = "Foo";
}

// Here when the entire junk is loaded, we set the necessary commands.
private void Loaded(object sender, EventArgs e)
{
    // Find elements.
    var button = UIHelper.FindChild<Button>(this, "Bar");
    var textBox = UIHelper.FindChild<TextBox>(this, "Foo");

    // Set up bindings for button.
    button.Command = ((FooViewModel) DataContext).FooCommand;
    button.CommandParameter = textBox;
}

The UIHelper is from https://stackoverflow.com/a/1759923/283055. The button is also given a name the same way as the text box.

Basically all names are set via Initialized event. The only down side is that you must refer to the names in code, and that's why I'm setting commands via code after the entire component has loaded. I found this the best compromise between code and UI markup.

score 0 · Answer 4 · answered Jul 06 '12 at 16:20

0

If you use .NET 4.0 and require to set the binding source to the sibling control, then you could use this MarkupExtension:

public class SiblingSourceBinding : MarkupExtension
{  
    public Binding Binding
    {
        get;
        set;
    }

    public int SiblingIndex
    {
        get;
        set;
    }

    public override object ProvideValue(IServiceProvider serviceProvider)
    {
        var provideValueTarget = serviceProvider.GetService(typeof(IProvideValueTarget)) as IProvideValueTarget;

        if (provideValueTarget != null)
            this.Binding.Source = LogicalTreeHelper.GetChildren(LogicalTreeHelper.GetParent(provideValueTarget.TargetObject as DependencyObject)).Cast<object>().ElementAt(this.SiblingIndex);
        else
            throw new InvalidOperationException("Unable to set sibling binding source.");

        return this.Binding.ProvideValue(serviceProvider);
   }

and use it like this:

<userControls:Test>
    <TextBox/>
    <Button CommandParameter="{local:SiblingSourceBinding Binding={Binding Text}, SiblingIndex=0}" Command="{Binding anything}"/>
</userControls:Test>

answered Jul 06 '12 at 16:20

Stipo

4,566
1
21
37

You could change it to ElementName by searching for name? – Lee Louviere Jul 06 '12 at 21:07
ElementName cannot be specified in this case, that was the original problem. – Stipo Jul 06 '12 at 22:18
Is there any other way to "mark" the text box with any sort of identifier that could be used? In this scenario a sibling works but if the structure is more complex the issue remains. – Tower Jul 08 '12 at 11:32
Perhaps Tag (http://msdn.microsoft.com/en-us/library/system.windows.frameworkelement.tag.aspx) property could be used. Then a search through logical (or maybe visual?) tree would have to be performed to find a FrameworkElement with specific Tag value. I am assuming the element would have to be defined in XAML before text-box, because otherwise it wouldn't be a part of a logical tree when MarkupExtension.ProvideValue is called (current solution also has this issue). – Stipo Jul 09 '12 at 07:27

score 0 · Answer 5 · answered Oct 21 '20 at 07:13

You can use Uid in your nested element as in the following:

<userControls:Test Name="usrCtrl">
     <TextBox Uid="Foo" />
     <Button Uid="btn"/>
</userControls:Test>

Then you use the following function (the function was a solution for this answer Get object by its Uid in WPF):

private static UIElement FindUid(this DependencyObject parent, string uid)
{
    var count = VisualTreeHelper.GetChildrenCount(parent);
    if (count == 0) return null;

    for (int i = 0; i < count; i++)
    {
        var el = VisualTreeHelper.GetChild(parent, i) as UIElement;
        if (el == null) continue;

        if (el.Uid == uid) return el;

        el = el.FindUid(uid);
        if (el != null) return el;
    }
    return null;
}

Then in your Loaded function add this:

private void Loaded(object sender, EventArgs e)
{
    // Find elements.
    var button = FindUid(usrCtrl, "btn") as Button;
    var textBox = FindUid(usrCtrl, "Foo") as TextBox;
     
    // Do binding here...
}

How to refer to another XAML element inside a custom nested user control?

5 Answers5