UWP中組合框的DropDown列表位置

Question

我在我的通用應用程序中有一個組合框，我想在我的組合框的下面打開DropDown列表不會覆蓋它。 如何更改組合框的DropDown列表的位置在UWP？

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之上。