0

我正在开发 MVVM 示例应用程序。我在 VSC# 2010 的解决方案中有 2 个项目。在一个项目（主项目）中，我有一个 mainwindow.xaml，它有两个网格，一个位于右侧，另一个位于左侧。左侧网格有一个列表框，它在 observablecollection<> 的帮助下包含项目。例如电压、I2C 等是项目。我还设置了selecteditem列表框的属性，它给了我selecteditem.

我的主要查询是右侧的网格，它有一个 TABCONTROL，默认添加一个项目（“CONNECT”）。当我从 listBox 中选择“Voltage”项时，我需要在 tabcontrol 中添加 tabitem（例如电压选项卡）。

我的网格中的 TabControl 和 ListBox：

<Grid Grid.Column="0" Name="BoardTabSelect" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <ListBox Name="ButtonPanel" Style="{DynamicResource styleBanner}" ItemsSource="{Binding BoardTabs, Mode=TwoWay}" SelectedItem="{Binding SelectedTab, Mode=TwoWay}" >
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Name="BoardtabChanger" Margin="53,27,0,0" Text="{Binding TabOperation}" />
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Grid>

我的选项卡控件： 

                <Grid Grid.Row="0" >
                    <TabControl Name="ConnectTab" Style="{DynamicResource styleBackground}">
                        <tablocal:CloseableTabItem Header="Connect" x:Name="ConnectMain" MouseDoubleClick="TabItem_MouseDoubleClick"> 
                            <DockPanel>
                                <ListView  Name="listView" Height="460" Margin="0,-77,0,0" ItemsSource="{Binding Products}" SelectedItem="{Binding SelectedProduct, Mode=TwoWay}">
                                    <ListView.View>
                                        <GridView>
                                            <GridViewColumn Width="300" Header="Name" DisplayMemberBinding="{Binding Name}" />
                                            <GridViewColumn Width="283" Header="Connection Status" DisplayMemberBinding="{Binding Connection_Status}" />
                                        </GridView>
                                    </ListView.View>
                                </ListView>

                                <Button Content="Connect" Height="23" HorizontalAlignment="Stretch" Margin="-920,500,0,0" Name="ConnectBtnGrid" VerticalAlignment="Stretch" Width="100" Command="{Binding Path=ConnectCommand}" />
                                <Button Content="Update MSP430" Height="23" HorizontalAlignment="Stretch" Margin="-560,500,0,0" Name="UpdateMSPBtn" VerticalAlignment="Stretch" Width="100" />
                                <Button Content="Disconnect" Height="23" HorizontalAlignment="Stretch" Margin="-220,500,0,0" Name="DisconnectBtn" VerticalAlignment="Stretch" Width="100" Command="{Binding Path=DisconnectCommand}" />
                            </DockPanel>
                       </tablocal:CloseableTabItem>
                    </TabControl>
                </Grid>

我的 ViewModel 类在这里：

