ContentControl.Content在MVVM中未正确绑定

Question

I have an MVVM app. I want a collection of buttons to be represented from the ViewModel and be dynamic. Which means I want to populate the window with controls from the ViewModel.

I tried creating a content control and binding it's Content property to a Grid which I will put buttons in. The binding did not work, it remains empty.

I tried binding it to a simple string, still nothing. I should mention that other simple bindings do work, so that's why it's weird.

The creation of the UserControl:

 <TabControl HorizontalAlignment="Left" Height="696" Margin="429,0,0,32" VerticalAlignment="Bottom" Width="552" ItemsSource="{Binding TabCollection}">
        <TabControl.Resources>
        </TabControl.Resources>
        <TabControl.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Header}"/>
            </DataTemplate>
        </TabControl.ItemTemplate>
        <TabControl.ContentTemplate>
            <DataTemplate>
                <cattab:CategoryTab/>
            </DataTemplate>
        </TabControl.ContentTemplate>
    </TabControl>`

The binding in the UserControl:

 <ContentControl HorizontalAlignment="Left" Height="286" Margin="98,152,0,-396" VerticalAlignment="Top" Width="313">
        <ContentControl Content="{Binding Favorites}" Margin="0,30,0,0" VerticalAlignment="Top"/>
    </ContentControl>`

MainViewModel:

//**** Initilize TabCollection with fake data (temporary)            
TabCollection.Add(new CategoryTabViewModel { Header = "בדיקה11" });
TabCollection.Add(new CategoryTabViewModel { Header = "בדיקה2" });

UserControl ViewModel:

public CategoryTabViewModel()
{
    SearchText = "bbbaaaa";
    Favorites.Add(new Button());
}

The binding of SearchText works, on Favorites it's not

Answer 1

Try to use an ItemsControl

Here's a good tutorial: http://www.wpf-tutorial.com/list-controls/itemscontrol/

<ItemsControl HorizontalAlignment="Left" Height="286" Margin="98,152,0,-396" VerticalAlignment="Top" Width="313" Content="{Binding Favorites}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <controlsToolkit:WrapPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Button Content="{Binding Name}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Use a WrapPanel to manage your layout: http://www.wpftutorial.net/WrapPanel.html

Answer 2

After reading your updates I can say that your code is not MVVM compliant because your ViewModel layer is aware of the View layer (you create Buttons in your ViewModel)

What you need to do:

XAML of your CategoryTab

<ItemsControl ItemsSource="{Binding Favorites, Mode=OneWay}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Button/><!--Show whatever you want here-->
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

If you want to create new Button every time an object is added to Favorites you will need to make Favorites an ObservableCollection.