CODEWITHSUNDEEP
c#wpfxamltabsmaterial-design
Emre Can Serteli
Emre Can Serteli

Reputation: 389

WPF TabControl with Materials Design (without Dragablz)

So, I installed this "Material Design In XAML" package and it smoothly changed all my controls to be more stylish.

Only the tab control seems to have an old design. I looked it up, but only thing I can find is this "Dragablz Tab Control" that you can drag and tear. Well, I don't want my users to drag or tear my tabs.

So, I'm looking for a way to either skin my tabcontrol like the other controls. Or to make Dragablz tabcontrol un-draggable and un-tearable. What can I do?

Upvotes: 3

Views: 16624

Answers (2)

Mari Faleiros
Mari Faleiros

Reputation: 738

Take a look at MaterialDesignExtensions. They have a style for TabControl, among other things.

  1. First install the Nuget package and add the styles to your App.xaml like in this example
<ResourceDictionary.MergedDictionaries>
    <!-- Other MaterialDesign resource stuff -->
    <ResourceDictionary Source="pack://application:,,,/MaterialDesignExtensions;component/Themes/Generic.xaml" />
    <ResourceDictionary Source="pack://application:,,,/MaterialDesignExtensions;component/Themes/MaterialDesignLightTheme.xaml" />
</ResourceDictionary.MergedDictionaries>
  1. Then, just style your tab control:
<TabControl Style="{StaticResource MaterialDesignTabControl}">
    <TabItem Header="Tab 1">
        <!-- Your tab content -->
    </TabItem>
    <TabItem Header="Tab 2">
        <!-- Your tab content --> 
    </TabItem>
</TabControl>

It looks pretty good:

enter image description here

Upvotes: 7

fruggiero
fruggiero

Reputation: 954

Here an example of a Dragablz tabcontrol un-draggable and un-tearable:

<dragablz:TabablzControl FixedHeaderCount="3">
   <TabItem Header="HELLO">
      <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Hello World</TextBlock>
   </TabItem>
   <TabItem Header="MATERIAL">
      <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Material Design</TextBlock>
   </TabItem>
   <TabItem Header="DESIGN">
      <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Looks Quite Nice</TextBlock>
   </TabItem>                             
</dragablz:TabablzControl>

You can set the FixedHeaderCount attribute value as the number of tabs on your tabscontrol to make these tabs fixed. (As you can see from the source)

/// <summary>
/// Allows a the first adjacent tabs to be fixed (no dragging, and default close button will not show).
/// </summary>
public int FixedHeaderCount
{
   get { return (int) GetValue(FixedHeaderCountProperty); }
   set { SetValue(FixedHeaderCountProperty, value); }
}

Upvotes: 6

Related Questions