ItemDropDownContentTemplate - {icon} | {text}

2 posts, 0 answers
  1. Martin
    Martin avatar
    8 posts
    Member since:
    Nov 2011

    Posted 13 Dec 2011 Link to this post

    Dear Support,

    i templated the DropDownContent like this,

    <DataTemplate x:Key="outlookBaItemDropDownContentTemplate">
        <StackPanel Orientation="Horizontal">
            <Image Source="{Binding SmallIcon}"
                   Width="20" />
            <Label Content="{Binding Header}" />
        </StackPanel>
    </DataTemplate>


    however the dropdown was originally intendet to use two columns, -
    one for the icon, one for the header.

    How can I make the items fit anyway?


    Thanks in advance Martin
  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 16 Dec 2011 Link to this post

    Hello Martin,

     We agree that it is not very easy to accomplishe the usual look and feel of this Menu. You have to extract its Style and us the DropDownStyle property of the RadOutlookBar like so (changes are marked with Green):

    <Style x:Key="ddStyle" TargetType="{x:Type Telerik_Windows_Controls_TabControl:DropDownMenu}">
                    <Setter Property="Background" Value="White" />
                    <Setter Property="VerticalContentAlignment" Value="Center" />
                    <Setter Property="BorderThickness" Value="1" />
                    <Setter Property="IconColumnWidth" Value="0" />
                    <Setter Property="MaxHeight" Value="500" />
                    <Setter Property="BorderBrush" Value="#FF848484" />
                    <Setter Property="ItemsPanel">
                        <Setter.Value>
                            <ItemsPanelTemplate>
                                <telerik:RadWrapPanel IsItemsHost="True" Orientation="Vertical" />
                            </ItemsPanelTemplate>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Telerik_Windows_Controls_TabControl:DropDownMenu}">
                                <Grid>
                                    <Border Background="{TemplateBinding Background}"
                                            BorderBrush="{TemplateBinding BorderBrush}"
                                            BorderThickness="{TemplateBinding BorderThickness}">
                                        <Grid>
                                            <Border Width="32"
                                                    HorizontalAlignment="Left"
                                                    BorderBrush="{TemplateBinding BorderBrush}"
                                                    BorderThickness="0,0,1,0"
                                                    Opacity="0.5" />
                                            <ItemsPresenter Margin="{TemplateBinding Padding}"
                                                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                        </Grid>
                                    </Border>
                                    <Rectangle x:Name="BorderMaskElement"
                                               HorizontalAlignment="Left"
                                               VerticalAlignment="Top"
                                               Fill="Transparent" />
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

    You can find this approach realized in the attached solution. Please check it out and let us know if it satisfies you. Greetings,
    Petar Mladenov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. UI for WPF is Visual Studio 2017 Ready
Back to Top