RadDropDownButton DropDown Popup placement problem

3 posts, 0 answers
  1. Tola
    Tola avatar
    3 posts
    Member since:
    Feb 2012

    Posted 03 Feb 2012 Link to this post

    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. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 08 Feb 2012 Link to this post

    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 >>
  3. DevCraft banner
  4. Tola
    Tola avatar
    3 posts
    Member since:
    Feb 2012

    Posted 13 Feb 2012 Link to this post

    Thanks, this seems to do the trick.
Back to Top