How to change button's command to tabcontrols' in 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.