Batman Batman - 1 month ago 25
C# Question

WPF Modern UI: Changing the width of links

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

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>
Comments