This is a migrated thread and some comments may be shown as answers.

RadDropDownButton DropDown Popup placement problem

2 Answers 376 Views

Buttons

This is a migrated thread and some comments may be shown as answers.

Tola asked on 03 Feb 2012, 12:21 PM

combo-right.png

Hi,

I'm using RadDropDownButton as menu. I am trying to align the Dropdown popup bottom of the DropDownButton and align dropdowns right side with the buttons right side. (See the attachment)

I've tested numerous scenarios and it seems setting the HorizontalOffset/VerticalOffset on DropDownPopup at the template has no effect.

How should it be implemented?

Here is my code:

<telerik:RadDropDownButton

x:Name="SettingsMenu"

DropDownPlacement="Absolute"

Template="{StaticResource RadDropDownButtonTemplate}">

<TextBlock Text="hello"/>

<telerik:RadDropDownButton.DropDownContent>

<StackPanel >

<TextBlock Text="hello"/>

</StackPanel>

</telerik:RadDropDownButton.DropDownContent>

</telerik:RadDropDownButton>

And my template:

<ControlTemplate x:Key="RadDropDownButtonTemplate" TargetType="telerik:RadDropDownButton">

<Grid >

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal" />

<VisualState x:Name="MouseOver">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0:0:0"

Storyboard.TargetName="OuterBorder"

Storyboard.TargetProperty="BorderBrush">

<DiscreteObjectKeyFrame KeyTime="0:0:0"

Value="{StaticResource ControlOuterBorder_MouseOver}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:0"

Storyboard.TargetName="InnerBorder"

Storyboard.TargetProperty="Background">

<DiscreteObjectKeyFrame KeyTime="0:0:0"

Value="{StaticResource ControlBackground_MouseOver}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:0"

Storyboard.TargetName="InnerBorder"

Storyboard.TargetProperty="BorderBrush">

<DiscreteObjectKeyFrame KeyTime="0:0:0"

Value="{StaticResource ControlInnerBorder_MouseOver}" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Pressed">

<Storyboard>

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="CommonStatesWrapper"

Storyboard.TargetProperty="Opacity">

<DiscreteDoubleKeyFrame KeyTime="00:00:00.050"

Value="0" />

</DoubleAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:0"

Storyboard.TargetName="OuterBorder"

Storyboard.TargetProperty="BorderBrush">

<DiscreteObjectKeyFrame KeyTime="0:0:0"

Value="{StaticResource ControlOuterBorder_Pressed}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:0"

Storyboard.TargetName="InnerBorder"

Storyboard.TargetProperty="Background">

<DiscreteObjectKeyFrame KeyTime="0:0:0"

Value="{StaticResource ControlBackground_Pressed}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0:0:0"

Storyboard.TargetName="InnerBorder"

Storyboard.TargetProperty="BorderBrush">

<DiscreteObjectKeyFrame KeyTime="0:0:0"

Value="{StaticResource ControlInnerBorder_Pressed}" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Disabled">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder"

Storyboard.TargetProperty="BorderBrush"

Duration="0:0:0">

<DiscreteObjectKeyFrame KeyTime="0:0:0"

Value="{StaticResource ControlOuterBorder_Disabled}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerBorder"

Storyboard.TargetProperty="BorderBrush"

Duration="0:0:0">

<DiscreteObjectKeyFrame KeyTime="0:0:0"

Value="{StaticResource ControlInnerBorder_Disabled}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerBorder"

Storyboard.TargetProperty="Background"

Duration="0:0:0">

<DiscreteObjectKeyFrame KeyTime="0:0:0"

Value="{StaticResource ControlBackground_Disabled}" />

</ObjectAnimationUsingKeyFrames>

<DoubleAnimation Duration="0"

Storyboard.TargetName="Content"

Storyboard.TargetProperty="Opacity"

To="0.5" />

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="BackbroundVisibility">

<VisualState x:Name="BackgroundHiden">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0:0:0"

Storyboard.TargetName="OuterBorder"

Storyboard.TargetProperty="Opacity">

<DiscreteObjectKeyFrame KeyTime="0:0:0"

Value="0" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="BackgroundVisible" />

</VisualStateGroup>

<VisualStateGroup x:Name="IsOpenState">

<VisualState x:Name="Closed" />

<VisualState x:Name="Opened">

<Storyboard>

<DoubleAnimation Duration="0"

Storyboard.TargetName="CheckedVisual"

Storyboard.TargetProperty="Opacity"

To="1" />

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="Fill">

<DiscreteObjectKeyFrame KeyTime="0"

Value="{StaticResource ControlElement_Active}" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="DropDownButtonPosition">

<VisualState x:Name="DropDownButtonAtLeft">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="(Grid.Column)">

<DiscreteObjectKeyFrame KeyTime="0"

Value="0" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="(Grid.Row)">

<DiscreteObjectKeyFrame KeyTime="0"

Value="1" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="DropDownButtonAtTop">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="(Grid.Column)">

<DiscreteObjectKeyFrame KeyTime="0"

Value="1" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="(Grid.Row)">

<DiscreteObjectKeyFrame KeyTime="0"

Value="0" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="DropDownButtonAtRight">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="(Grid.Column)">

<DiscreteObjectKeyFrame KeyTime="0"

Value="2" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="(Grid.Row)">

<DiscreteObjectKeyFrame KeyTime="0"

