Когда я применяю шаблон к моему MenuItem, он больше не отображает раскрывающийся список при нажатии - PullRequest
3 голосов
/ 19 мая 2011

У меня было меню WPF, которое я стилизовал, используя шаблоны управления. Затем клиент хотел использовать изображения вместо текста для элементов навигации верхнего уровня.

Нет проблем, я создал шаблон элемента управления для каждого элемента верхнего уровня и установил свой атрибут Template для каждого элемента MenuItem, чтобы он соответствовал пользовательскому шаблону, как показано ниже. У меня есть триггер, который меняет изображение при опрокидывании.

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

Команды запускаются для предметов верхнего уровня, у которых нет детей. И как только я удаляю свой код, указывающий шаблон из моего пункта меню с детьми, я вижу текстовую версию с раскрывающимся списком.

Что мне нужно сделать, чтобы сохранить элемент меню верхнего уровня на основе изображений и сохранить раскрывающиеся списки?

Заранее спасибо.

    <Menu Grid.Row="0" Grid.Column="0" Name="uxMenu" Margin="0 2 0 0">
        <MenuItem Header="Home" Name="uxHome" Command="cmds:NavigationCommands.HomeViewNavigationCommand"  Template="{DynamicResource HomeButtonTemplate}"/>
                <MenuItem Header="Admin" Name="uxAdmin" Template="{DynamicResource MenuExitButtonTemplate}">
                    <MenuItem Header="_Setup">
                        <MenuItem Header="_Overview" Command="cmds:NavigationCommands.MenuAdminSetupOverviewNavigationCommand"/>
                        <MenuItem Header="_Cameras" Command="cmds:NavigationCommands.MenuAdminSetupCameraNavigationCommand" />
                    </MenuItem>
       </MenuItem>
    </Menu>




    <ControlTemplate x:Key="HomeButtonTemplate" TargetType="{x:Type MenuItem}">
    <Grid >
        <Image x:Name="myimage" Source="/Images/Navigation/home_off.png" Width="100" Height="52"  />
    </Grid>
    <ControlTemplate.Triggers >
        <Trigger Property="Button.IsMouseOver" Value="True">
            <Setter TargetName="myimage" Property="Source" Value="/Images/Navigation/home_on.png" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

В ответ на сообщение Х.Б. ...

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

Я не уверен, какой именно синтаксис использовать, особенно для атрибутов x: Key и TargetType.

Например. Мой текущий код выглядит следующим образом для моих шаблонов элементов управления TopLevelHeader и SubmenuHeader. (Скопировано со страницы меню, на которую вы ссылаетесь)

  <!-- TopLevelHeader (children)-->
<ControlTemplate x:Key="{x:Static MenuItem.TopLevelHeaderTemplateKey}" TargetType="MenuItem">
    <Border Name="Border">
        <Grid>

            <ContentPresenter Margin="0 24 0 14" ContentSource="Header" RecognizesAccessKey="True" />
            <Popup 
                Name="Popup"
                Placement="Bottom"
                IsOpen="{TemplateBinding IsSubmenuOpen}"
                AllowsTransparency="True" 
                Focusable="False"
                PopupAnimation="Fade">
                <Border 
                  Name="SubmenuBorder"
                  SnapsToDevicePixels="True"
                  Background="{StaticResource WindowBackgroundBrush}"
                  BorderBrush="{StaticResource SolidBorderBrush}"
                  BorderThickness="1" >
                    <StackPanel  
                        IsItemsHost="True" 
                        KeyboardNavigation.DirectionalNavigation="Cycle" />
                </Border>
            </Popup>
        </Grid>
    </Border>

    <ControlTemplate.Triggers>

        <Trigger Property="IsSuspendingPopupAnimation" Value="true">
            <Setter TargetName="Popup" Property="PopupAnimation" Value="None"/>
        </Trigger>

        <Trigger Property="IsHighlighted" Value="false">
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter TargetName="Border" Property="Background" Value="Transparent"/>
            <Setter TargetName="Border" Property="BorderBrush" Value="Transparent"/>
            <Setter TargetName="Border" Property="BorderThickness" Value="0"/>
            <Setter Property="Foreground" Value="#fff"/>

        </Trigger>

        <Trigger Property="IsHighlighted" Value="true">
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter TargetName="Border" Property="Background" Value="Transparent"/>
            <Setter TargetName="Border" Property="BorderBrush" Value="Transparent"/>
            <Setter TargetName="Border" Property="BorderThickness" Value="0"/>
            <Setter Property="Foreground" Value="Black"/>
        </Trigger>

        <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="True">
            <Setter TargetName="SubmenuBorder" Property="CornerRadius" Value="0,0,4,4"/>
            <Setter TargetName="SubmenuBorder" Property="Padding" Value="10"/>
        </Trigger>

        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
        </Trigger>

    </ControlTemplate.Triggers>
