Создание динамического TabControl в Silverlight - PullRequest
Новая
       22

Создание динамического TabControl в Silverlight

0 голосов
/ 21 июля 2010

Я хотел бы создать TabControl в Silverlight, который управляется набором объектов. Я покажу код ОЧЕНЬ базовой установки, которую я пытаюсь создать в качестве прототипа.

MainPage.xaml 

<UserControl x:Class="DataDrivenTabControl.MainPage"
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:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
xmlns:local="clr-namespace:DataDrivenTabControl"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

<UserControl.DataContext>
    <local:MainPage_ViewModel/>
</UserControl.DataContext>

<StackPanel>
    <controls:TabControl>
        <!-- What do I need to do here for a Template? -->
    </controls:TabControl>
</StackPanel>

MainPage_ViewModel.cs 

public class MainPage_ViewModel : Base_ViewModel
{
    public MainPage_ViewModel()
    {
        PopulateCollectionOfTabs();
    }

    public ObservableCollection<TabItem_DataViewModel> CollectionOfTabs
    {
        get { return collectionOfTabs; }
        set
        {
            if (collectionOfTabs != value)
            {
                collectionOfTabs = value;
                OnPropertyChanged("CollectionOfTabs");
            }
        }
    }
    private ObservableCollection<TabItem_DataViewModel> collectionOfTabs = new ObservableCollection<TabItem_DataViewModel>();

    private void PopulateCollectionOfTabs()
    {
        this.CollectionOfTabs.Add(
            new TabItem_DataViewModel()
            {
                TabDescription = "Tab 1",
                ButtonDescription = "Button for Tab 1"
            });

        this.CollectionOfTabs.Add(
            new TabItem_DataViewModel()
            {
                TabDescription = "Tab 2",
                ButtonDescription = "Button for Tab 2"
            });
    }
}

TabItem_DataViewModel.cs 

public class TabItem_DataViewModel : Base_ViewModel
{
    public string TabDescription
    {
        get { return tabDescription; }
        set
        {
            if (tabDescription != value)
            {
                tabDescription = value;
                OnPropertyChanged("TabDescription");
            }
        }
    }
    private string tabDescription = string.Empty;

    public string ButtonDescription
    {
        get { return buttonDescription; }
        set
        {
            if (buttonDescription != value)
            {
                buttonDescription = value;
                OnPropertyChanged("ButtonDescription");
            }
        }
    }
    private string buttonDescription = string.Empty;
}

Все, что я действительно пытаюсь сделать в этом примере, это заставить TabControl отображаться с динамическим списком вкладок, которые будут связаны с коллекцией («Tab 1» и «Tab 2» в заголовке для текущая реализация). При нажатии на вкладку может быть кнопка (для простоты), в которой содержимое кнопки будет привязано к ButtonDescription в TabItem_DataViewModel. Это очень просто, но если я смогу заставить это работать, я наверняка смогу реализовать остальную часть моего решения.

Я уверен, что это должно быть сделано с помощью шаблонов в TabControl, но я просто оставил его пустым, надеясь, что кто-то сможет указать мне правильное направление.

Любая помощь будет принята с благодарностью, спасибо!

1 Ответ

0 голосов
/ 22 июля 2010

Мне удалось заставить его работать, как и ожидалось, с помощью Telerik RadTabControl, как показано ниже.Я использовал версию Telerik, поскольку ItemSource - это IEnumerable, а не коллекция TabItems.

<telerikNavigation:RadTabControl ItemsSource="{Binding CollectionOfTabs}">
        <telerikNavigation:RadTabControl.ItemContainerStyle>
            <Style TargetType="telerikNavigation:RadTabItem">
                <Setter Property="HeaderTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Text="{Binding TabDescription}"/>
                            </StackPanel>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Button Content="{Binding ButtonDescription}" Width="100" HorizontalAlignment="Center"/>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </telerikNavigation:RadTabControl.ItemContainerStyle>
    </telerikNavigation:RadTabControl>
...