Error styling RadMenu

[Adelio]

Hi,

I have some problems to formatting menu as required. I want create a dynamic menu that the first layer of menu items appears like a blue button with rounded corners and follows menu item childs must be appears like a green button with rounded corners (first attached file). But for some reason the follows menu items don't appears as required and the background is transparent (second attached file).





The resources code is:

001.<UserControl.Resources>
002.
003.    <Style TargetType="{x:Type TextBlock}" x:Key="WrappingStyle">
004.        <Setter Property="Text" Value="{Binding Name}"/>
005.        <Setter Property="TextWrapping" Value="Wrap" />
006.        <Setter Property="HorizontalAlignment" Value="Center" />
007.        <Setter Property="VerticalAlignment" Value="Center" />
008.    </Style>
009.
010.    <ControlTemplate x:Key="TopLevelHeaderTemplateKey" TargetType="{x:Type telerik:RadMenuItem}">
011.        <Grid x:Name="RootElement" Margin="5,0" AllowDrop="True" Width="120" Height="50" Background="Transparent">
012.            <VisualStateManager.VisualStateGroups>
013.                <VisualStateGroup x:Name="CommonStates">
014.                    <VisualState x:Name="Highlighted"/>
015.                    <VisualState x:Name="Disabled">
016.                        <Storyboard>
017.                            <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentGrid"/>
018.                        </Storyboard>
019.                    </VisualState>
020.                    <VisualState x:Name="Normal"/>
021.                </VisualStateGroup>
022.                <VisualStateGroup x:Name="FocusStates">
023.                    <VisualState x:Name="Unfocused"/>
024.                    <VisualState x:Name="Focused"/>
025.                </VisualStateGroup>
026.                <VisualStateGroup x:Name="CheckStates">
027.                    <VisualState x:Name="Checked">
028.                        <Storyboard>
029.                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Tick">
030.                                <DiscreteObjectKeyFrame KeyTime="0">
031.                                    <DiscreteObjectKeyFrame.Value>
032.                                        <Visibility>Visible</Visibility>
033.                                    </DiscreteObjectKeyFrame.Value>
034.                                </DiscreteObjectKeyFrame>
035.                            </ObjectAnimationUsingKeyFrames>
036.                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Icon">
037.                                <DiscreteObjectKeyFrame KeyTime="0">
038.                                    <DiscreteObjectKeyFrame.Value>
039.                                        <Visibility>Collapsed</Visibility>
040.                                    </DiscreteObjectKeyFrame.Value>
041.                                </DiscreteObjectKeyFrame>
042.                            </ObjectAnimationUsingKeyFrames>
043.                        </Storyboard>
044.                    </VisualState>
045.                    <VisualState x:Name="Unchecked"/>
046.                    <VisualState x:Name="HideIcon">
047.                        <Storyboard>
048.                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Icon">
049.                                <DiscreteObjectKeyFrame KeyTime="0">
050.                                    <DiscreteObjectKeyFrame.Value>
051.                                        <Visibility>Visible</Visibility>
052.                                    </DiscreteObjectKeyFrame.Value>
053.                                </DiscreteObjectKeyFrame>
054.                            </ObjectAnimationUsingKeyFrames>
055.                        </Storyboard>
056.                    </VisualState>
057.                </VisualStateGroup>
058.            </VisualStateManager.VisualStateGroups>
059.            <Border Background="#FF1F497D" AllowDrop="False" BorderBrush="#FF0032FF" BorderThickness="3" CornerRadius="5"/>
060.            <Grid x:Name="ContentGrid" Margin="{TemplateBinding Padding}">
061.                <Grid.ColumnDefinitions>
062.                    <ColumnDefinition Width="Auto"/>
063.                    <ColumnDefinition Width="*"/>
064.                </Grid.ColumnDefinitions>
065.                <Path x:Name="Tick" Grid.Column="0" Data="M0,5.1L1.7,5.2 3.4,7.1 8,0.4 9.2,0 3.3,10.8z" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Margin="0,0,4,0" Visibility="Collapsed" VerticalAlignment="Center"/>
066.                <ContentPresenter x:Name="Icon" ContentTemplate="{TemplateBinding IconTemplate}" Content="{TemplateBinding Icon}" Grid.Column="0" Margin="0,0,4,0"/>
067.                <ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" RecognizesAccessKey="True" HorizontalAlignment="Center" VerticalAlignment="Center">
068.                    <ContentPresenter.Resources>
069.                        <Style TargetType="{x:Type TextBlock}" BasedOn="{StaticResource WrappingStyle}"/>
070.                    </ContentPresenter.Resources>
071.                </ContentPresenter>
072.
073.            </Grid>
074.            <Popup x:Name="PART_Popup" AllowsTransparency="True" Focusable="False" HorizontalOffset="-1" IsOpen="{TemplateBinding IsSubmenuOpen}" VerticalOffset="1">
075.                <Grid Background="Transparent">
076.                    <Grid x:Name="PopupContentElement" Background="Transparent">
077.                        <Border BorderBrush="#FF848484" Background="Transparent">
078.                            <Grid Background="Transparent">
079.                                <ItemsPresenter Margin="1"/>
080.                            </Grid>
081.                        </Border>
082.                    </Grid>
083.                </Grid>
084.            </Popup>
085.        </Grid>
086.    </ControlTemplate>
087.
088.    <ControlTemplate x:Key="SubmenuHeaderTemplateKey" TargetType="{x:Type telerik:RadMenuItem}">
089.        <Grid x:Name="RootElement" Background="Transparent">
090.            <VisualStateManager.VisualStateGroups>
091.                <VisualStateGroup x:Name="CommonStates">
092.                    <VisualState x:Name="Highlighted">
093.                        <Storyboard>
094.                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="HighlightVisual">
095.                                <DiscreteObjectKeyFrame KeyTime="0">
096.                                    <DiscreteObjectKeyFrame.Value>
097.                                        <Visibility>Visible</Visibility>
098.                                    </DiscreteObjectKeyFrame.Value>
099.                                </DiscreteObjectKeyFrame>
100.                            </ObjectAnimationUsingKeyFrames>
101.                        </Storyboard>
102.                    </VisualState>
103.                    <VisualState x:Name="Disabled">
104.                        <Storyboard>
105.                            <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentGrid"/>
106.                        </Storyboard>
107.                    </VisualState>
108.                    <VisualState x:Name="Normal"/>
109.                </VisualStateGroup>
110.                <VisualStateGroup x:Name="FocusStates">
111.                    <VisualState x:Name="Unfocused"/>
112.                    <VisualState x:Name="Focused"/>
113.                </VisualStateGroup>
114.                <VisualStateGroup x:Name="CheckStates">
115.                    <VisualState x:Name="Checked">
116.                        <Storyboard>
117.                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Tick">
118.                                <DiscreteObjectKeyFrame KeyTime="0">
119.                                    <DiscreteObjectKeyFrame.Value>
120.                                        <Visibility>Visible</Visibility>
121.                                    </DiscreteObjectKeyFrame.Value>
122.                                </DiscreteObjectKeyFrame>
123.                            </ObjectAnimationUsingKeyFrames>
124.                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Icon">
125.                                <DiscreteObjectKeyFrame KeyTime="0">
126.                                    <DiscreteObjectKeyFrame.Value>
127.                                        <Visibility>Collapsed</Visibility>
128.                                    </DiscreteObjectKeyFrame.Value>
129.                                </DiscreteObjectKeyFrame>
130.                            </ObjectAnimationUsingKeyFrames>
131.                        </Storyboard>
132.                    </VisualState>
133.                    <VisualState x:Name="Unchecked"/>
134.                    <VisualState x:Name="HideIcon">
135.                        <Storyboard>
136.                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Icon">
137.                                <DiscreteObjectKeyFrame KeyTime="0">
138.                                    <DiscreteObjectKeyFrame.Value>
139.                                        <Visibility>Visible</Visibility>
140.                                    </DiscreteObjectKeyFrame.Value>
141.                                </DiscreteObjectKeyFrame>
142.                            </ObjectAnimationUsingKeyFrames>
143.                        </Storyboard>
144.                    </VisualState>
145.                </VisualStateGroup>
146.            </VisualStateManager.VisualStateGroups>
147.            <Border Background="#FF9BBB59" AllowDrop="True" BorderBrush="#FF71893F" CornerRadius="5" Padding="5,0" BorderThickness="3" Margin="0,2"/>
148.            <Grid Margin="2" Background="Transparent">
149.                <Border x:Name="HighlightVisual" BorderThickness="3" CornerRadius="5" Visibility="Collapsed" Background="Transparent" AllowDrop="True" BorderBrush="#FF71893F">
150.                    <Border CornerRadius="0" Background="#FF7F7F7F" BorderBrush="Transparent"/>
151.                </Border>
152.                <Grid x:Name="ContentGrid" Background="Transparent">
153.                    <Grid.ColumnDefinitions>
154.                        <ColumnDefinition Width="Auto"/>
155.                        <ColumnDefinition Width="*"/>
156.                    </Grid.ColumnDefinitions>
157.                    <Grid Width="0" Background="Transparent" HorizontalAlignment="Left" VerticalAlignment="Top">
158.                        <Path x:Name="Tick" Grid.Column="0" Data="M0,5.1L1.7,5.2 3.4,7.1 8,0.4 9.2,0 3.3,10.8z" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" HorizontalAlignment="Center" Visibility="Collapsed" VerticalAlignment="Center"/>
159.                        <ContentPresenter x:Name="Icon" ContentTemplate="{TemplateBinding IconTemplate}" Content="{TemplateBinding Icon}" Grid.Column="0" Margin="2,2,10,2"/>
160.                    </Grid>
161.                    <ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" RecognizesAccessKey="True" Margin="10,5" HorizontalAlignment="Center" VerticalAlignment="Center">
162.                        <ContentPresenter.Resources>
163.                            <Style TargetType="{x:Type TextBlock}" BasedOn="{StaticResource WrappingStyle}"/>
164.                        </ContentPresenter.Resources>
165.                    </ContentPresenter>
166.                </Grid>
167.            </Grid>
168.            <Popup x:Name="PART_Popup" AllowsTransparency="True" Focusable="False" HorizontalOffset="-1" IsOpen="{TemplateBinding IsSubmenuOpen}" VerticalOffset="1">
169.                <Grid Background="Transparent">
170.                    <Grid x:Name="PopupContentElement" Background="Transparent">
171.                        <Border BorderBrush="#FF848484" Background="Transparent">
172.                            <Grid Background="Transparent">
173.                                <ItemsPresenter Margin="1"/>
174.                            </Grid>
175.                        </Border>
176.                    </Grid>
177.                </Grid>
178.            </Popup>
179.        </Grid>
180.    </ControlTemplate>
181.
182.    <Style x:Key="RadMenuTemplateKey" TargetType="{x:Type telerik:RadMenu}">
183.        <Setter Property="Margin" Value="10"/>
184.        <Setter Property="FontSize" Value="14"/>
185.        <Setter Property="Background" Value="#00663333"/>
186.        <Setter Property="Foreground" Value="White"/>
187.    </Style>
188.
189.    <Style x:Key="ItemContainerStyleKey" TargetType="{x:Type telerik:RadMenuItem}">
190.        <Setter Property="Margin" Value="10"/>
191.        <Setter Property="FontSize" Value="14" />
192.        <Setter Property="HorizontalContentAlignment" Value="Left" />
193.        <Setter Property="VerticalContentAlignment" Value="Center"/>
194.        <Setter Property="TopLevelHeaderTemplateKey" Value="{DynamicResource TopLevelHeaderTemplateKey}"/>
195.        <Setter Property="SubmenuHeaderTemplateKey" Value="{DynamicResource SubmenuHeaderTemplateKey}"/>
196.        <Setter Property="TopLevelItemTemplateKey" Value="{DynamicResource TopLevelHeaderTemplateKey}"/>
197.        <Setter Property="SubmenuItemTemplateKey" Value="{DynamicResource SubmenuHeaderTemplateKey}"/>
198.    </Style>
199.
200.</UserControl.Resources>

