ComboBox的DropDown列表在UWP中的位置

Question

我的通用应用程序中有一个 ComboBox，我希望下拉列表在我的组合下方打开，而不是在它上方。 如何更改 UWP 中 ComboBox 下拉列表的位置？

Answer 1

一个ComboBox的DropDown其实是一个Popup，显示这个Popup的位置是在后面的代码中定义的，我们无法访问。一种解决方法是找到这个Popup并在打开时重新定位它，但是使用这种方法我们需要在每次打开时计算VerticalOffset属性，并且VerticalOffset的不同值有很多场景。

所以我的建议是设计一个自定义控件，其行为类似于ComboBox，例如我创建了一个UserControl，如下所示：

<Button x:Name="rootButton" BorderBrush="Gray" BorderThickness="2" Click="Button_Click" MinWidth="80" Background="Transparent" Padding="0">
    <Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
          Width="{Binding ElementName=rootButton, Path=ActualWidth}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="32" />
        </Grid.ColumnDefinitions>
        <TextBlock Text="{x:Bind selectedItem, Mode=OneWay}" Grid.Column="0" VerticalAlignment="Center" FontSize="15" HorizontalAlignment="Center" />
        <FontIcon Grid.Column="1" FontSize="12" FontFamily="Segoe MDL2 Assets" Glyph="&#xE0E5;" HorizontalAlignment="Right"
               Margin="0,10,10,10" VerticalAlignment="Center" />
    </Grid>
    <FlyoutBase.AttachedFlyout>
        <MenuFlyout Placement="Bottom" x:Name="menuFlyout">
            <MenuFlyoutItem Text="Item 1" Click="MenuFlyoutItem_Click" />
            <MenuFlyoutItem Text="Item 2" Click="MenuFlyoutItem_Click" />
            <MenuFlyoutItem Text="Item 3" Click="MenuFlyoutItem_Click" />
            <MenuFlyoutItem Text="Item 4" Click="MenuFlyoutItem_Click" />
            <MenuFlyoutItem Text="Item 5" Click="MenuFlyoutItem_Click" />
        </MenuFlyout>
    </FlyoutBase.AttachedFlyout>
</Button>

以及这个UserControl后面的代码：

public sealed partial class CustomComboBox : UserControl, INotifyPropertyChanged
{
    public CustomComboBox()
    {
        this.InitializeComponent();
        selectedItem = "";
    }

    private string _selectedItem;

    public string selectedItem
    {
        get { return _selectedItem; }

        set
        {
            _selectedItem = value;
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs("selectedItem"));
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void MenuFlyoutItem_Click(object sender, RoutedEventArgs e)
    {
        var item = sender as MenuFlyoutItem;
        selectedItem = item.Text;
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        FlyoutBase.ShowAttachedFlyout(sender as Button);
    }
}

您可以在其他页面中使用此CustomComboBox，如下所示：

<local:CustomComboBox VerticalAlignment="Center" HorizontalAlignment="Center" />

默认情况下，此CustomComboBox 将在其下方显示其DropDown 列表，除非其下方没有足够的空间来容纳此DropDown，在这种情况下，DropDown 将显示在此CustomComboBox 上方.