怎么绑定TabControl？答案

【问题标题】：How bind TabControl?怎么绑定TabControl？
【发布时间】：2011-05-30 08:33:38
【问题描述】：

xaml

<controls:TabControl x:Name="tabControlRoom" Grid.Row="1" Grid.Column="1" d:LayoutOverrides="Width, Height" ItemsSource="{Binding}" >
            <controls:TabControl.ItemTemplate>
                <DataTemplate>
                    <controls:TabItem Header="{Binding name}">
                        <StackPanel Margin="10" Orientation="Horizontal">

                        </StackPanel>
                    </controls:TabItem>
                </DataTemplate>
            </controls:TabControl.ItemTemplate>
        </controls:TabControl>

和代码

m_roomContext.Load(m_roomContext.GetRoomQuery());
                tabControlRoom.DataContext = m_roomContext.Rooms;

当我打开这个页面时，所有的元素都出现了，但一秒钟后我只看到一个白屏

错误：

查询的加载操作失败 '得到房间'。无法投射的对象输入“Web.Room”来输入 'System.Windows.Controls.TabItem'/'

【问题讨论】：

嗨，我在使用此参数 d:LayoutOverrides="Width, Height" 重新创建代码时遇到了一些问题，无论如何，您将选项卡的负载放在哪里？
米歇尔，没有。这不是问题。我更新帖子。
m_roomContext.Load() 究竟是做什么的，m_roomContext.Rooms 的类型是什么？我猜，但我认为错误在于背后的代码，而不是绑定。只要选项卡的 datacontext 为空，您就可以看到所有元素，但一旦转换失败，它就会变为空白。

标签： c# wpf xaml data-binding silverlight-4.0

【解决方案1】：

创建转换器

public class SourceToTabItemsConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            try
            {
                var source = (IEnumerable)value;
                if (source != null)
                {
                    var controlTemplate = (ControlTemplate)parameter;

                    var tabItems = new List<TabItem>();

                    foreach (object item in source)
                    {
                        PropertyInfo[] propertyInfos = item.GetType().GetProperties();

                        //тут мы выбираем, то поле которое будет Header. Вы должны сами вводить это значение.
                        var propertyInfo = propertyInfos.First(x => x.Name == "name");

                        string headerText = null;
                        if (propertyInfo != null)
                        {
                            object propValue = propertyInfo.GetValue(item, null);
                            headerText = (propValue ?? string.Empty).ToString();
                        }

                        var tabItem = new TabItem
                                          {
                                              DataContext = item,
                                              Header = headerText,
                                              Content =
                                                  controlTemplate == null
                                                      ? item
                                                      : new ContentControl { Template = controlTemplate }
                                          };

                        tabItems.Add(tabItem);
                    }

                    return tabItems;
                }
                return null;
            }
            catch (Exception)
            {
                return null;
            }
        }

        /// <summary>
        /// ConvertBack method is not supported
        /// </summary>
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotSupportedException("ConvertBack method is not supported");
        }

创建控制模板：

<ControlTemplate x:Key="MyTabItemContentTemplate">
            <StackPanel>
                <TextBlock Text="{Binding Path=name}" />
            </StackPanel>
        </ControlTemplate>

并绑定convert，controltemplate

<controls:TabControl  x:Name="tabControl"
        ItemsSource="{Binding ElementName=tabControl, 
                              Path=DataContext, 
                              Converter={StaticResource ConverterCollectionToTabItems}, 
                              ConverterParameter={StaticResource MyTabItemContentTemplate}}">
        </controls:TabControl>

取自博客binding-tabcontrol

【讨论】：

【解决方案2】：

绑定TabControl的时候有两件事需要完成，一是TabItem的头部内容，二是选中的TabItem的内容，一般是另一个用户控件。

我过去解决这个问题的方法是将 TabControl 的 ItemsSource 绑定到视图模型的集合，并提供两个数据模板，一个提供 TabItem 的标题内容，另一个提供所选 TabItem 的内容，它映射到一个视图。

<Window.Resources>
    <DataTemplate x:Key="ItemTemplate">
        <TextBlock Text="{Binding Title}" />
    </DataTemplate>

    <DataTemplate x:Key="ContentTemplate">
        <local:SampleView />
    </DataTemplate>
</Window.Resources>

<Grid>
    <TabControl 
        ItemsSource="{Binding SampleViewModels}" 
        ItemTemplate="{StaticResource ItemTemplate}"
        ContentTemplate="{StaticResource ContentTemplate}"
        SelectedIndex="0"
        />
</Grid>

【讨论】：