WPF Modern UI: Changing the width of links

Question

In my application, I'm trying to change the width of links in a ModernTab. I tried changing the Width property for the ModernTab to 300, and it currently looks like this: http://screencast.com/t/PoBGkizX

The links are all truncated, so I'm looking for a way lengthen the actual links.

Any ideas?

Answer 1

Add style to your ModernTab

            <mui:ModernTab.Style>
            <Style>
                <Style.Triggers>
                    <Trigger Property="mui:ModernTab.Layout" Value="List">
                        <Trigger.Setters>
                            <Setter Property="Control.Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type mui:ModernTab}">
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="Auto"/>
                                                <ColumnDefinition Width="9"/>
                                                <ColumnDefinition/>
                                            </Grid.ColumnDefinitions>
                                            <ListBox x:Name="LinkList" ItemsSource="{TemplateBinding mui:ModernTab.Links}"
                       ScrollViewer.HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}">
                                                <ItemsControl.ItemTemplate>
                                                    <DataTemplate>
                                                        <TextBlock Margin="10,2,2,2" FontSize="{DynamicResource SmallFontSize}" TextTrimming="CharacterEllipsis"
                               Text="{Binding DisplayName, Converter={StaticResource ToUpperConverter}}"/>
                                                    </DataTemplate>
                                                </ItemsControl.ItemTemplate>
                                            </ListBox>
                                            <Rectangle Grid.Column="1" Fill="{DynamicResource SeparatorBackground}" Width="1" HorizontalAlignment="Center"
                         VerticalAlignment="Stretch"/>
                                            <mui:ModernFrame Grid.Column="2" ContentLoader="{TemplateBinding mui:ModernTab.ContentLoader}"
                                    Margin="32,0,0,0"
                                    Source="{Binding SelectedSource, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"/>
                                        </Grid>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Trigger.Setters>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </mui:ModernTab.Style>

Answer 2

You can specify the ListWidth property on your ModernTab without setting a style:

<mui:ModernTab Name="tabReportsList" Layout="List" ListWidth="300" SelectedSource="default_page.xaml">
        <mui:ModernTab.Links>
            <mui:Link DisplayName="long link caption 1" Source="page_1.xaml" />
            <mui:Link DisplayName="long link caption 2" Source="page_2.xaml" />
        </mui:ModernTab.Links>
    </mui:ModernTab>