ItemDropDownContentTemplate - {icon} | {text}

[Martin]

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

[Petar Mladenov]

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