Search code examples
wpfmvvmavalondock

avalondock 3.3.0.0 mvvm LayoutAnchorable

I am trying to use mvvm for avalondock I have the following property

Property Documents = New ObservableCollection(Of Xceed.Wpf.AvalonDock.Layout.LayoutAnchorable)

in my ViewModel i have the following

    Dim RemindersView As New ViewReminders ' This is a simple user control 
    Dim NewItem As New Xceed.Wpf.AvalonDock.Layout.LayoutAnchorable
    NewItem.Title = "My Reminders"
    NewItem.ContentId = "MYID123"
    NewItem.Content = RemindersView
    Documents.Add(NewItem)

XAML ( for simplicity i did not include the full xaml)

 <ad:DockingManager AnchorablesSource="{Binding Documents}">

When i run the application i can see the title of each document but i cannot see the user controls/Views

I only get the following :

enter image description here

If i use static the user control is shown correctly.

Solution

  • figure it out :

    1st. Create your ViewModels with what ever need to hold + create a simple property Title

    e.g

        Public Class MyViewModel : Implements INotifyPropertyChanged

    Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged
    Sub NF(ByVal PN As String)
        RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(PN))
    End Sub

    Sub New()
        Title = "This is My Title"
    End Sub

    Property RefreshCommand As New MyCommands(AddressOf RefreshCommand_)

    Private Sub RefreshCommand_()
        MySomeList =' Get your list from SQL/ MANUALLY OR WITH WHAT EVER IT IS THAT.
    End Sub

    Private _Title As String
    Property Title As String
        Get
            Return _Title
        End Get
        Set(value As String)
            _Title = value
            NF("Title")
        End Set
    End Property


    Private _MySomeList As IEnumerable
    Property MySomeList As IEnumerable
        Get
            Return _MySomeList
        End Get
        Set(value As IEnumerable)
            _MySomeList = value
            NF("MySomeList")
        End Set
    End Property

End Class

    2nd. Create your Views either as a UserControl or within your DockingManager Resources as a DataTemplates..(example XAML below)

    The Observable Collection should be of type of your object that holds your ViewModels and NOT Xceed.Wpf.AvalonDock.Layout.LayoutAnchorable

    e.g

        Documents = New ObservableCollection(Of Object)
    Dim DocumentsVM As New UserDashBoard.DocumentsVM
    Documents.Add(DocumentsVM)
    Dim CustomerBalancesVM As New UserDashBoard.CustomerBalancesViewModel
    Documents.Add(CustomerBalancesVM)
    Dim TransactionsVM As New UserDashBoard.TransactionsVM
    Documents.Add(TransactionsVM)
    Documents.Add(New UserDashBoard.RecurringTransactionVM)

    Then in DockingManagerResources you define your dataTemplates like 

          <ad:DockingManager.Resources>              
            <DataTemplate DataType="{x:Type profile:CustomerBalancesViewModel}">
                <DataGrid AutoGenerateColumns="False" AlternatingRowBackground="White"  HeadersVisibility="None" GridLinesVisibility="None" >
                    <DataGrid.Columns>
                        <DataGridTextColumn    Width="*" Binding="{Binding Name}"></DataGridTextColumn>
                        <DataGridTextColumn  Width="50"  Binding="{Binding Balance}" >
                            <DataGridTextColumn.ElementStyle>
                                <Style TargetType="TextBlock">
                                    <Setter Property="HorizontalAlignment" Value="Right"></Setter>
                                </Style>
                            </DataGridTextColumn.ElementStyle>
                        </DataGridTextColumn>

                    </DataGrid.Columns>
                </DataGrid>
            </DataTemplate>

        </ad:DockingManager.Resources>

    Then run your sample /test and you will see your views ..

    At least this should get you start up before changing other templates or styling the docking manager.