</ControlTemplate>

 <!-- SubmenuHeader -->

<ControlTemplate  x:Key="{x:Static MenuItem.SubmenuHeaderTemplateKey}" TargetType="MenuItem">
    <Border Name="Border" >
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" SharedSizeGroup="Icon"/>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" SharedSizeGroup="Shortcut"/>
                <ColumnDefinition Width="13"/>
            </Grid.ColumnDefinitions>
            <ContentPresenter 
                Name="Icon"
                Margin="6,0,6,0"
                VerticalAlignment="Center"
                ContentSource="Icon"/>
            <ContentPresenter 
                Name="HeaderHost"
                Grid.Column="1"
                ContentSource="Header"
                RecognizesAccessKey="True"/>
            <TextBlock x:Name="InputGestureText"
                Grid.Column="2"
                Text="{TemplateBinding InputGestureText}"
                Margin="5,2,2,2"
                DockPanel.Dock="Right"/>
            <Path 
                Grid.Column="3"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Data="M 0 0 L 0 7 L 4 3.5 Z" 
                Fill="{StaticResource GlyphBrush}" />
            <Popup 
                Name="Popup"
                Placement="Right"
                HorizontalOffset="-4" 
                IsOpen="{TemplateBinding IsSubmenuOpen}"
                AllowsTransparency="True" 
                Focusable="False"
                PopupAnimation="Fade">
                <Border 
                  Name="SubmenuBorder"
                  SnapsToDevicePixels="True"
                  Background="{StaticResource WindowBackgroundBrush}"
                  BorderBrush="{StaticResource SolidBorderBrush}"
                  BorderThickness="1" >
                    <StackPanel  
                        IsItemsHost="True" 
                        KeyboardNavigation.DirectionalNavigation="Cycle" />
                </Border>
            </Popup>
        </Grid>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="Icon" Value="{x:Null}">
            <Setter TargetName="Icon" Property="Visibility" Value="Collapsed"/>
        </Trigger>
        <Trigger Property="IsHighlighted" Value="true">
            <Setter TargetName="Border" Property="Background" Value="{StaticResource SelectedBackgroundBrush}"/>
        </Trigger>
        <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="True">
            <Setter TargetName="SubmenuBorder" Property="CornerRadius" Value="4"/>
            <Setter TargetName="SubmenuBorder" Property="Padding" Value="0,3,0,3"/>
        </Trigger>
        <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

Так что, если я добавлю свой новый шаблон элемента управления с ключом «HomeButtonTemplate», как показано в верхней части моего сообщения, мне придется добавить новый раздел (а также все остальные элементы ControlTemplates для таких вещей, как SubmenuItem и т. Д. .

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

Спасибо за любой совет, который вы можете дать.

Ответы [ 2 ]

4 голосов
/ 19 мая 2011

Вы полностью удаляете существующий шаблон (который довольно сложный), указав свой собственный, ваш шаблон больше не обеспечивает необходимую функциональность. В шаблоне элемента управления есть часть, идентифицируемая с именем PART_Popup, которая используется для отображения подпунктов.

Проверьте на этой странице для ссылки (Default WPF themes), где вы можете скачать стили по умолчанию, которые включают шаблоны, чтобы увидеть, как должен выглядеть ваш шаблон.

Также взгляните на страницу шаблонов меню , которая должна дать вам представление о сложности меню.

0 голосов
/ 05 марта 2019

Это может быть немного поздно, но у меня недавно была та же проблема.Для меня работало создание StackPanel, например,

<StackPanel ClipToBounds="True"
            Orientation="Horizontal"
            IsItemsHost="True" />

внутри Border, которая находится внутри ControlTemplate.

.1008 *

<ControlTemplate TargetType="Menu">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="#252525"
                            BorderThickness="1" 
                            CornerRadius="5">

                        <StackPanel ClipToBounds="True"
                                    Orientation="Horizontal"
                                    IsItemsHost="True" />
                    </Border>
                </ControlTemplate>
...