从外部视图模型访问选项卡数据

Question

Basically my application looks like this, i'm using mvvm pattern but i'm still new to it. Within each tab, user can dynamically add tabs as shown in the picture. Within each tabs, there are text boxes and check boxes.

The basic structure is I have PriceViewModel.cs, PriceTab.xaml (usercontrol), and MainWindow.xaml.

In PriceViewModel.cs

public class PriceViewModel : PriceTabItem
{

    private string _PriceLevel;
    private bool _Buy;
    private bool _Sell;
    public string PriceLevel
    {
        get { return _PriceLevel; }
        set
        {
            _PriceLevel = value;
            OnPropertyChanged("PriceLevel");
        }
    }
    public bool Buy
    {
        get { return _Buy; }
        set
        {
            _Buy = value;
            OnPropertyChanged("Buy");
        }
    }
    public bool Sell
    {
        get { return _Sell; }
        set
        {
            _Sell = value;
            OnPropertyChanged("Sell");
        }
    }
    public PriceViewModel()
    {

    }

}

public abstract class PriceTabItem : PropertyChangedBase
{
    public string Title { get; set; }
    public string Header { get; set; }
    public string Content { get; set; }
}

public class PriceTabControl : PropertyChangedBase
{
    public ObservableCollection<PriceTabItem> Tabs { get; set; }
    private PriceTabItem _selectedTab;
    public PriceTabItem SelectedTab
    {
        get { return _selectedTab; }
        set
        {
            _selectedTab = value;
            OnPropertyChanged("SelectedTab");
        }
    }

    public Command AddNewTabCommand { get; set; }

    public PriceTabControl()
    {

        Tabs = new ObservableCollection<PriceTabItem>();
        AddNewTabCommand = new Command(AddNewTab);
    }
    private void AddNewTab()
    {
        var newtab = new PriceViewModel { Title = "Tab #" + (Tabs.Count + 1) };
        Tabs.Add(newtab);
        SelectedTab = newtab;
    }
}

In PriceTab.xaml:

    <UserControl x:Class="MyApp.PriceTab"
         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:MyApp.ViewModels"
         mc:Ignorable="d" 
        d:DesignHeight="300" d:DesignWidth="700">
<UserControl.Resources>
<DataTemplate DataType="{x:Type local:PriceViewModel}">

<Grid>
    <TextBox HorizontalAlignment="Left" Height="19" Text="{Binding PriceLevel}" Margin="101,155,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="81" RenderTransformOrigin="-0.177,0.286"/>
    <CheckBox Content="Buy" IsChecked="{Binding Buy}" HorizontalAlignment="Left" Height="20" Margin="16,109,0,0" VerticalAlignment="Top" Width="73"/>
    <CheckBox Content="Sell" IsChecked="{Binding Sell}" HorizontalAlignment="Left" Height="20" Margin="122,109,0,0" VerticalAlignment="Top" Width="73"/>

</Grid>

</DataTemplate>
</UserControl.Resources>
<DockPanel>

    <Button Command="{Binding AddNewTabCommand}" Content="AddNewTab"
            DockPanel.Dock="Bottom"/>

    <TabControl ItemsSource="{Binding Tabs}"
                SelectedItem="{Binding SelectedTab}"
                DisplayMemberPath="Title">
    </TabControl>
</DockPanel></UserControl>

In PriceTab.xaml.cs:

public partial class HistogramPriceTab : UserControl
{
    public HistogramPriceTab()
    {
        InitializeComponent();
        DataContext = new PriceTabControl();
    }
}

In MainWindow.xaml:

<Window x:Class="MyApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:MyApp"
    mc:Ignorable="d"
    Title="MainWindow" Height="550" Width="850">

    <Grid Width="Auto" Height="Auto">
        <Button Name="SaveButton" Content="Save" HorizontalAlignment="Left" Height="33.16" Margin="701.5,11,0,0" VerticalAlignment="Top" Width="88.5" Click="SaveButton_Click"/>

        <TabControl HorizontalAlignment="Left" Height="485" Margin="-7,28,0,-7.6" VerticalAlignment="Top" Width="850" >
            <TabItem>
                <local:OtherTabs></local:OtherTabs>
            </TabItem>
            <TabItem Name="Price" Header="Price">
                <Grid Background="#FFE5E5E5">
                    <local:PriceTab></local:PriceTab>
                </Grid>
            </TabItem>
            <TabItem>
                <Grid Background="#FFE5E5E5">
                    <local:OtherTabs></local:OtherTabs>
                </Grid>
            </TabItem>
            <TabItem>
                <Grid Background="#FFE5E5E5">
                    <local:OtherTabs></local:OtherTabs>
                </Grid>
            </TabItem>
            <TabItem>
                <Grid Background="#FFE5E5E5">
                    <local:OtherTabs></local:OtherTabs>
                </Grid>
            </TabItem>
            <TabItem>
                <Grid Background="#FFE5E5E5">
                    <local:OtherTabs></local:OtherTabs>
                </Grid>
            </TabItem>
            <TabItem>
                <Grid Background="#FFE5E5E5">
                   <local:OtherTabs></local:OtherTabs>
                </Grid>
            </TabItem>
            <TabItem>
                <Grid Background="#FFE5E5E5">
                    <local:OtherTabs></local:OtherTabs>
                </Grid>
            </TabItem>

        </TabControl>
    </Grid></Window>

So on the top right corner I have a "save" button, when clicked, it will have to get all the inputs from the tabs and do some calculation and charting based on them and show on to the next window. So basically I want the next window to be able to reference all inputs from this window. How do I approach this with the pattern ? Thanks in advance!

Answer 1

Hard writting the xaml don't allow you to create your tabs dynamically.

You should consider creating your tabs by using an ItemControl with its itemSouce bind on a list of your tabs viewmodels in your priceviewmodel. Take a look at this tutorial about itemcontrol

This way when you want to do some business that requires information about all the tabs you can access to them through the list of tabsviewmodels

Answer 2

Figured it out afterwards, so to reference the tabs and all the items inside, see the below code we can have access to the Price Level (as example) textbox using the xaml file accessing the children.

 var pricetabs = (((this.Price.Content as Grid).Children[0] as PriceTab).DataContext as ViewModels.PriceTabControl).Tabs;
 String res = "";
 foreach (ViewModels.PriceViewModel v in pricetabs)
 {
     res += v.PriceLevel.ToString()
 }

Honestly not sure this is the proper way to do it or if it defeats the mvvm structure, but it does the job!