Value="1" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="DropDownButtonAtBottom">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="(Grid.Column)">

<DiscreteObjectKeyFrame KeyTime="0"

Value="1" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIndicator"

Storyboard.TargetProperty="(Grid.Row)">

<DiscreteObjectKeyFrame KeyTime="0"

Value="2" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="PopupPlacementState">

<VisualState x:Name="PlacementBottom" />

<VisualState x:Name="PlacementTop"/>

<VisualState x:Name="PlacementLeft"/>

<VisualState x:Name="PlacementRight"/>

</VisualStateGroup>

<VisualStateGroup x:Name="FocusStatesGroup">

<VisualState x:Name="Unfocused">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="00:00:00.150">

<DiscreteObjectKeyFrame.Value>

<Visibility>Collapsed</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual"

Storyboard.TargetProperty="Opacity">

<LinearDoubleKeyFrame KeyTime="00:00:00.150"

Value="0" />

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Focused">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0:0:0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual"

Storyboard.TargetProperty="Opacity">

<LinearDoubleKeyFrame KeyTime="00:00:00.115"

Value="1" />

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Border x:Name="OuterBorder"

BorderThickness="{TemplateBinding BorderThickness}"

BorderBrush="{TemplateBinding BorderBrush}"

CornerRadius="{TemplateBinding CornerRadius}">

<Border x:Name="InnerBorder"

Background="{TemplateBinding Background}"

BorderThickness="{TemplateBinding BorderThickness}"

CornerRadius="{TemplateBinding InnerCornerRadius}"

BorderBrush="{StaticResource ControlInnerBorder_Normal}" />

</Border>

<Border x:Name="CheckedVisual"

Opacity="0"

BorderThickness="{TemplateBinding BorderThickness}"

BorderBrush="{StaticResource ControlOuterBorder_Checked}"

CornerRadius="{TemplateBinding CornerRadius}">

<Border x:Name="InnerCheckedVisual"

Background="{StaticResource ControlBackground_Checked}"

BorderThickness="{TemplateBinding BorderThickness}"

CornerRadius="{TemplateBinding InnerCornerRadius}"

BorderBrush="{StaticResource ControlInnerBorder_Checked}" />

</Border>

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition Height="*" />

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" />

<ColumnDefinition Width="*" />

<ColumnDefinition Width="Auto" />

</Grid.ColumnDefinitions>

<ContentPresenter x:Name="Content"

Grid.Row="1"

Grid.Column="1"

Margin="{TemplateBinding Padding}"

Content="{TemplateBinding Content}"

ContentTemplate="{TemplateBinding ContentTemplate}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

/>

<Path x:Name="DropDownIndicator"

Grid.Row="2"

Grid.Column="1"

IsHitTestVisible="False"

Visibility="{TemplateBinding DropDownIndicatorVisibility}"

Fill="{StaticResource ControlElement_Normal}"

HorizontalAlignment="Center"

VerticalAlignment="Center"

RenderTransformOrigin="0.5,0.5"

Margin="5,3,5,3"

Data="M0,0 L5,0 5,1 4,1 4,2 3,2 3,3 2,3 2,2 1,2 1,1 0,1 0,0 z"

/>

</Grid>

<telerik:Popup x:Name="DropDownPopup" VerticalOffset="200" HorizontalOffset="200" >

<Grid>

<Border x:Name="DropDownPopupBorder"

BorderBrush="{StaticResource ControlOuterBorder}"

Background="{StaticResource ControlBackground}"

BorderThickness="1"

CornerRadius="0"

MinWidth="3"

MinHeight="3"

Width="{TemplateBinding DropDownWidth}"

Height="{TemplateBinding DropDownHeight}"

MaxWidth="{TemplateBinding DropDownMaxWidth}"

MaxHeight="{TemplateBinding DropDownMaxHeight}">

<ContentPresenter x:Name="DropDownPopupContent"

Content="{TemplateBinding DropDownContent}"

ContentTemplate="{TemplateBinding DropDownContentTemplate}"

HorizontalAlignment="Stretch"

VerticalAlignment="Stretch"

DataContext="{Binding DataContext, RelativeSource={RelativeSource TemplatedParent}}" />

</Border>

</Grid>

</telerik:Popup>

<Border x:Name="CommonStatesWrapper">

<Border x:Name="FocusVisual"

Visibility="Collapsed"

Opacity="0"

BorderThickness="1"

CornerRadius="{TemplateBinding CornerRadius}"

BorderBrush="{StaticResource ControlOuterBorder_Focused}"

Background="{StaticResource ControlBackground_Focused}">

<Border x:Name="FocusInnerVisual"

BorderThickness="1"

CornerRadius="{TemplateBinding InnerCornerRadius}"

BorderBrush="{StaticResource ControlInnerBorder_Focused}" />

</Border>

</Grid>

</ControlTemplate>

2 Answers, 1 is accepted

answered on 08 Feb 2012, 09:31 AM

Hello TonyMan,

Could you please try setting these three properties and let us know if the desired result is achieved at your side?

<telerik:RadDropDownButton x:Name="SettingsMenu"

DropDownPlacement="Bottom"

DropDownButtonPosition="Left"

FlowDirection="RightToLeft"

Thank you in advance.

Kind regards,
Petar Mladenov
the Telerik team

Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

RadDropDownButton DropDown Popup placement problem

2 Answers, 1 is accepted