michasaucer
michasaucer

Reputation: 5228

How to make TabControl with Caliburn.Micro and diffrent UserControls

i have a problem with TabControl and i dont know how to even start.

I have my root view that i named MainViewModel. Csharp class looks like this:

public class MainWindowViewModel : Conductor<IScreen>.Collection.OneActive
{
    //i have couple of ToggleButtons to load diffrent UserControls, LoadAddNewPage 
    //is one of them
    public void LoadAddNewPage() => this.ActivateItem(new AddNewTaskViewModel(params));
}

I Have ToggleButton in MainWindowView.XAML that loading LoadAddNewTaskPage.

<ToggleButton x:Name="LoadAddNewPage"               
            Grid.Column="4"
            Width="50" Height="50" 
            Content="&#xf067;" 
            Foreground="White" 
            BorderThickness="0"  
            BorderBrush="{x:Null}" 
            Background="#FF085078" Margin="20,3,0,3" Grid.ColumnSpan="3">
       <!-- i deleted data triggers here -->
    </ToggleButton>

As you can see above, it loading AddNewTaskViewModel with form to add new item to my database/list (or whatever).

That AddNewTaskView.xaml is simple UserControl with textboxes etc.

My question is, how to prepare my LoadAddNewPage button to load TabControl with two UserControler? For now, i loading new AddNewTaskViewModel() (it is UserControl, it loads properly as i want to ). How to make TabControl with Caliburn.Micro that will store AddNewTaskViewModel and AddNewProjectViewModel? How to make switch in TabControl between two diffrent UserControl? I have a problem to start, because i dont know how to start with this problem. Thanks for any advices

EDIT

Here i will show my full ViewModel

 public class MainWindowViewModel : Conductor<IScreen>.Collection.OneActive
{
    protected override void OnViewLoaded(object view) => Show.LoginBox(this.loggedUser);

    public void LoadUserInfoPage() => this.ActivateItem(new UserInfoViewModel(this.loggedUser));

    public void LoadTaskManagerPage() => this.ActivateItem(new TaskManagerViewModel(this.loggedUser, this.repository));

    public void LoadNotificationsPage() => this.ActivateItem(new NotificationsViewModel(this.repository));

    //here, i want to trigger TabControl with two VMs to choose
    public void LoadAddNewTaskPage() => this.ActivateItem(new AddNewTaskViewModel(this.loggedUser, this.repository));
}

EDIT2

I get the context, but i want to achive:

make another Vm class, that will store my User Controls that i want to use in my TabControl:

public class TabControlViewModel 
{
    //how to store two VMs that i will use to my TabControl here?
}

And in MainViewModel:

public class MainWindowViewModel : Conductor<IScreen>.Collection.OneActive
{
    //activate TabControlViewModel that will store AddTaskVM and AddProjectVM
    //this vm will display on my `TabControl` in xaml in `MainWindowView.xaml`
    public void LoadAddNewPage() => this.ActivateItem(new TabControlViewModel(params));
}

Upvotes: 0

Views: 550

Answers (1)

mm8
mm8

Reputation: 169190

Add a TabControl named "Items" to the view:

<TabControl x:Name="Items" />

...and another Button and method that adds the other type of Screen to the Items collection:

public class MainWindowViewModel  : Conductor<IScreen>.Collection.OneActive
{
    public void LoadAddNewTask() => this.ActivateItemAsync(new AddNewTaskViewModel());
    public void LoadAddNewProject() => this.ActivateItemAsync(new AddNewProjectViewModel());
}

Upvotes: 1

Related Questions