How to bind the header image of TabItemExt?
Users can add the collection of tab items containing Header and Image property to TabControlExt. It can be achieved by binding the collection to ItemSource property of TabControlExt. Here we have binded the BitMapImage to image source of TabItem collection properties. The following codes demonstrates the same.
Code Example : [C#]
Model.cs:
class Model { private string header; public string Header { get { return header; } set { header = value; } } private ImageSource image; public ImageSource Image { get { return image; } set { image = value; } } public Model() { } } |
ViewModel.cs :
class ViewModel
{
private ObservableCollection<Model> tabItems;
public ObservableCollection<Model> TabItems
{
get { return tabItems; }
set
{
tabItems = value;
}
}
public ViewModel()
{
tabItems = new ObservableCollection<Model>();
PopulateCollection();
}
private void PopulateCollection()
{
String name = AppDomain.CurrentDomain.BaseDirectory;
String changePath = Path.GetFullPath(Path.Combine(name, @"..\..\"));
Model model = new Model() { Header = "tab1", Image = new BitmapImage(new Uri(changePath + "star.png")) };
Model model1 = new Model() { Header = "tab2", Image = new BitmapImage(new Uri(changePath + "star1.png")) };
Model model2 = new Model() { Header = "tab3", Image = new BitmapImage(new Uri(changePath + "star2.png")) };
tabItems.Add(model);
tabItems.Add(model1);
tabItems.Add(model2);
}
}
The collection of tab items containing the Header and Image property has been binded and updated in the ItemContainerStyle of TabControlExt.
Code Example : [Xaml]
<Window.DataContext>
<local:ViewModel/>
</Window.DataContext>
<Grid>
<syncfusion:TabControlExt HorizontalAlignment="Left" Height="272" Margin="82,64,0,0" ItemsSource="{Binding TabItems}" VerticalAlignment="Top" Width="607">
<syncfusion:TabControlExt.ItemContainerStyle>
<Style TargetType="syncfusion:TabItemExt">
<Setter Property="MinWidth" Value="70"/>
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<Grid Width="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="15"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="2" Text="{Binding Header, Mode=TwoWay}" />
<Image Source="{Binding Image, Mode=TwoWay}" />
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</syncfusion:TabControlExt.ItemContainerStyle>
<syncfusion:TabControlExt.ContentTemplate>
<DataTemplate>
<TextBlock Text="TabItems with image" />
</DataTemplate>
</syncfusion:TabControlExt.ContentTemplate>
</syncfusion:TabControlExt>
</Grid>
Screenshot
Sample: TabControlExtSample
