WPF Metro UI - LinkGroup 水平滚动问题

Question

我有带 Metro 的 WPF 应用 UI。 Main window 全屏打开。最重要的是，我有 MenuLinkGroup，它看起来像这样：

 <mui:ModernWindow.MenuLinkGroups>
        <mui:LinkGroup DisplayName="FirstGroup">
            <mui:LinkGroup.Links>
                <mui:Link DisplayName="Very long description" Source=""/>
                <mui:Link DisplayName="Very long description" Source=""/>
            </mui:LinkGroup.Links>
        </mui:LinkGroup>
        <mui:LinkGroup DisplayName="SecondGroup">
            <mui:LinkGroup.Links>
                <mui:Link DisplayName="Very long description" Source="" />
                <mui:Link DisplayName="Very long description" Source="" />
                <mui:Link DisplayName="Very long description" Source="" />
                <mui:Link DisplayName="Very long description" Source="" />
                <mui:Link DisplayName="Very long description" Source="" />
                <mui:Link DisplayName="Very long description" Source="" />
                <mui:Link DisplayName="Very long description" Source="" />
                <mui:Link DisplayName="Very long description" Source="" />
                <mui:Link DisplayName="Very long description" Source="" />
                <mui:Link DisplayName="Very long description" Source="" />
            </mui:LinkGroup.Links>
        </mui:LinkGroup>
        <mui:LinkGroup DisplayName="ThirdGroup">
            <mui:LinkGroup.Links>
                <mui:Link DisplayName="Very long description" Source="" />
                <mui:Link DisplayName="Very long description" Source="" />
            </mui:LinkGroup.Links>
        </mui:LinkGroup>
</mui:ModernWindow.MenuLinkGroups>

主要问题是，当用户的显示器较小时，他无法看到 SecondGroup 中的所有名称，并且他无法使用鼠标光标轻松导航 tchem。

我的问题：屏幕太小的时候，有没有可以放一些卷轴或者包裹的东西？

Answer 1

要修复 FirstFloor.ModernUI 中的菜单布局，您需要为 ModernMenu 控件编写新的 wpf 样式以覆盖默认布局。默认样式代码可以在项目 github 页面 https://github.com/firstfloorsoftware/mui/blob/master/1.0/FirstFloor.ModernUI/Shared/Themes/ModernMenu.xaml 上找到。在您的应用程序中，例如在 App.xaml 中添加对 ModernMenu class 命名空间的引用：

xmlns:firstfloor="clr-namespace:FirstFloor.ModernUI.Windows.Controls;assembly=FirstFloor.ModernUI"

然后在资源中定义新的默认样式：

<Style TargetType="firstfloor:ModernMenu"></Style>

改成wrapped menu的关键点是把2个列表框ItemsPanel从StackPanel改成WrapPanel，然后设置属性 ScrollViewer.HorizontalScrollBarVisibility="Disabled"。完成这些更改后，您的样式应如下所示：

<Style TargetType="firstfloor:ModernMenu">
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="firstfloor:ModernMenu">
                <Grid>
                    <Grid.Resources>
                        <Style TargetType="ListBox" BasedOn="{StaticResource {x:Type ListBox}}">
                            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden"/>
                            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden"/>
                            <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                            <Setter Property="ScrollViewer.PanningMode" Value="Both"/>
                        </Style>
                    </Grid.Resources>

                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>

                    <ListBox ItemsSource="{TemplateBinding VisibleLinkGroups}"
                             ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                             SelectedItem="{Binding SelectedLinkGroup, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
                        <ListBox.ItemContainerStyle>
                            <Style TargetType="ListBoxItem">
                                <Setter Property="FocusVisualStyle" Value="{x:Null}" />
                                <Setter Property="FontFamily" Value="Segoe UI Light" />
                                <Setter Property="Foreground" Value="{DynamicResource MenuText}" />
                                <Setter Property="FontSize" Value="23"/>
                                <Setter Property="HorizontalContentAlignment" Value="Center" />
                                <Setter Property="VerticalContentAlignment" Value="Center" />
                                <Setter Property="TextOptions.TextFormattingMode" Value="Ideal" />
                                <Setter Property="Margin" Value="0,0,12,0" />
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="ListBoxItem">
                                            <TextBlock DataContext="{TemplateBinding Content}"
                                                       Text="{Binding DisplayName, Converter={StaticResource ToLowerConverter}}"
                                                       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>
                                <WrapPanel Orientation="Horizontal" />
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>
                    </ListBox>

                    <ListBox Grid.Row="1"
                             ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                             ItemsSource="{Binding SelectedLinkGroup.Links, RelativeSource={RelativeSource TemplatedParent}}"
                             SelectedItem="{Binding SelectedLink, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                             VerticalAlignment="Top">
                        <ListBox.ItemContainerStyle>
                            <Style TargetType="ListBoxItem">
                                <Setter Property="FocusVisualStyle" Value="{x:Null}" />
                                <Setter Property="FontFamily" Value="Segoe UI" />
                                <Setter Property="Foreground" Value="{DynamicResource SubMenuText}" />
                                <Setter Property="FontSize" Value="11"/>
                                <Setter Property="Margin" Value="0,0,12,0" />
                                <Setter Property="HorizontalContentAlignment" Value="Center" />
                                <Setter Property="VerticalContentAlignment" Value="Center" />
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="ListBoxItem">
                                            <Grid DataContext="{TemplateBinding Content}"
                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                                                <TextBlock Text="{Binding DisplayName, Converter={StaticResource ToUpperConverter}}" TextAlignment="Center"/>
                                                <TextBlock Text="{Binding DisplayName, Converter={StaticResource ToUpperConverter}}" FontWeight="Bold" Visibility="Hidden" />
                                            </Grid>

                                            <ControlTemplate.Triggers>
                                                <Trigger Property="IsMouseOver" Value="true">
                                                    <Setter Property="Foreground" Value="{DynamicResource SubMenuTextHover}"/>
                                                </Trigger>
                                                <Trigger Property="IsSelected" Value="true">
                                                    <Setter Property="Foreground" Value="{DynamicResource SubMenuTextSelected}"/>
                                                    <Setter Property="FontWeight" Value="Bold" />
                                                </Trigger>
                                            </ControlTemplate.Triggers>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </ListBox.ItemContainerStyle>
                        <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapPanel Orientation="Horizontal" />
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>
                    </ListBox>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

WPF Metro UI - LinkGroup 水平滚动问题

WPF Metro UI - LinkGroup horizontal scrolling issue

c#

wpf

modern-ui