WPF Bind in Button's ControlTemplate to property of CommandParameter? - wpf

Question

I am trying to create a generic page navigation button using a Style and ControlTemplate. The idea is that the destination page is the CommandParameter of the button:
<Button Height="64" Width="64" Style="{DynamicResource ButtonViewTileStyle}"
Command="{Binding Path=ChangePage}"
CommandParameter="{Binding Path=HomePage}"/>
...and every page has a DisplayName and IconName property that I would like to use to use in the ControlTemplate. Here is a non-working example with just the display name:
<Style x:Key="ButtonViewTileStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Canvas>
<TextBlock TextWrapping="Wrap"
Text="{Binding CommandParameter.DisplayName,
RelativeSource={RelativeSource TemplatedParent}}"
Canvas.Left="0" Canvas.Top="0"
HorizontalAlignment="Center" VerticalAlignment="Center"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"/>
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Any suggestions on what the Text= binding should be to make this work?

Answer 1

Please refer the below code.
<Window.Resources>
<Style x:Key="ButtonViewTileStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Canvas>
<TextBlock TextWrapping="Wrap"
Text="{Binding CommandParameter.DisplayName,
RelativeSource={RelativeSource TemplatedParent}}"
Canvas.Left="0" Canvas.Top="0"
HorizontalAlignment="Center" VerticalAlignment="Center"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"/>
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<StackPanel>
<Button Command="{Binding TestCommand}" Width="100" Height="25" Style="{DynamicResource ButtonViewTileStyle}" CommandParameter="{Binding Path=PageDetails}"></Button>
</StackPanel>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new TestViewModel();
}
}
class TestViewModel
{
private CommndPrm pageDetials;
public CommndPrm PageDetails
{
get { return pageDetials; }
set { pageDetials = value; }
}
public TestViewModel()
{
pageDetials = new CommndPrm() { DisplayName="Test"};
}
}
class CommndPrm
{
private string displayName;
public string DisplayName
{
get { return displayName; }
set { displayName = value; }
}
}