These are chat archives for ButchersBoy/Dragablz

6th
Aug 2018
berge2007
@berge2007
Aug 06 2018 16:19

Hello Coders,
For example I have 2 different ViewModel class like VM1, VM2 and I have two different UserControl based View class like V1 and V2. V1's job is to display data of VM1 and V2 will display datas of VM1. I'd like to put the V1 and V2 into different Dragablz Tab.

in *.CS:

Tabs.Add(new Dragablz.HeaderedItemViewModel()
{
    Header = "Tab1",
    Content = new ViewModel1()
});

Tabs.Add(new Dragablz.HeaderedItemViewModel()
{
    Header = "Tab2",
    Content = new ViewModel2()
});

in *.xaml:

 <dockablz:Layout>
        <dragablz:TabablzControl
            x:Name="tabControl"
            ItemsSource="{Binding Tabs}"            
            Margin="8"
            UseLayoutRounding="True"
            ShowDefaultAddButton="False"
            ShowDefaultCloseButton="True"
            ClosingItemCallback="{Binding ClosingTabItemHandler}"
            HeaderMemberPath="Header"
            DisplayMemberPath="Content"           
            >
            <dragablz:TabablzControl.InterTabController>
                <dragablz:InterTabController ></dragablz:InterTabController>
            </dragablz:TabablzControl.InterTabController>
        </dragablz:TabablzControl>
    </dockablz:Layout>

How could I bind together the corresponding ViewModels and Views on the tabs? (On "Tab1" should display a View1 which is binded to Tab1's Content (a ViewModel1 object)

I think TabablzControl's ContentTemplate not going to work because I have different View types and different ViewModel types.

Every example on the Internet (what I did found) was "Hello world" level, or hard coded in XAML with "TabItem" tags

Jérémy VIGNELLES
@jeremyVignelles
Aug 06 2018 16:24
You will probably need to abstract a common higher level for ViewModel1 and ViewModel2 I suppose
something like IViewModel that would be implemented by both?
or you can pass them both as "objects"
but you will need to override somthing to create your view, I don't remember what, but I'm pretty sure there's something to create the tab items the way you want
berge2007
@berge2007
Aug 06 2018 16:36

Content is Object so it does not count that VM1 or VM2 has a common IViewModel interface or not

(note:this is Dragablz code):

#region Assembly Dragablz, Version=0.0.3.203, Culture=neutral, PublicKeyToken=null
#endregion

using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace Dragablz
{
    //
    // Summary:
    //     Helper class to create view models, particularly for tool/MDI windows.
    public class HeaderedItemViewModel : INotifyPropertyChanged
    {
        public HeaderedItemViewModel();
        public HeaderedItemViewModel(object header, object content, bool isSelected = false);

        public object Header { get; set; }
        public object Content { get; set; }
        public bool IsSelected { get; set; }

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null);
    }
}

So the question is, how could I tell to TabablzControl that use View1 class if the Content is ViewModel1?

Jérémy VIGNELLES
@jeremyVignelles
Aug 06 2018 16:41
What gets displayed when you run your code? the view model's ToString()/the viewModel type?
If so, I guess that you can use a DataTemplateSelector to create your views
berge2007
@berge2007
Aug 06 2018 16:45

Like that:

    <dockablz:Layout>
        <dragablz:TabablzControl
            x:Name="tabControl"
            ItemsSource="{Binding Tabs}"            
            Margin="8"
            UseLayoutRounding="True"
            ShowDefaultAddButton="False"
            ShowDefaultCloseButton="True"
            ClosingItemCallback="{Binding ClosingTabItemHandler}"
            HeaderMemberPath="Header"
            DisplayMemberPath="Content" 
            >
            <dragablz:TabablzControl.InterTabController>
                <dragablz:InterTabController ></dragablz:InterTabController>
            </dragablz:TabablzControl.InterTabController>
            <dragablz:TabablzControl.ContentTemplate>
                <DataTemplate DataType="{x:Type MyNamespace:ViewModel1}">
                    <MyNamespace:View1 />
                </DataTemplate>
                <DataTemplate DataType="{x:Type MyNamespace:ViewModel2}">
                    <MyNamespace:View2/>
                </DataTemplate>
            </dragablz:TabablzControl.ContentTemplate>
        </dragablz:TabablzControl>
    </dockablz:Layout>

?

berge2007
@berge2007
Aug 06 2018 17:09
But maybe I could not explain myself very well so back to the basics:
For example I'd like to create a desktop app for a "Rent-a-vehicle" company. Workers would like to fill up the database with vehicles and more other things. There are different vehicles with different parameters, for example bicycle, quads, e-tricyle, jet-ski, protective accessories/gears, etc. So almost every item type needs a special form to fill up. I'd like to show theese forms as tabs. If a customer/"renter" come in to the shop the worker will click on the "Rent" menu and a new tab will shows up with a renting "form".
Which would be the right method to achive that funcionality with "Dragablz" tabs?
Jérémy VIGNELLES
@jeremyVignelles
Aug 06 2018 18:35
I'm not really sure of how to do with DataTemplate, maybe you'll need a ContentControl for that
I don't know if there's a right method to do that
you should be able to put your control as Content too I guess
it's just wild guesses, it's up to you to try and find out, or wait for anyone else here that could help