And the menu code is:

01.<telerik:RadMenu Style="{DynamicResource RadMenuTemplateKey}" ItemContainerStyle="{DynamicResource ItemContainerStyleKey}">
02.
03.    <telerik:RadMenuItem Header="Menu 1" >
04.        <telerik:RadMenuItem Header="Anual">
05.            <telerik:RadMenuItem Header="Detalhe"/>
06.        </telerik:RadMenuItem>
07.        <telerik:RadMenuItem Header="Mensal"/>
08.        <telerik:RadMenuItem Header="Semanal"/>
09.        <telerik:RadMenuItem Header="Diário"/>
10.    </telerik:RadMenuItem>
11.    <telerik:RadMenuItem Header="Menu 2">
12.        <telerik:RadMenuItem Header="Anual" />
13.        <telerik:RadMenuItem Header="Mensal"/>
14.        <telerik:RadMenuItem Header="Semanal"/>
15.        <telerik:RadMenuItem Header="Diário"/>
16.    </telerik:RadMenuItem>
17.
18.</telerik:RadMenu>

Can someone help me and tell me what I doing wrong?

Thank you.

[Adelio]

I found the problem.

Any where in the code I wrote that the childs must be the ItemContainerStyle as ItemContainerStyleKey (next example line 07).
So to create a dynamic menu, you must write previsous code with this changes: 

