使 WPF ModernUI 选项卡多行
Make WPF ModernUI tab multiline
我有一个 WPF 用户控件，其中包含现代 UI 选项卡。这是用户控件的 xaml（modernui 选项卡在代码末尾）：
<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>
当我添加更多链接时，选项卡变得不可见，因此我需要将其设为多行，我在网上搜索了相关内容，但一无所获。此控件没有多行或换行 属性。我试图让它通过固定宽度工作，但没有成功。
使用 WrapPanel 作为 ListBox 的 ItemsPanelTemplate 并去掉 ScrollViewer，因为 ModernFrame 已经有一个：
<UserControl ...
xmlns:mui="http://firstfloorsoftware.com/ModernUI"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
<Style x:Key="sas" TargetType="{x:Type mui:ModernTab}">
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Margin" Value="{DynamicResource HeaderMargin}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type mui:ModernTab}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<ListBox x:Name="LinkList" ItemsSource="{TemplateBinding Links}" ScrollViewer.CanContentScroll="False"
HorizontalAlignment="Left" ScrollViewer.HorizontalScrollBarVisibility="Hidden"
ScrollViewer.PanningMode="Both" ScrollViewer.VerticalScrollBarVisibility="Hidden"
VerticalAlignment="Top">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" Orientation="Horizontal"
Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=mui:ModernTab}}"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding DisplayName, Converter={StaticResource ToUpperConverter}}" />
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type 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" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<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>
<mui:ModernFrame Grid.Row="1" ContentLoader="{TemplateBinding ContentLoader}" Source="{Binding SelectedSource, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid VerticalAlignment="Top" HorizontalAlignment="left" Margin="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1031*"/>
<ColumnDefinition Width="37*"/>
</Grid.ColumnDefinitions>
<mui:ModernTab Name="mTHome" Layout="Tab" 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:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
<mui:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
<mui:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
<mui:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
<mui:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
<mui:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
<mui:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
<mui:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
<mui:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
<mui:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
<mui:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
<mui:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
<mui:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
<mui:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
<mui:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
<mui:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
</mui:ModernTab.Links>
</mui:ModernTab>
</Grid>
</UserControl>
我有一个 WPF 用户控件，其中包含现代 UI 选项卡。这是用户控件的 xaml（modernui 选项卡在代码末尾）：
<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>
当我添加更多链接时，选项卡变得不可见，因此我需要将其设为多行，我在网上搜索了相关内容，但一无所获。此控件没有多行或换行 属性。我试图让它通过固定宽度工作，但没有成功。
使用 WrapPanel 作为 ListBox 的 ItemsPanelTemplate 并去掉 ScrollViewer，因为 ModernFrame 已经有一个：
<UserControl ...
xmlns:mui="http://firstfloorsoftware.com/ModernUI"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
<Style x:Key="sas" TargetType="{x:Type mui:ModernTab}">
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Margin" Value="{DynamicResource HeaderMargin}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type mui:ModernTab}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<ListBox x:Name="LinkList" ItemsSource="{TemplateBinding Links}" ScrollViewer.CanContentScroll="False"
HorizontalAlignment="Left" ScrollViewer.HorizontalScrollBarVisibility="Hidden"
ScrollViewer.PanningMode="Both" ScrollViewer.VerticalScrollBarVisibility="Hidden"
VerticalAlignment="Top">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" Orientation="Horizontal"
Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=mui:ModernTab}}"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding DisplayName, Converter={StaticResource ToUpperConverter}}" />
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type 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" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<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>
<mui:ModernFrame Grid.Row="1" ContentLoader="{TemplateBinding ContentLoader}" Source="{Binding SelectedSource, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid VerticalAlignment="Top" HorizontalAlignment="left" Margin="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1031*"/>
<ColumnDefinition Width="37*"/>
</Grid.ColumnDefinitions>
<mui:ModernTab Name="mTHome" Layout="Tab" 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:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
<mui:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
<mui:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
<mui:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
<mui:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
<mui:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
<mui:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
<mui:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
<mui:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
<mui:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
<mui:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
<mui:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
<mui:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
<mui:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
<mui:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
<mui:Link DisplayName="Report X" Source="/Reports/Report4/TabReport4_Report.xaml"></mui:Link>
</mui:ModernTab.Links>
</mui:ModernTab>
</Grid>
</UserControl>