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

RadDropDownButton DropDown Popup placement problem

2 Answers 313 Views
Buttons
This is a migrated thread and some comments may be shown as answers.
Tola
Top achievements
Rank 1
Tola asked on 03 Feb 2012, 12:21 PM
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"/>
      <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>
            <!-- checked -->
        <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>
             
            <!-- Focus -->
        <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>
        </Border>
    </Grid>
         
</ControlTemplate>

2 Answers, 1 is accepted

Sort by
0
Petar Mladenov
Telerik team
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 >>
0
Tola
Top achievements
Rank 1
answered on 13 Feb 2012, 09:16 AM
Thanks, this seems to do the trick.
Tags
Buttons
Asked by
Tola
Top achievements
Rank 1
Answers by
Petar Mladenov
Telerik team
Tola
Top achievements
Rank 1
Share this question
or