01....
02.
03.<Style x:Key="ItemContainerStyleKey" TargetType="{x:Type telerik:RadMenuItem}">
04.    <Setter Property="FontSize" Value="14" />
05.    <Setter Property="HorizontalContentAlignment" Value="Left" />
06.    <Setter Property="VerticalContentAlignment" Value="Center"/>
07.    <Setter Property="ItemsSource" Value="{Binding ChildCustomMenus}" />
08.    <Setter Property="TopLevelHeaderTemplateKey" Value="{DynamicResource TopLevelHeaderTemplateKey}"/>
09.    <Setter Property="SubmenuHeaderTemplateKey" Value="{DynamicResource SubmenuHeaderTemplateKey}"/>
10.    <Setter Property="TopLevelItemTemplateKey" Value="{DynamicResource SubmenuHeaderTemplateKey}"/>
11.    <Setter Property="SubmenuItemTemplateKey" Value="{DynamicResource SubmenuHeaderTemplateKey}"/>
12.</Style>
13.
14....
15.
16.<telerik:RadMenu ItemsSource="{Binding CustomMenus}" ItemContainerStyle="{StaticResource ItemContainerStyleKey}" Style="{StaticResource RadMenuTemplateKey}"/>

Best regards

[Kalin]

Hello Adelio,

We are glad you have managed to achieve the desired. If you have any other questions, let us know.

Regards,
Kalin
Telerik