MahApps TabControl Binding

Question

Hi im very new with wpf , im using MVVM light . I have a view with Mahapps tab control binded to a list in the viewmodel of the main view , i have a button that adds items to the list . The mahapps tabitem is binded to a content view but for some reason it doesnt display anything even if when i add item to the binded list it also adding a new tab item. Probably im doing it wrong any suggestion is welcome. Thanks in advance

TickersView

<UserControl x:Class="V2.Views.TickersView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
         xmlns:local="clr-namespace:V2.Views"
         xmlns:y="clr-namespace:V2.ViewModel"
         xmlns:simpleChildWindow="clr-namespace:MahApps.Metro.SimpleChildWindow;assembly=MahApps.Metro.SimpleChildWindow"


         mc:Ignorable="d"             
         d:DesignHeight="800" d:DesignWidth="600"
         DataContext="{Binding Tickers, Source={StaticResource Locator}}">




<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="15*"/>
    </Grid.RowDefinitions>
    <Button   Style="{StaticResource MaterialDesignFloatingActionMiniDarkButton}"  Content="+" VerticalContentAlignment="Center" Command="{Binding AddTickerCommand , Mode=OneWay}" HorizontalAlignment="Right" VerticalAlignment="Center"  Grid.Row="0" Margin="0,0,15,0"  BorderBrush="{x:Null}"  />
    <Controls:MetroAnimatedTabControl
        ItemsSource="{Binding TickersList}"

        Grid.Row="1">

        <Controls:MetroAnimatedTabControl.ItemContainerStyle>
            <Style TargetType="TabItem">
                <Setter Property="Header" Value="{Binding Name}"/>
            </Style>
        </Controls:MetroAnimatedTabControl.ItemContainerStyle>
        <Controls:MetroAnimatedTabControl.ContentTemplate>
            <DataTemplate DataType="{x:Type y:TickerViewModel}">
                <ContentControl Content="{Binding TickerView}"  Height="{Binding ActualHeight, ElementName=parentElementName}" Width="{Binding ActualWidth, ElementName=parentElementName}" />
            </DataTemplate>
        </Controls:MetroAnimatedTabControl.ContentTemplate>

    </Controls:MetroAnimatedTabControl>



</Grid>

TickersViewModel

private ObservableCollection<TickerViewModel> _tickers = new ObservableCollection<TickerViewModel>();
private Market _selectedMarket;

public ObservableCollection<TickerViewModel> TickersList
{
    get
    {
        return _tickers;
    }
    set
    {
        Set(ref _tickers, value);
    }
}

TickerViewModel

public class TickerViewModel : ViewModelBase
{
    public string Name { get; set; }
    public Market Market { get; set; }
    public Exchange SelectedExchange{ get; set; }
    public MarketSummary Summary { get; set; }


}

TickerView

<UserControl x:Class="V2.Views.TickerView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:V2.Views"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300"
         DataContext="{Binding Ticker, Source={StaticResource Locator}}">
<Grid>
    <StackPanel>
        <TextBlock Text="{Binding Name}"/>
    <Button Height="Auto" Margin="0,118,0,134">sdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasda</Button>
        <TextBlock Text="{Binding Market}"/>
    </StackPanel>
</Grid>

Answer 1

The ContentTemplate should contain a TickerView , not bind to a property called TickerView :

<Controls:MetroAnimatedTabControl.ContentTemplate>
    <DataTemplate DataType="{x:Type y:TickerViewModel}">
        <local:TickerView />
    </DataTemplate>
</Controls:MetroAnimatedTabControl.ContentTemplate>

And get rid of this from the TickerView :

DataContext="{Binding Ticker, Source={StaticResource Locator}}">

It will inherit the corresponding TickerViewModel in the TabControl as its DataContext automatically.