How to change button's command to tabcontrols' in wpf - wpf

Question

I have 4 buttons binding commands, I want to use tabcontrols accomplish these commands.
<Button Margin="5" Width="Auto" Height="26" Content="operating" Command="{Binding PCmd}" CommandParameter="{Binding ElementName=frame}"/>
<Button Margin="5" Width="Auto" Height="26" Content="settings" Command="{Binding SettingCmd}" CommandParameter="{Binding ElementName=frame}"/>
<Button Margin="5" Width="Auto" Height="26" Content="showing" Command="{Binding DiCmd}" CommandParameter="{Binding ElementName=frame}"/>
<Button Margin="5" Width="Auto" Height="26" Content="controls" Command="{Binding DeviceCmd}" CommandParameter="{Binding ElementName=frame}"/>
<Frame x:Name="frame" Source="PPage.xaml" NavigationUIVisibility="Hidden" />
settings commmand like this:
SettingCmd = new RelayCommand<System.Windows.Controls.Frame>
(
(f) =>
{
f.Navigate(new Uri(#"View\SettingPage.xaml", UriKind.Relative));
}
);
now I make these changes, how to add commands to them to accomplish the commands in buttons, and there are 4 xaml pages according to 4 buttons
<controls:MetroAnimatedSingleRowTabControl Grid.Row="1" x:Name="MainTabControl">
<TabItem Header="operating"></TabItem>
<TabItem Header="settings"></TabItem>
<TabItem Header="showing"></TabItem>
<TabItem Header="controls"></TabItem>
</controls:MetroAnimatedSingleRowTabControl>

Answer 1

Since there are no need for the frame anymore, the best way is to bring the Xaml of each page and put it inside the corresponding TabItem, for example :
<TabItem Header="settings">
//bring the Xaml of SettingPage.Xaml to here
</TabItem>
In that case they will be no need for navigation and there for no need for commands, but if you insisted on keeping each tab content on a separated Xaml file you must first define a Frame in each TabItem, and set its source property to the coresponding Xaml page :
<controls:MetroAnimatedSingleRowTabControl Grid.Row="1" x:Name="MainTabControl">
<TabItem Header="operating">
<Frame Source="View/OperatingPage.xaml" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" NavigationUIVisibility="Hidden"/>
</TabItem>
<TabItem Header="settings">
<Frame Source="View/SettingPage.xaml" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" NavigationUIVisibility="Hidden"/>
</TabItem>
<TabItem Header="showing">
<Frame Source="View/ShowingPage.xaml" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" NavigationUIVisibility="Hidden"/>
</TabItem>
<TabItem Header="controls">
<Frame Source="View/ControlsPage.xaml" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" NavigationUIVisibility="Hidden"/>
</TabItem>
</controls:MetroAnimatedSingleRowTabControl>
in this case also there are no need for any command.