public List<Product> m_Products;
    public ObservableCollection<Product> m_BoardTabs;        

    public ProductViewModel()
    {           
        m_Products = new List<Product>()
        {                
            new Product() {Name = "Bavaria", Connection_Status = "Disconnected"},
            new Product() {Name = "Redhook", Connection_Status = "Disconnected"},                
        };

        m_BoardTabs = new ObservableCollection<Product>()
        {
            new Product() {TabOperation = "Connect"}              
        };
    }                      

    public List<Product> Products
    {
        get
        {
            return m_Products;
        }

        set
        {
            m_Products = value;
        }
    }

    public ObservableCollection<Product> BoardTabs
    {
        get
        {
            return m_BoardTabs;
        }

        set
        {
            m_BoardTabs = value;
        }
    }

    /// <summary>
    /// get:
    /// set:   
    /// </summary>
    private Product m_SelectedItem;
    public Product SelectedProduct
    {
        get
        {
            return m_SelectedItem;
        }

        set
        {
            m_SelectedItem = value;                
            NotifyPropertyChanged("SelectedProduct");
        }
    }

    private Product m_SelectedTab;
    public Product SelectedTab
    {
        get
        {
            return m_SelectedTab;
        }

        set
        {
            m_SelectedTab = value;
            NotifyPropertyChanged("SelectedTab");
            onTabChanged();
        }
    }        

    void onTabChanged()
    {
        if (SelectedTab.TabOperation == "Voltage")
        {
            //Add tab here
        }
    }

    public Product value { get; set; }

    /// <summary>
    /// get:
    /// set:   
    /// </summary>
    private ICommand mUpdater;
    public ICommand ConnectCommand
    {
        get
        {
            if (mUpdater == null)
                mUpdater = new DelegateCommand(new Action(SaveExecuted), new Func<bool>(SaveCanExecute));

            return mUpdater;
        }
        set
        {
            mUpdater = value;                
        }
    }

    public bool SaveCanExecute()
    {
        return true;
    }     

    public void SaveExecuted()
    {
        if (SelectedProduct.Connection_Status == "Disconnected" && SelectedProduct.Name == "Bavaria")
        {
            SelectedProduct.Connection_Status = "Connected";
            m_BoardTabs.Add(new Product() { TabOperation = "I2C" });
            m_BoardTabs.Add(new Product() { TabOperation = "Voltage" });
            m_BoardTabs.Add(new Product() { TabOperation = "Clock" });
            m_BoardTabs.Add(new Product() { TabOperation = "Codec" });
            m_BoardTabs.Add(new Product() { TabOperation = "EEPROM" });                             
        }

        else if (SelectedProduct.Connection_Status == "Disconnected" && SelectedProduct.Name == "Redhook")
        {
            SelectedProduct.Connection_Status = "Connected";

            m_BoardTabs.Add(new Product() { TabOperation = "I2C" });
            m_BoardTabs.Add(new Product() { TabOperation = "Voltage" });
            m_BoardTabs.Add(new Product() { TabOperation = "Clock" });
            m_BoardTabs.Add(new Product() { TabOperation = "Codec" });
            m_BoardTabs.Add(new Product() { TabOperation = "EEPROM" });
            m_BoardTabs.Add(new Product() { TabOperation = "PCM Route" });
            m_BoardTabs.Add(new Product() { TabOperation = "PCM Route #" });
            m_BoardTabs.Add(new Product() { TabOperation = "PCM Gen" });
            m_BoardTabs.Add(new Product() { TabOperation = "SD Card" });
            m_BoardTabs.Add(new Product() { TabOperation = "FPGA" });
            m_BoardTabs.Add(new Product() { TabOperation = "PCMPDM" });
            m_BoardTabs.Add(new Product() { TabOperation = "Data Gen" });           
        }
    }

请注意，我想在控件中添加的 tabitem “VOLTAGE”是我在开头提到的另一个项目的一部分。它有自己的视图、视图模型和模型类。以下是我要添加的视图 in.xaml 文件：

<Grid Name="VoltageTab" Height="572" Width="590" DataContext="{StaticResource VoltageViewModel}" >
    // Some UI componments which shud be placed inside VOLTAGE Tab on selecting Voltage from ListBox.
</Grid>

正如您在上面看到的，我希望将上面的视图放置在电压选项卡中，一旦用户从列表框中单击电压项，该选项卡就会创建。

4

2 回答 2

0

TabControl 有一个 ItemsSource 属性。它可以绑定到 ViewModel 中的可观察对象集合。

除此之外，在 observable 集合中使用的对象必须有一个关联的 DataTemplate，它应该是一个 TabItem。

因此，当您使用 DataTemplate 将对象添加到充当 TabControl 的源的 ObservableCollection 时，新的 TabItem 将添加到 TabControl。

还要确保在 observablecollection 中有一个条目/对象用于初始 tabitem。

您可以通过添加适当的命名空间/引用来引用 DataTemplate 中其他项目的 TabItem

这是 ViewModel 类

 public class TabItemDetail
{
    public string Header { get; set; }
}

public class MainWindowViewModel : INotifyPropertyChanged
{
    #region Members

    List<string> _dataSource = null;
    string _selectedDataSource = null;
    ObservableCollection<TabItemDetail> _tabItems = null;

    #endregion

    #region INotifyPropertyChanged

    public event PropertyChangedEventHandler PropertyChanged;

