24

I'm trying to create a ComboBox with a non-standard dropdown alignment. Basically, I want the dropdown to be below the ComboBox, but aligned with the right edge of the ComboBox instead of the left edge.

What a normal ComboBox looks like, using PlacementMode="Bottom":

combo box aligned to the left

What I want:

combobox aligned to the right

I tried to play with the Popup.PlacementMode property in the template of my ComboBox, but none of the possible values seem to do what I want. Is there a simple way to do it, preferably in pure XAML?

4 Answers 4

50

When I opened Expression Blend, I have come up with the solution within a few seconds:

<Popup Placement="Left" VerticalOffset="{TemplateBinding ActualHeight}" 
       HorizontalOffset="{TemplateBinding ActualWidth}"

Sometimes this application is more useful than writing xaml by hands, but not so often. enter image description here

7
  • This doesn't do what I'm asking at all... look at the images in my question Commented Mar 17, 2011 at 19:24
  • 1
    @Thomas Levesque Ok, I've attached the screenshot of my applciation. Sorry, but I can't see a difference between your second combobox and mine.
    – vortexwolf
    Commented Mar 17, 2011 at 19:36
  • 3
    Very elegant - however if you place en ComboBox on the right side of the Windows and maximize the Window in a multi-monitor setup where you have a monitor on the right hand side of the maximized window, the Popup will move to the monitor to the right :( Commented Mar 30, 2011 at 11:41
  • 1
    Very "elegant" way for breaking any automatic theming support of native controls.
    – springy76
    Commented May 4, 2016 at 8:13
  • 5
    @springy76 you should avoid sarcasm. You're not being constructive, so people will ignore you.
    – ANeves
    Commented Mar 10, 2017 at 11:31
9

I would use the "Custom" placementmode for the PopUp and declare a callback to place the popup control into the correct position, like it's shown here: WPF ComboBox DropDown Placement

See if an example here would work for you:

public class TestComboBox : ComboBox
{
    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();

        var popup = (Popup)Template.FindName("PART_Popup", this);
        popup.Placement = PlacementMode.Custom;
        popup.CustomPopupPlacementCallback += (Size popupSize, Size targetSize, Point offset) => 
            new[] {  new CustomPopupPlacement() { Point = new Point (targetSize.Width-popupSize.Width, targetSize.Height) } };
    }
}

hope this helps, regards

2
  • Thanks for your answer! I thought of that too, but I prefer a pure XAML solution, and vorrtex's answer fits the bill perfectly Commented Mar 17, 2011 at 21:42
  • nice answer! easiest to implement Commented Sep 11, 2012 at 14:10
4

Can someone post the complete xaml code please?

I've tried the following:

    <ComboBox Grid.Column="1" Height="24" Width="20" HorizontalAlignment="Right"
              VerticalAlignment="Top"                  
              Name="comboBox2" 
              ItemsSource="{Binding  Source={StaticResource FilterTypes}}" 
              SelectedValue="{Binding Path=SelectedType, Mode=TwoWay}" >

        <ComboBox.Template>
            <ControlTemplate>
                <Popup Placement="Left" VerticalOffset="{TemplateBinding ActualHeight}" 
                        HorizontalOffset="{TemplateBinding ActualWidth}" />
            </ControlTemplate>
        </ComboBox.Template>  
    </ComboBox>  

... after some working and testing I've found a good solution...

        <ComboBox.Style>
            <Style TargetType="ComboBox" >                                    
                <Setter Property="Popup.FlowDirection" Value="RightToLeft"/>                  
            </Style>
        </ComboBox.Style>      
3
  • just copy the original ComboBox template and modify only the Popup (you can find the original template in the default themes) Commented Oct 27, 2011 at 13:11
  • @Sascha Krumbein Welcome to stackoverflow. This is not a forum. If you have a specific programming related question, please ask a new question.
    – vidstige
    Commented Sep 20, 2012 at 7:49
  • This answer does not seem to add anything to the top-voted and accepted answer, it seems to be more of a question. Sascha, could you try improving the answer?
    – ANeves
    Commented Mar 10, 2017 at 11:35
2

it's a little hacky, but does work. you just have to change the combobox style.

    <Grid Height="40">
        <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
            <FrameworkElement Name="dummy" Visibility="Collapsed">
                <FrameworkElement.RenderTransform>
                    <TransformGroup x:Name="xformgrp">
                        <TranslateTransform X="{Binding ElementName=PopupContent, Path=ActualWidth}" />
                        <ScaleTransform ScaleX="-1" />
                        <TranslateTransform X="{Binding ElementName=chk, Path=ActualWidth}" />
                    </TransformGroup>
                </FrameworkElement.RenderTransform>
            </FrameworkElement>
            <CheckBox Name="chk" HorizontalAlignment="Center">checkthisout</CheckBox>
            <Popup IsOpen="{Binding IsChecked, ElementName=chk}" PlacementTarget="{Binding ElementName=chk}" Placement="Bottom" HorizontalOffset="{Binding ElementName=dummy, Path=RenderTransform.Value.OffsetX}">
                <TextBlock Name="PopupContent" Foreground="Yellow" Background="Blue">yeah long popupcontent</TextBlock>
            </Popup>
        </Grid>            
    </Grid>

The popups HorizontalOffset just has to get the value of PopupContent.ActualWidth-PlacementTarget.ActualWidth. To get that value I used this trick from Charles Petzold.

3
  • Thanks, very clever solution... but also quite scary ;) Commented Mar 17, 2011 at 19:15
  • @Thomas if you think that's scary.... Just kidding, you said, you didn't want any code behind. If you allow code-behind, just create a MultiBinding with a Converter that does PopupContent.ActualWidth-PlacementTarget.ActualWidth. That way your xaml doesn't look so scary, as the wohle dummy element gets eliminated. Commented Mar 17, 2011 at 19:29
  • a converter doesn't count as code-behind ;). Anyway, I wanted the simplest possible solution, and vorrtex's answer is by far the simplest and is pure XAML, so I accepted it Commented Mar 17, 2011 at 21:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.