Binding to properties in both the ViewModel and CodeBehind

Question

I have what I'm sure is a ridiculously ignorant question, but I'm asking it anyways because I've searched and searched and either don't understand the solutions I'm seeing or not finding exactly the answer I seek.

I have an MVVM application. My XAML is setup with the DataContext set to the VM where the data items on the screen are populated from the VM's properties. My CodeBehind doesn't fiddle with the data, only things relating to the screen.

What I want to do now is bind certain UI elements to properties in the foo.xaml.cs (CodeBehind) file. For example, I want to specify FontSize's bound to properties in the CB so that in the WindowInitialized handler in the CB, it can detect screen sizes and change one variable to which all the screen items' FontSize= are bound.

I can solve this the wrong way by creating a public property in my VM and then "inject" the value from the CB into the VM. I know that will work, but it's a roundabout way to get the behavior I want, it's not at all straightforward, and I feel confident it's the wrong way to proceed.

I searched around and have tried things like:

    FontSize="{Binding RelativeSource={RelativeSource Self},Path="MyFontSize"

(where "MyFontSize" is a public int property) and a variety of other examples I found, but none have worked.

So specifically, if my CodeBehind class is called NameChangeSetupMainWindow and that's where the "MyFontSize" property lives,

public partial class NameChangeSetupMainWindow : Window
{
    private int m_fontSize = 14;
    public int MyFontSize
    {
        get { return m_fontSize; }
        set
        {
            if (m_fontSize != value))
            {
                m_fontSize = (value > 0) ? value : 10;
            }
        }
    }
    ...
    ... rest of the class...
    ...
}

and the VM is called NameChangeSetupViewModel and that's where the "real" data lives and the DataContext points ala:

<Window.DataContext>
    <local:NameChangeSetupViewModel/>
</Window.DataContext>

what is the syntax in XAML to bind just those UI items (tooltips related to the UI, font sizes, etc) to variables in the CodeBehind instead of housing them in the VM?

Thanks in advance for any guidance you can supply.

{RelativeSource Self} will only work for the Window. Where did you apply this binding? Btw, you could also change the fontsize of UI elements directly in code behind, without using binding. — Fede
– Fede, Commented Nov 22, 2013 at 22:32
Yes, thanks, HighCore, I am considering that, but I thought it would be worthwhile to point a number of UI-specific things, such as FontSize and styles and such, to a centralized variable. — John
– John, Commented Nov 22, 2013 at 22:37
Oh, and for the "Where did you apply this binding?" I tried it in the XAML file inside of the "<Window" tag. — John
– John, Commented Nov 22, 2013 at 22:46

Community · Accepted Answer · 2017-05-23 11:49:28Z

3

You can use RelativeSource AncestorType to bind to properties of the view itself:

<TextBlock FontSize="{Binding RelativeSource={RelativeSource AncestorType=Window},Path=MyFontSize}" />

Using ElementName should work as well:

<Window x:Name="window">

    <TextBlock FontSize="{Binding ElementName=window,Path=MyFontSize}" />
</Window>

Edit

Here is an example that I've confirmed working:

XAML

<Window x:Class="WpfAbc.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525"
    ToolTip="{Binding RelativeSource={RelativeSource Self},Path=MyToolTip}"
    >
    <Grid>
        <TextBlock Text="hello world" FontSize="{Binding RelativeSource={RelativeSource AncestorType=Window},Path=MyFontSize}" />
    </Grid>
</Window>

Code Behind

public partial class MainWindow : Window
{
    private int m_fontSize = 20;
    public int MyFontSize
    {
        get { return m_fontSize; }
        set
        {
            if (m_fontSize != value)
            {
                m_fontSize = (value > 0) ? value : 10;
            }
        }
    }

    public string MyToolTip
    {
        get { return "hello world"; }
    }

    public MainWindow()
    {
        InitializeComponent();
    }
}

Articles on this topic:

Related background:

"Namescopes" in XAML (when binding to a source using "ElementName", the source element must be in the same namescope)
Visual tree vs logical tree in XAML (elements not in the visual tree, like Popup and ContextMenu, do not inherit DataContext. Binding from these elements requires a workaround like the "data context spy" technique.)

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered Nov 22, 2013 at 22:33

McGarnagle

103k31 gold badges235 silver badges264 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

John Over a year ago

I tried this verbatim, but it didn't work. I'll try again by changing "window" to "NameChangeSetupMainWindow" because I suspect that's what you meant in shortcut form (I'm still pretty neophyte on the syntax/semantics of binding)

John Over a year ago

Well, maybe not...that generated an error of: "member names cannot be the same as their enclosing type" with the line number of this statement: x:Name="NameChangeSetupMainWindow"

John Over a year ago

I tried both of the above examples, but neither worked. Rather than the FontSize, I tried setting the "ToolTip" in the Window as in the following where ToolTip is a public string property in the CB file, but no go: ` <Window ToolTip="{Binding RelativeSource={RelativeSource AncestorType=Window},Path=ToolTip}" `

McGarnagle Over a year ago

@John hm, is the binding inside an outside-the-visual-tree element (popup, context menu), or inside a data template? That's the only reason I can think of, why the above would not work.

John Over a year ago

Thank you -- I will re-peruse MSDN + the links you provided. For those new to MVVM who might encounter my question and the answers above, binding the variables in the CB file did require that I add interface INotifyPropertyChanged and implement the necessary plumbing to fire the NotifyPropertyChanged("MyToolTip") events. While this is fundamental, if you're reading this question it's possible you might not know that. I'll leave the messy details out, but the signature now looks like this: public partial class NameChangeSetupMainWindow : Window, INotifyPropertyChanged

|

Collectives™ on Stack Overflow

Binding to properties in both the ViewModel and CodeBehind

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related