    private void OnPropertyChanged(string propertyName)
    {
        if (this.PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    #endregion

    public ObservableCollection<TabItemDetail> Items
    {
        get
        {
            if (_tabItems == null)
            {
                _tabItems = GetTabItems();
            }

            return _tabItems;
        }
    }

    public List<string> DataSource
    {
        get
        {
            if (_dataSource == null)
            {
                _dataSource = GetDataSource();
            }

            return _dataSource;
        }
    }

    public string SelectedDataSource
    {
        get { return _selectedDataSource; }
        set
        {
            if (_selectedDataSource == value)
                return;

            _selectedDataSource = value;

            AddItemsToTab(value);

            OnPropertyChanged("SelectedDataSource");
        }
    }


    #region Private methods

    private void AddItemsToTab(string selectedItem)
    {
        if (_tabItems != null && _tabItems.Count > 0)
        {
            var query = from item in _tabItems
                        where item.Header == selectedItem
                        select item;

            if (query.Count() == 1)
                return;
            else
                _tabItems.Add(new TabItemDetail { Header = selectedItem });
        }
    }

    private List<string> GetDataSource()
    {
        List<string> source = new List<string>();

        source.Add("Default tab");
        source.Add("Voltage Tab");

        return source;
    }

    private ObservableCollection<TabItemDetail> GetTabItems()
    {
        ObservableCollection<TabItemDetail> newSource = new ObservableCollection<TabItemDetail>();
        newSource.Add(new TabItemDetail { Header = "Connect" });

        return newSource;
    }

    #endregion
}

这是视图

  <Window x:Class="SampleApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:SampleApp"

    Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
    <local:MainWindowViewModel/>
</Window.DataContext>
<Window.Resources>
    <DataTemplate DataType="{x:Type local:TabItemDetail}">
        <TabItem Header="{Binding Header}"/>
    </DataTemplate>
</Window.Resources>
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="110"/>
        <ColumnDefinition Width="5"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <ListBox Grid.Column="0" ItemsSource="{Binding DataSource}" SelectedItem="{Binding SelectedDataSource}"/>

    <TabControl Grid.Column="2" local:MySampleAttachedProperty.Header="{Binding SelectedDataSource}">
        <TabItem Header ="Connect" />
    </TabControl>
</Grid>

这是新的附加属性类，它可以解决问题

public class MySampleAttachedProperty
{
    public static string GetHeader(DependencyObject obj)
    {
        return (string)obj.GetValue(HeaderProperty);
    }

    public static void SetHeader(DependencyObject obj, string value)
    {
        obj.SetValue(HeaderProperty, value);
    }

    // Using a DependencyProperty as the backing store for Header.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty HeaderProperty =
        DependencyProperty.RegisterAttached("Header", typeof(string), typeof(MySampleAttachedProperty), new UIPropertyMetadata(CallBack));


    private static void CallBack(object sender, DependencyPropertyChangedEventArgs args)
    {
        TabControl tabControl = sender as TabControl;
        TabItem newTab = new TabItem { Header = args.NewValue };
        tabControl.Items.Add(newTab);
        newTab.Focus();
    }
}
于 2012-09-21T06:14:03.400 回答
0

tabcontrol 的数据模板不应包含 tabitem。tabcontrol 正在为绑定集合中的每个元素生成一个 tabitem。要启用与 tabitem 标题的数据绑定，请设置 tabcontrol 的 itemcontainerstyle 属性。这是一个小样本：

风景：

<Window x:Class="WpfLab.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*"/>
        <ColumnDefinition Width="0.5*"/>
    </Grid.ColumnDefinitions>
    <TabControl ItemsSource="{Binding ProductTabs}">
        <TabControl.ItemContainerStyle>
            <Style TargetType="TabItem">
                <Setter Property="Header" Value="{Binding Header}"/>
            </Style>
        </TabControl.ItemContainerStyle>
    </TabControl>
    <ListBox Grid.Column="1" ItemsSource="{Binding Products}" SelectedItem="{Binding SelectedProduct}"/>
</Grid>

视图模型

using System.Collections.ObjectModel;
using System.Linq;
using System.Windows;

namespace WpfLab
{
    public partial class MainWindow : Window
    {
        Product selectProduct;

        public MainWindow()
        {
            InitializeComponent();

            Products = new ObservableCollection<Product>();
            ProductTabs = new ObservableCollection<Product>();

            var products = Enumerable.Range(0, 10).Select(i => new Product { Header = "Product " + i });
            foreach (var p in products)
                Products.Add(p);

            DataContext = this;
        }

        public Product SelectedProduct 
        {
            get { return this.selectProduct; }

            set
            {
                UpdateTabs(this.selectProduct, value);
                this.selectProduct = value;
            }
        }

        public ObservableCollection<Product> Products { get; private set; }

        public ObservableCollection<Product> ProductTabs { get; private set; }

        void UpdateTabs(Product old, Product @new)
        {
            if (ProductTabs.Any(p => p == old))
                ProductTabs.Remove(old);

            ProductTabs.Add(@new);
        }
    }

    public class Product
    {
        public string Header { get; set; }

        public override string ToString()
        {
            return Header;
        }
    }
}
于 2012-09-21T10:03:50.090 回答