XAML Databinding in Control templates via a dynamic Xpath expression - wpf

Question

Ok, I'm pretty new to XAML & WPF, so I'm trying a learning project to construct a periodic table. I have a set of elemental data in XML. I have defined a control template in XAML to display this information for each chemical element as a button in a grid:
<ControlTemplate x:Key="elementTemplate" TargetType="{x:Type Button}">
<Grid>
<Rectangle x:Name="backingRect" Margin="2" StrokeThickness="0" RadiusX="3" RadiusY="3" Fill="{TemplateBinding Property=Button.Background}">
<Rectangle.Effect>
<DropShadowEffect BlurRadius="8"/>
</Rectangle.Effect>
</Rectangle>
<Viewbox>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.2*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="0.2*"/>
</Grid.RowDefinitions>
<TextBlock FontWeight="DemiBold" TextAlignment="Center" Grid.Row="0" diag:PresentationTraceSources.TraceLevel="High">
<TextBlock.Text>
<Binding Source="{StaticResource elementData}">
<Binding.XPath>atom[#id='H']/scalar[#dictRef='bo:atomicNumber']</Binding.XPath>
</Binding>
</TextBlock.Text>
</TextBlock>
<TextBlock FontWeight="Bold" TextAlignment="Center" FontSize="28" Grid.Row="1" >
<TextBlock.Text>
<Binding Source="{StaticResource elementData}" >
<Binding.XPath>atom[#id='H']/label[#dictRef='bo:symbol']/#value</Binding.XPath>
</Binding>
</TextBlock.Text></TextBlock >
<TextBlock FontWeight="DemiBold" TextAlignment="Center" Grid.Row="2">1.0021</TextBlock>
</Grid>
</Viewbox>
</Grid>
</ControlTemplate>
Now, this will create a button which binds to my underlying XML data statically. What I want to do is to replace the #id='H' XPath criterion with an expression that retrieves the Content of the Button that uses this template such as #id={TemplateBinding Button.Content} (if such a thing were possible), so if I create such a Button with a textual content of 'He', it will retrieve the corresponding data in the XML file such as mass, atomic number etc. What is the syntax for specifying such a dynamic XPath in XAML and binding it to a property on the control template?

Answer 1

See http://www.codeproject.com/Articles/854564/Parameterized-XPaths-in-XAML for a fuller discussion, ...
Essentially you have to use multi-binding with a multi-binding converter that performs the parameterized path replacement as the binding is being constructed and then return the desired content.
E.g.
<MultiBinding Converter="{StaticResource XPathConverter}" ConverterParameter="atom[#id="{1}"]/scalar[#dictRef='bo:atomicNumber']" Mode="OneWay">
<Binding Source="{StaticResource elementData}" Mode="OneWay" />
<Binding ElementName="_Button" Path="Content" Mode="OneWay"/>
</MultiBinding>
If you only need a OneWay binding, the converter is straightforward. The ConverterParamenter is the XPath with a parameterized placeholder(s). The first binding is to your XML data. And the second binding is for your control data to be used for the parameterized replacement. You will have to correct the converter below for your specific data objects and your desired return value.
public class XPathConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
XmlNode root = (value[0] as XmlNode);
string xpathf = (parameter as string);
for (int i = 1; i < values.Count(); i++)
xpathf = xpathf.Replace("{" + i.ToString().Trim() + "}", values[i] as string ?? "");
return root.SelectSingleNode(xpathf).InnerXML;
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}