I have a WPF user control which includes Modern UI tab. This is the xaml for the usercontrol (the modernui tab is at the end of the code):
<UserControl x:Class="Project.Reports.Navigation_Reports"
xmlns:Project="clr-namespace:Project"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mui="http://firstfloorsoftware.com/ModernUI"
mc:Ignorable="d"
mui:ModernFrame.KeepAlive="False"
d:DesignHeight="575" d:DesignWidth="750" >
<UserControl.Resources>
<Style x:Key="sas" TargetType="mui:ModernTab">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="mui:ModernTab">
<Grid>
<!-- link list -->
<ListBox x:Name="LinkList" ItemsSource="{TemplateBinding Links}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="{DynamicResource HeaderMargin}"
ScrollViewer.HorizontalScrollBarVisibility="Hidden"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
ScrollViewer.CanContentScroll="False"
ScrollViewer.PanningMode="Both">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="Foreground" Value="{DynamicResource MenuText}" />
<Setter Property="FontSize" Value="15"/>
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="TextOptions.TextFormattingMode" Value="Ideal" />
<Setter Property="Foreground" Value="{DynamicResource MenuText}" />
<Setter Property="Margin" Value="12,0,0,0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<ContentPresenter x:Name="Presenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Foreground" Value="{DynamicResource MenuTextHover}"/>
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Foreground" Value="{DynamicResource MenuTextSelected}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding DisplayName, Converter={StaticResource ToUpperConverter}}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<!-- content -->
<mui:ModernFrame Source="{Binding SelectedSource, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" ContentLoader="{TemplateBinding ContentLoader}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<ScrollViewer VerticalAlignment="Top" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Height="637" Margin="0,0,-270,-62">
<Grid VerticalAlignment="Top" HorizontalAlignment="left" Margin="0" Width="1068" Height="627">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1031*"/>
<ColumnDefinition Width="37*"/>
</Grid.ColumnDefinitions>
<mui:ModernTab Name="mTHome" Layout="Tab" SelectedSource="/Reports/LeadTasks/TabLeadTasks_Report.xaml" Margin="0,34,10,0" Height="464" VerticalAlignment= "Top" Style="{StaticResource sas}" Grid.ColumnSpan="2">
<mui:ModernTab.Links>
<mui:Link x:Name="Report1" DisplayName="Report 1" Source="/Reports/Report1/TabReport1_Report.xaml"/>
<mui:Link x:Name="Report2" DisplayName="Report 2" Source="/Reports/Report2/TabReport2_Report.xaml"></mui:Link>
<mui:Link x:Name="Report3" DisplayName="Report 3" Source="/Reports/Report3/TabReport3_Report.xaml"></mui:Link>
<mui:Link x:Name="Report4" DisplayName="Report 4" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
</mui:ModernTab.Links>
</mui:ModernTab>
</Grid>
</ScrollViewer>
</UserControl>
When I add more links, the tabs become invisible so I need to make it multiline, I searched the net about it but found nothing. There is no multiline or wrap property for this control. I tried to make it work through fixed width but it didn't work.
Use a WrapPanel as the ItemsPanelTemplate of the ListBox and get rid of the ScrollViewer as the ModernFrame already has one: