Question

在我的应用程序中，我正在尝试更改ModernTab中链接的宽度。我尝试将ModernTab的Width属性更改为300，目前看起来像这样：http://screencast.com/t/PoBGkizX

这些链接都被截断了，所以我正在寻找一种延长实际链接的方法。

有什么想法吗？

Answer 1

为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

您可以在ModernTab上指定ListWidth属性，而无需设置样式：

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

WPF Modern UI：更改链接的宽度

2 个答案: