How to bind by element name when control is inside a UserControl? - xaml

Question

I am trying to bind the Fill property of a Rectangle to a property in the page's DataContext by using the element name, but because the Rectangle is in a UserControl the page is not found so binding does not occur.
Simplified example:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:Converters_Theme="using:ProjectName.Common.Converters"
xmlns:CustomControls="using:ProjectName.CustomControls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:ProjectName.Views"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ViewModel="using:ProjectName.ViewModels"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="ProjectName.Views.TestPage"
x:Name="pageName"
mc:Ignorable="d">
<Page.Resources>
<Converters_Theme:ThemeColorToSolidColorBrushConverter x:Key="ThemeColorToSolidColorBrushConverter"/>
<DataTemplate x:Key="ItemDataTemplate">
<StackPanel Orientation="Vertical">
<!-- ... -->
<Rectangle Fill="{Binding DataContext.Theme.Color, Converter={StaticResource ThemeColorToSolidColorBrushConverter}, ElementName=pageName}" MinHeight="40" MinWidth="40" />
<!-- ... -->
</StackPanel>
</DataTemplate>
</Page.Resources>
<Page.DataContext>
<ViewModel:PageViewModel />
</Page.DataContext>
<Grid>
<CustomControls:Tab>
<CustomControls:Tab.LeftContent>
<ItemsControl ItemsSource="{Binding Items}" ItemTemplate="{StaticResource ItemDataTemplate}" />
</CustomControls:Tab.LeftContent>
<CustomControls:Tab.RightContent>
<!-- ... -->
</CustomControls:Tab.RightContent>
</CustomControls:Tab>
</Grid>
</Page>

Answer 1

Simple way to accomplish it is to make your ViewModel a StaticResource, e.g. in App.xaml (may work in your Page.xaml):
<App.Resources>
<ViewModel:PageViewModel x:Key="MyPageViewModel" />
</App.Resources>
And then reference to it in your Page.xaml:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:Converters_Theme="using:ProjectName.Common.Converters"
xmlns:CustomControls="using:ProjectName.CustomControls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:ProjectName.Views"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ViewModel="using:ProjectName.ViewModels"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="ProjectName.Views.TestPage"
x:Name="pageName"
DataContext="{StaticResource MyPageViewModel}"
mc:Ignorable="d">
<Page.Resources>
<Converters_Theme:ThemeColorToSolidColorBrushConverter x:Key="ThemeColorToSolidColorBrushConverter"/>
<DataTemplate x:Key="ItemDataTemplate">
<StackPanel Orientation="Vertical">
<!-- ... -->
<Rectangle Fill="{Binding Theme.Color, Source={StaticResource MyPageViewModel}, Converter={StaticResource ThemeColorToSolidColorBrushConverter}}" MinHeight="40" MinWidth="40" />
<!-- ... -->
</StackPanel>
</DataTemplate>
</Page.Resources>
<Grid>
<CustomControls:Tab>
<CustomControls:Tab.LeftContent>
<ItemsControl ItemsSource="{Binding Items}" ItemTemplate="{StaticResource ItemDataTemplate}" />
</CustomControls:Tab.LeftContent>
<CustomControls:Tab.RightContent>
<!-- ... -->
</CustomControls:Tab.RightContent>
</CustomControls:Tab>
</Grid>
</Page>
To do it in much more cleaner way, I advise you to use ViewModelLocator as a static resource in app, which will properties to all ViewModels and make it StaticResource in App.xaml. It is much more cleaner way to instantiate one class in App.xaml than every ViewModel you have.