Home Forums WPF controls Xceed Toolkit Plus for WPF MaterialTabControl – DataTemplate Trouble

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Arawson
    Post count: 3
    #43869 |

    I am creating a project where I define a series of UserControls that will be inserted at runtime into a TabControl. If I was doing this with the standard control, I would do it like this:

    <TabControl Grid.Row="1" ItemsSource="{Binding TabControls}" SelectedItem="{Binding SelectedTab}" IsSynchronizedWithCurrentItem="True" >
                    <DataTemplate DataType="{x:Type vm:ViewModel1}">
                        <vs:UserControl1 />
                    <DataTemplate DataType="{x:Type vm:ViewModel2}">
                        <vs:UserControl2 />
                    <Style TargetType="TabItem">
                        <Setter Property="Header" Value="{Binding Header}" />

    However, when I replace the normal TabControl with the MaterialsTabControl, I get the following error when inserting any tabs after the first one.

    Cannot animate the ‘Width’ property on a ‘System.Windows.Controls.Border’ using a ‘System.Windows.Media.Animation.DoubleAnimation’. For details see the inner exception.

    Inner Exception: ‘System.Windows.Media.Animation.DoubleAnimation’ cannot use default origin value of ‘NaN’.

    I’m guessing that it’s because I’ve overwrote the ItemContainerStyle, but I can’t seem to figure out what I need to change to have it inherit the MaterialTabItem style.

    Fawzi [Xceed]
    Post count: 722


    I replaced the TabControl with a MaterialTabControls and the TabItem with MaterialTabItem in the XAML.

    I was able to reproduce the issue if the “SelectedTab” property is not set. When set, I don’t have the crash.

    This issue should be fixed in v3.2 Plus.

    Here’s how you can fix this.

    1) Go in file
    Xceed.Wpf.Toolkit/MaterialTabControls/MaterialTabs/Implementation/MaterialTabControl.cs :
    a) Add new method :
    private void InitializeInkBar()
    if( this.SelectedItem == null )

    var materialTabItem = this.ItemContainerGenerator.ContainerFromItem( this.SelectedItem ) as MaterialTabItem;
    bool isTabsTopOrBottom = ( ( this.TabStripPlacement == Dock.Top ) || ( this.TabStripPlacement == Dock.Bottom ) );

    if( isTabsTopOrBottom )
    Canvas.SetLeft( _inkBar, this.GetMaterialTabLength( 0, this.SelectedIndex, true ) );
    if( materialTabItem != null )
    _inkBar.Width = materialTabItem.ActualWidth;
    Canvas.SetTop( _inkBar, this.GetMaterialTabLength( 0, this.SelectedIndex, false ) );

    if( materialTabItem != null )
    _inkBar.Height = materialTabItem.ActualHeight;

    b) Go in method “MaterialTabControl_Loaded” and replace all its content with :

    c) Go in method “OnSelectionChanged” and replace “this.AnimateInkBar( lastSelectedIndex );” with :
    if( lastSelectedIndex == -1 )
    this.AnimateInkBar( lastSelectedIndex );

    2) Another issue has been seen. When MaterialTabControl.SelectedItem is null, the first MaterialTabItem has a null Foreground. This issue will be fixed in v3.2 Plus as well.

    To fix this you can go in file :
    In method “OnUnselected”
    Add the check “if( this.IsLoaded )” around the call to “this.SetForeground( _defaultForeground, false );”

    Diane [Xceed]
    Post count: 1353

    The following issues were fixed in the latest version:

    MaterialTabControl (v3.2 Plus):
    – Starting with a null “SelectedItem” and clicking on a new MaterialTabItem will no longer cause a crash.
    – When the “SelectedItem” is null, the first MaterialTabItem will no longer have a null Foreground.

    Download Link: http://forums.xceed.com/latest-xceed-toolkit-plus-for-wpf

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.