or
| <Window x:Class="WpfApplication6.MainWindow" |
| xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" |
| xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
| xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" |
| Title="MainWindow" Height="350" Width="525"> |
| <DockPanel> |
| <telerik:RadButton Content="{Binding ElementName=_slider, Path=Value}" ContentStringFormat="{}{0:p0}" VerticalAlignment="Center" HorizontalContentAlignment="Center" MinWidth="50" BorderBrush="Transparent" BorderThickness="0" Background="Transparent"/> |
| <telerik:RadSlider x:Name="_slider" HandlesVisibility="Visible" VerticalAlignment="Center" Minimum="0.1" EnableSideTicks="True" TickFrequency="0.1" IsSnapToTickEnabled="True" Maximum="4" Value="1"/> |
| </DockPanel> |
| </Window> |
| using System; |
| using System.Collections.ObjectModel; |
| using System.Linq; |
| using System.Text; |
| using System.Windows.Media.Imaging; |
| namespace NestedTabControlBinding |
| { |
| public interface IGroup |
| { |
| string Name { get; set; } |
| BitmapImage Image { get; set; } |
| ObservableCollection<IProduct> Products { get; } |
| IProduct SelectedProduct { get; set; } |
| } |
| public interface IProduct |
| { |
| string BaseModel { get; set; } |
| BitmapImage Image { get; set; } |
| ObservableCollection<IConfiguration> Configurations { get; } |
| IConfiguration SelectedConfiguration { get; set; } |
| } |
| public interface IConfiguration |
| { |
| string Name { get; set; } |
| string Voltage { get; set; } |
| string Frequency { get; set; } |
| } |
| public class Group : IGroup |
| { |
| private const string _imagePath = "pack://application:,,,/NestedTabControlBinding;Component/Resources/Images/{0}"; |
| private string _name; |
| BitmapImage _image; |
| private ObservableCollection<IProduct> _products = new ObservableCollection<IProduct>(); |
| private IProduct _selectedProduct; |
| public Group(string name, string path) |
| { |
| Name = name; |
| Image = new BitmapImage(new Uri(path)); |
| Products.Add(new CMyProduct(Name + " Model 1", string.Format(_imagePath, "Model1.jpg"))); |
| Products.Add(new CMyProduct(Name + " Model 2", string.Format(_imagePath, "Model2.jpg"))); |
| Products.Add(new CMyProduct(Name + " Model 3", string.Format(_imagePath, "Model3.jpg"))); |
| } |
| #region IGroup Members |
| public string Name |
| { |
| get { return _name; } |
| set { _name = value; } |
| } |
| public BitmapImage Image |
| { |
| get { return _image; } |
| set { _image = value; } |
| } |
| public ObservableCollection<IProduct> Products |
| { |
| get { return _products; } |
| } |
| public IProduct SelectedProduct |
| { |
| get { return _selectedProduct; } |
| set { _selectedProduct = value; } |
| } |
| #endregion |
| } |
| public abstract class ProductBase : IProduct |
| { |
| private string _baseModel; |
| BitmapImage _image; |
| private ObservableCollection<IConfiguration> _configurations = new ObservableCollection<IConfiguration>(); |
| private IConfiguration _selectedConfiguration; |
| public ProductBase(string baseModel, string path) |
| { |
| BaseModel = baseModel; |
| Image = new BitmapImage(new Uri(path)); |
| } |
| #region IProduct Members |
| public string BaseModel |
| { |
| get { return _baseModel; } |
| set { _baseModel = value; } |
| } |
| public BitmapImage Image |
| { |
| get { return _image; } |
| set { _image = value; } |
| } |
| public abstract string Description { get; } |
| public System.Collections.ObjectModel.ObservableCollection<IConfiguration> Configurations |
| { |
| get { return _configurations; } |
| } |
| public IConfiguration SelectedConfiguration |
| { |
| get { return _selectedConfiguration; } |
| set { _selectedConfiguration = value; } |
| } |
| #endregion |
| } |
| public class Configuration : IConfiguration |
| { |
| private string _Name; |
| private string _Voltage; |
| private string _Frequency; |
| public Configuration(string name, string voltage, string frequency) |
| { |
| Name = name; |
| Voltage = voltage; |
| Frequency = frequency; |
| } |
| #region IConfiguration Members |
| public string Name |
| { |
| get { return _Name; } |
| set { _Name = value; } |
| } |
| public string Voltage |
| { |
| get { return _Voltage; } |
| set { _Voltage = value; } |
| } |
| public string Frequency |
| { |
| get { return _Frequency; } |
| set { _Frequency = value; } |
| } |
| #endregion |
| } |
| public class CMyProduct : ProductBase |
| { |
| private const string _description = "This product has a base model of "; |
| public CMyProduct(string baseModel, string imagePath) |
| : base(baseModel, imagePath) |
| { |
| Configurations.Add(new Configuration(BaseModel + "-1", "110VAC", "50Hz")); |
| Configurations.Add(new Configuration(BaseModel + "-2", "220VAC", "60Hz")); |
| Configurations.Add(new Configuration(BaseModel + "-3", "110VAC", "50Hz")); |
| Configurations.Add(new Configuration(BaseModel + "-4", "220VAC", "50Hz")); |
| Configurations.Add(new Configuration(BaseModel + "-5", "110VAC", "60Hz")); |
| } |
| public override string Description |
| { |
| get { return _description + BaseModel + "."; } |
| } |
| } |
| public class GroupsViewModel |
| { |
| private const string _imagePath = "pack://application:,,,/NestedTabControlBinding;Component/Resources/Images/{0}"; |
| private ObservableCollection<IGroup> _groups = new ObservableCollection<IGroup>(); |
| private IGroup _selectedGroup; |
| public GroupsViewModel() |
| { |
| Groups.Add(new Group("MetrologyWells", string.Format(_imagePath,"MetWell.jpg"))); |
| Groups.Add(new Group("DryWells", string.Format(_imagePath, "DryWell.jpg"))); |
| Groups.Add(new Group("Baths", string.Format(_imagePath, "Bath.jpg"))); |
| } |
| public ObservableCollection<IGroup> Groups |
| { |
| get { return _groups; } |
| } |
| public IGroup SelectedGroup |
| { |
| get { return _selectedGroup; } |
| set { _selectedGroup = value; } |
| } |
| } |
| } |
| <Window x:Class="NestedTabControlBinding.Window1" |
| xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" |
| xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
| xmlns:diagnostics="clr-namespace:System.Diagnostics;assembly=WindowsBase" |
| xmlns:vm="clr-namespace:NestedTabControlBinding" |
| xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation" |
| xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" |
| Title="Nested TabControl Binding Example" Height="480" Width="800"> |
| <Window.Resources> |
| <vm:GroupsViewModel x:Key="GroupsDataSource"/> |
| </Window.Resources> |
| <Grid x:Name="grid" DataContext="{StaticResource GroupsDataSource}"> |
| <Grid.RowDefinitions> |
| <RowDefinition Height="40" /> |
| <RowDefinition Height="385*" /> |
| <RowDefinition Height="100*" /> |
| </Grid.RowDefinitions> |
| <StackPanel Grid.Row="1" Orientation="Vertical" > |
| <telerikNavigation:RadTabControl x:Name="tabGroups" MinWidth="630" MinHeight="200" MaxWidth="1024" MaxHeight="600" Margin="5" TabStripPlacement="Top" |
| VerticalAlignment="Stretch" HorizontalAlignment="Stretch" telerik:StyleManager.Theme="Vista" |
| SelectedItem="{Binding Path=SelectedGroup, Mode=TwoWay}" |
| SelectedIndex="{Binding Path=SelectedIndex, Mode=TwoWay}" |
| ItemsSource="{Binding Path=Groups}" |
| SelectionChanged="tabGroups_SelectionChanged"> |
| <telerikNavigation:RadTabControl.ItemContainerStyle> |
| <Style TargetType="telerikNavigation:RadTabItem"> |
| <Setter Property="HeaderTemplate"> |
| <Setter.Value> |
| <DataTemplate> |
| <StackPanel Orientation="Horizontal"> |
| <Image Source="{Binding Path=Image}" Margin="3" Height="32" Width="32"/> |
| <TextBlock Text="{Binding Path=Name}" Foreground="Black" Margin="3" VerticalAlignment="Center"/> |
| </StackPanel> |
| </DataTemplate> |
| </Setter.Value> |
| </Setter> |
| <Setter Property="ContentTemplate"> |
| <Setter.Value> |
| <DataTemplate> |
| <StackPanel Orientation="Vertical"> |
| <TextBlock Margin="10" FontSize="14" FontWeight="Bold">Choose a product from the tabs below:</TextBlock> |
| <telerikNavigation:RadTabControl x:Name="tabProducts" MinWidth="620" MinHeight="200" Margin="5" TabStripPlacement="Left" |
| VerticalAlignment="Stretch" HorizontalAlignment="Stretch" telerik:StyleManager.Theme="Vista" |
| SelectedItem="{Binding Path=SelectedProduct, Mode=TwoWay}" |
| SelectedIndex="{Binding Path=SelectedIndex, Mode=TwoWay}" |
| ItemsSource="{Binding Path=Products}" |
| SelectionChanged="tabProducts_SelectionChanged"> |
| <telerikNavigation:RadTabControl.ItemContainerStyle> |
| <Style TargetType="telerikNavigation:RadTabItem"> |
| <Setter Property="HeaderTemplate"> |
| <Setter.Value> |
| <DataTemplate> |
| <StackPanel Orientation="Vertical" > |
| <TextBlock Text="{Binding Path=BaseModel}" Margin="3" VerticalAlignment="Center"/> |
| <Image Source="{Binding Path=Image}" Margin="3" Height="32" Width="32"/> |
| </StackPanel> |
| </DataTemplate> |
| </Setter.Value> |
| </Setter> |
| <Setter Property="ContentTemplate"> |
| <Setter.Value> |
| <DataTemplate> |
| <StackPanel Margin="5" Orientation="Vertical"> |
| <StackPanel Orientation="Horizontal" > |
| <TextBlock Margin="2" FontWeight="Bold" FontSize="14" Text="Model"/> |
| <TextBlock Margin="2" FontWeight="Bold" FontSize="14" Text="{Binding Path=BaseModel}"/> |
| <TextBlock Margin="2" FontWeight="Bold" FontSize="14" Text="configurations: "/> |
| <ComboBox Margin="5" MinWidth="150" ItemsSource="{Binding Path=Configurations}" DisplayMemberPath="Name" SelectedItem="{Binding Path=SelectedConfiguration}"></ComboBox> |
| </StackPanel> |
| <StackPanel Orientation="Horizontal"> |
| <TextBlock Margin="4" Text="Voltage: "/> |
| <TextBlock Margin="4" FontWeight="Bold" Text="{Binding Path=SelectedConfiguration.Voltage}" MinWidth="70"/> |
| <TextBlock Margin="4" Text="Frequency: "/> |
| <TextBlock Margin="4" FontWeight="Bold" Text="{Binding Path=SelectedConfiguration.Frequency}" MinWidth="70"/> |
| </StackPanel> |
| <TextBlock Margin="10" Text="{Binding Path=Description}"/> |
| </StackPanel> |
| </DataTemplate> |
| </Setter.Value> |
| </Setter> |
| </Style> |
| </telerikNavigation:RadTabControl.ItemContainerStyle> |
| </telerikNavigation:RadTabControl> |
| </StackPanel> |
| </DataTemplate> |
| </Setter.Value> |
| </Setter> |
| </Style> |
| </telerikNavigation:RadTabControl.ItemContainerStyle> |
| </telerikNavigation:RadTabControl> |
| </StackPanel> |
| </Grid> |
| </Window> |
| using System; |
| using System.Collections.Generic; |
| using System.Linq; |
| using System.Text; |
| using System.Windows; |
| using System.Windows.Controls; |
| using System.Windows.Data; |
| using System.Windows.Documents; |
| using System.Windows.Input; |
| using System.Windows.Media; |
| using System.Windows.Media.Imaging; |
| using System.Windows.Navigation; |
| using System.Windows.Shapes; |
| using Telerik.Windows.Controls; |
| namespace NestedTabControlBinding |
| { |
| /// <summary> |
| /// Interaction logic for Window1.xaml |
| /// </summary> |
| public partial class Window1 : Window |
| { |
| public Window1() |
| { |
| InitializeComponent(); |
| } |
| private void tabGroups_SelectionChanged(object sender, RoutedEventArgs e) |
| { |
| RadTabControl Tab = (RadTabControl)sender; |
| if (Tab.SelectedItem != null) |
| { |
| IGroup Group = (IGroup)Tab.SelectedItem; |
| Console.WriteLine("Selected group: " + Group.Name); |
| } |
| else |
| { |
| Console.WriteLine("Selected group: NONE"); |
| } |
| } |
| private void tabProducts_SelectionChanged(object sender, RoutedEventArgs e) |
| { |
| RadTabControl Tab = (RadTabControl)sender; |
| if (Tab.SelectedItem != null) |
| { |
| IProduct Product = (IProduct)Tab.SelectedItem; |
| Console.WriteLine("Selected product: " + Product.BaseModel); |
| } |
| else |
| { |
| Console.WriteLine("Selected product: NONE"); |
| } |
| } |
| } |
| } |