WPF Metro UI - проблема горизонтальной прокрутки LinkGroup

Question

WPF Metro UI - проблема горизонтальной прокрутки LinkGroup

У меня есть приложение WPF с Metro UI. Главное окно открывается на весь экран. Кроме того, у меня есть 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, и он не может легко перемещаться по ним с помощью курсора мыши.

Мой вопрос: есть ли что-нибудь для прокрутки или, может быть, обертку, когда экран слишком маленький?

1

c# wpf modern-ui

Источник

user2071146 26 фев '16 в 07:03

1 ответ

Решение

Другие вопросы по тегам c# wpf modern-ui

user3588432 26 фев '16 в 10:35 2016-02-26 10:35 · Accepted Answer · 2016-02-26 10:35

Чтобы исправить макет меню в FirstFloor.ModernUI, вам нужно написать новый стиль wpf для элемента управления ModernMenu, чтобы переопределить макет по умолчанию. Код стиля по умолчанию можно найти на странице проекта github https://github.com/firstfloorsoftware/mui/blob/master/1.0/FirstFloor.ModernUI/Shared/Themes/ModernMenu.xaml. Например, в вашем приложении в App.xaml добавьте ссылку на пространство имен класса ModernMenu:

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

А затем в ресурсе определите новый стиль по умолчанию:

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

Важнейшими моментами для изменения обернутого меню является изменение 2 элементов списка ItemsPanel со StackPanel на WrapPanel и установка свойства ScrollViewer.Hor 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>