Error styling RadMenu

3 posts, 0 answers
  1. Adelio
    Adelio avatar
    2 posts
    Member since:
    Jun 2012

    Posted 09 Sep 2014 Link to this post

    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.
  2. Adelio
    Adelio avatar
    2 posts
    Member since:
    Jun 2012

    Posted 10 Sep 2014 Link to this post

    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
  3. UI for WPF is Visual Studio 2017 Ready
  4. Kalin
    Admin
    Kalin avatar
    1207 posts

    Posted 10 Sep 2014 Link to this post

    Hello Adelio,

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

    Regards,
    Kalin
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
Back to Top