Binding a command doesn`t work - wpf

Question

I'm beginner in WPF development.
I create some window with frame inside.
I wrote a template for the frame and i`m trying to bind to the buttons inside the freame template commands without success.
see the next code:
<Grid.Resources>
<ControlTemplate TargetType="Frame" x:Key="NavigationButtonsTemplates">
<DockPanel>
<StackPanel
Margin="7"
Orientation="Horizontal"
DockPanel.Dock="Bottom"
HorizontalAlignment="Right"
>
<Button
Content="Back"
Command="{x:Static NavigationCommands.BrowseBack}"
Margin="5,0,5,0" Width="80" />
<Button
Content="Next"
Command="{Binding Path=NavigateToPersonalDataCommand}"
Margin="5,0,5,0" Width="80"></Button>
</StackPanel>
<Border
BorderBrush="LightBlue"
Margin="7,8,9,0"
BorderThickness="7"
Padding="5"
CornerRadius="7"
Background="White"
>
<ContentPresenter />
</Border>
</DockPanel>
</ControlTemplate>
</Grid.Resources>
It seems that the binding of the buttons is not working.
When i put the buttons outside the tag it`s work perfectly.
How can I bind a command to a button which located in ?
Thanks

Answer 1

Your ControlTemplate needs to have a DataContext. Try changing the DockPanel element to bind to the DataContext property on the templated frame. This assumes that the Frame that is being templated has a valid DataContext.
<DockPanel DataContext="{Binding DataContext, RelativeSource={RelativeSource TemplatedParent}}">
or
<DockPanel DataContext="{TemplateBinding DataContext}">
Edit:
After trying to run your code I found the problem. The properties you are binding to in XAML do not match the properties on your view model.
Changing your XAML to bind to the property names on your view model fixes the problem.
From this:
Command="{Binding Path=NavigateNext}"
Command="{Binding Path=NavigateToPersonalData}"
To this:
Command="{Binding Path=BrowseNext}"
Command="{Binding Path=NavigateToPersonalDataCommand}"
to match your view model properties:
public ICommand BrowseNext
{
get
{
return m_BrowseNext;
}
set
{
m_BrowseNext = value;
}
}
public ICommand NavigateToPersonalDataCommand
{
get
{
return m_PersonalDataCommand;
}
set
{
m_PersonalDataCommand = value;
}
}

Answer 2

This is the Xaml code:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TestProj"
x:Class="TestProj.MainView"
x:Name="Window"
Title="MainView"
Width="640" Height="480">
<Window.DataContext>
<local:NavigationViewModel/>
</Window.DataContext>
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="0.25*"/>
<RowDefinition Height="0.25*"/>
<RowDefinition Height="0.25*"/>
<RowDefinition Height="0.25*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.20*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.Resources>
<ControlTemplate TargetType="Frame" x:Key="NavigationButtonsTemplates">
<DockPanel DataContext="{TemplateBinding DataContext}">
<StackPanel
Margin="7"
Orientation="Horizontal"
DockPanel.Dock="Bottom"
HorizontalAlignment="Right"
>
<Button
Content="Back"
Command="{Binding Path=NavigateNext}"
Margin="5,0,5,0" Width="80" />
<Button
Content="Next"
Command="{Binding Path=NavigateToPersonalData}"
Margin="5,0,5,0" Width="80"></Button>
</StackPanel>
<Border
BorderBrush="LightBlue"
Margin="7,8,9,0"
BorderThickness="7"
Padding="5"
CornerRadius="7"
Background="White"
>
<ContentPresenter />
</Border>
</DockPanel>
</ControlTemplate>
</Grid.Resources>
<Button Content="Opening" Grid.Row="0"></Button>
<Button Content="Personal Data" Grid.Row="1"></Button>
<Button Content="Business Data" Grid.Row="2"> </Button>
<Button Content="Summery Report" Grid.Row="3"></Button>
<DockPanel Grid.Column="2" Grid.RowSpan="4">
<Frame x:Name="mainFrame" Template="{StaticResource NavigationButtonsTemplates}"/>
</DockPanel>
</Grid>
</Window>
Here how i wrote the commands:
class NavigationViewModel
{
private ICommand m_BrowseNext;
public ICommand BrowseNext
{
get
{
return m_BrowseNext;
}
set
{
m_BrowseNext = value;
}
}
private ICommand m_PersonalDataCommand;
public ICommand NavigateToPersonalDataCommand
{
get
{
return m_PersonalDataCommand;
}
set
{
m_PersonalDataCommand = value;
}
}
public NavigationViewModel()
{
BrowseNext = new RelayCommand(new Action<object>(NavigateNext));
NavigateToPersonalDataCommand = new RelayCommand(new Action<object>(NavigateToPersonalData));
}
public void NavigateToPersonalData(object obj)
{
MainView.Instance.GetMainFrame.Navigate(Pages.Opening.Instance);
}
public void NavigateNext(object obj)
{
MainView.Instance.GetMainFrame.Navigate(Pages.PersonalData.Instance);
}
}
When i move the buttons outside the the commands works great so i think the problem is in the XAML.
Thanks!!!