2016-12-30 5 views
0

У меня есть пользовательский элемент управления WPF, который включает в себя вкладку современного пользовательского интерфейса. Это XAML для UserControl (вкладка modernui находится в конце кода):Сделать WPF 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> 

Когда я добавляю больше ссылок, вкладки становятся невидимыми, поэтому мне нужно сделать это многострочный, я искал сеть о он ничего не нашел. Для этого элемента управления нет многострочного или оберточного свойства. Я пытался заставить его работать с фиксированной шириной, но это не сработало.

ответ

1

Используйте WrapPanel как ItemsPanelTemplate от ListBox и избавиться от 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> 
Смежные вопросы