UWP中ComboBox下拉列表的位置 [英] Positon of DropDown list of ComboBox in UWP

问题描述

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

I have a ComboBox in my universal application, I want DropDown list open below of my combo not over it. how can I change position of DropDown list of ComboBox in UWP?

推荐答案

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

The DropDown of a ComboBox is actually a Popup, and the position where to show this Popup is defined in the code behind, and we can't access to it. One workaround is finding this Popup and relocate it when it is opened, but using this method we need to calculate the VerticalOffset property each time when it is opened, and there are quite many scenarios for different value of VerticalOffset.

所以我的建议是设计一个行为类似于 ComboBox 的自定义控件，例如我创建了一个 UserControl 像这样:

So my suggestion is design a custom control which behavior like a ComboBox, for example I created a UserControl like this:

<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，如下所示:

And you can use this CustomComboBox in other page like this:

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

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

By default this CustomComboBox will show its DropDown list under it, unless there is no enough space under it to hold this DropDown, in this case, the DropDown will be shown above this CustomComboBox.

这篇关于UWP中ComboBox下拉列表的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！