Unable to set custom ControlTemplate for a MenuItem

29 May 2019, 22:22

I confirmed the following works in WPF but not in Noesis. I did then realize you didn't yet have complete support for "x:Static"...

        <ControlTemplate x:Key="{x:Static MenuItem.TopLevelItemTemplateKey}" TargetType="MenuItem">
            <Border x:Name="MenuItemBorder" Width="190" Height="100" BorderThickness="1" CornerRadius="5, 5, 0, 0">
                <Grid x:Name="sbGrid">
                    <Border x:Name="TopLevelBorder" CornerRadius="5, 5, 0, 0" Background="{StaticResource SoftButtonBorderBrush}"/>
                    <Grid Background="Transparent" Margin="9">
                        <Rectangle x:Name="TopLevelRect"  Fill="{StaticResource SoftButtonBackgroundBrush}" RadiusX="5" RadiusY="5"/>
                        <ContentPresenter x:Name="TopLevelHeader" Margin="6,0,6,3"  HorizontalAlignment="Center" VerticalAlignment="Center" >
                            <ContentPresenter.Content>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                    <DockPanel Grid.Column="0">
                                        <TextBlock Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Header}"/>
                                    </DockPanel>
                                    <Path x:Name="Caret" Grid.Column="1" Margin="10,0,0,0" Data="M72.2,101.7 L79.699997,94.399997 87.699997,101.6" HorizontalAlignment="Center" VerticalAlignment="Center"
                                  Height="10" Width="19" Stretch="Fill" Stroke="#FFFFFF" StrokeThickness="3"/>
                                </Grid>
                            </ContentPresenter.Content>
                            <ContentPresenter.Resources>
                                <Style TargetType="{x:Type TextBlock}" BasedOn="{StaticResource WrappingStyle}"/>
                            </ContentPresenter.Resources>
                        </ContentPresenter>
                    </Grid>
                </Grid>
                <Border.RenderTransform>
                    <TranslateTransform x:Name="ToggleMenuItem">
                    </TranslateTransform>
                </Border.RenderTransform>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
                    <Setter TargetName="sbGrid" Property="Opacity" Value="0.8"/>
                    <Setter TargetName="MenuItemBorder" Property="Background" Value="{StaticResource SoftButtonDisabledBorderBrush}"/>
                </Trigger>
                <DataTrigger Binding="{Binding HasChildren}" Value="False">
                    <Setter TargetName="Caret" Property="Visibility" Value="Collapsed"/>
                </DataTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

So I also tried this alternate way of specifying the control template (sans Static), which also works in WPF.... bug again, not in Noesis.

        <ControlTemplate x:Key="{ComponentResourceKey ResourceId=TopLevelItemTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}" TargetType="{x:Type MenuItem}">

Any ideas here?

30 May 2019, 10:57

Hi, after investigating this a bit I found that those resource keys are defined in WPF as a helper for restyling specific roles of MenuItem without having to restyle all of the control, but at the end is a decision of the style designer to use them or not, there is no assumption in the code that these keys should be used in the style definition.

For example, the Material Design in XAML project decided not use them for their menu item style, they opted for a single template and triggers to configure the role of the item: https://github.com/MaterialDesignInXAML ... u.xaml#L76

In Noesis, our default style is using different templates for each role defined with our own keys:

    <Style TargetType="{x:Type MenuItem}" BasedOn="{StaticResource DefaultControlStyle}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="{x:Null}"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="ItemsPanel" Value="{StaticResource MenuItemsPanelTemplate}"/>
        <Style.Triggers>
            <Trigger Property="Role" Value="TopLevelHeader">
                <Setter Property="Padding" Value="6,4"/>
                <Setter Property="Template" Value="{StaticResource TopLevelHeaderTemplate}"/>
            </Trigger>
            <Trigger Property="Role" Value="TopLevelItem">
                <Setter Property="Padding" Value="6,4"/>
                <Setter Property="Template" Value="{StaticResource TopLevelItemTemplate}"/>
            </Trigger>
            <Trigger Property="Role" Value="SubmenuHeader">
                <Setter Property="Padding" Value="0,4"/>
                <Setter Property="MinHeight" Value="15"/>
                <Setter Property="Template" Value="{StaticResource SubmenuHeaderTemplate}"/>
            </Trigger>
            <Trigger Property="Role" Value="SubmenuItem">
                <Setter Property="Padding" Value="0,4"/>
                <Setter Property="MinHeight" Value="15"/>
                <Setter Property="Template" Value="{StaticResource SubmenuItemTemplate}"/>
            </Trigger>
        </Style.Triggers>
    </Style>

To override Noesis default style for a MenuItem with a custom ControlTemplate you will need to define a new Style, similar to the previous one but referencing your templates.

In a future release we may add those MenuItem resource keys and design our default style to use them: https://www.noesisengine.com/bugs/view.php?id=1479

30 May 2019, 12:01

Thanks, I have this working with the style you posted and my template:

        <ControlTemplate x:Key="TopLevelItemTemplate" TargetType="MenuItem">

Unable to set custom ControlTemplate for a MenuItem Topic is solved

Unable to set custom ControlTemplate for a MenuItem

Re: Unable to set custom ControlTemplate for a MenuItem

Re: Unable to set custom ControlTemplate for a MenuItem

Who is online