Как создать пользовательский combox с всплывающим окном?

#uwp-xaml

#uwp-xaml

Вопрос:

Всплывающее окно со списком всегда должно открываться ниже и показывать заголовок во всплывающем окне. Есть ли у них какой-либо способ сделать это.введите описание изображения здесь

Ответ №1:

Как добавить «Выберите заголовок» в это всплывающее окно

Вы могли бы отредактировать его стиль по умолчанию. ‘Перейдите в -> Структура документа в Visual Studio -> Щелкните правой кнопкой мыши свой ComboBox -> Редактировать стиль -> Редактировать копию’

Вы могли видеть всплывающий элемент управления (с именем ‘x: Name=»Popup»‘) в его ControlTemplate.

Затем вы могли бы добавить в него текстовый блок следующим образом:

 <Popup x:Name="Popup">
     <Border x:Name="PopupBorder" BackgroundSizing="OuterBorderEdge" Background="{ThemeResource ComboBoxDropDownBackground}" BorderThickness="{ThemeResource ComboBoxDropdownBorderThickness}" BorderBrush="{ThemeResource ComboBoxDropDownBorderBrush}" HorizontalAlignment="Stretch" Margin="0,-1,0,-1" Padding="{ThemeResource ComboBoxDropdownBorderPadding}">
           <StackPanel>
                <TextBlock Text="Selecte a Title"></TextBlock>
                <ScrollViewer x:Name="ScrollViewer" AutomationProperties.AccessibilityView="Raw" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" Foreground="{ThemeResource ComboBoxDropDownForeground}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" MinWidth="{Binding TemplateSettings.DropDownContentMinWidth, RelativeSource={RelativeSource Mode=TemplatedParent}}" VerticalSnapPointsType="OptionalSingle" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalSnapPointsAlignment="Near" ZoomMode="Disabled">
                <ItemsPresenter Margin="{ThemeResource ComboBoxDropdownContentMargin}" />
                </ScrollViewer>
           </StackPanel>
     </Border>
</Popup>
  

Как всегда открывать всплывающее окно под combobox

Со списком по умолчанию это невозможно. Поскольку состояние «открыть / закрыть» всплывающего окна контролируется в коде combobox, вы не можете его изменить. Но вы могли бы создать пользовательский элемент управления для достижения этого.

Например, вы могли бы обратиться к макету XAML в стиле по умолчанию и создать UserControl.

Вы могли бы проверить мой простой пример кода:

 <UserControl
x:Class="AppCombobox.MyComboBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:AppCombobox"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">

<Grid>
    <Grid x:Name="LayoutRoot">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="32" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBox x:Name="EditableText" Grid.Column="0" BorderBrush="Transparent" />
        <FontIcon
            x:Name="DropDownGlyph"
            Grid.Row="0"
            Grid.Column="1"
            Margin="0,10,10,10"
            HorizontalAlignment="Right"
            VerticalAlignment="Center"
            AutomationProperties.AccessibilityView="Raw"
            FontFamily="{ThemeResource SymbolThemeFontFamily}"
            FontSize="12"
            Foreground="{ThemeResource ComboBoxDropDownGlyphForeground}"
            Glyph="amp;#xE0E5;"
            IsHitTestVisible="False" />
        <Popup
            x:Name="Popup"
            Grid.Row="1"
            IsOpen="True">
            <Border
                x:Name="PopupBorder"
                Margin="0,-1,0,-1"
                HorizontalAlignment="Stretch"
                Background="{ThemeResource ComboBoxDropDownBackground}"
                BackgroundSizing="OuterBorderEdge"
                BorderBrush="{ThemeResource ComboBoxDropDownBorderBrush}"
                BorderThickness="{ThemeResource ComboBoxDropdownBorderThickness}"
                Padding="{ThemeResource ComboBoxDropdownBorderPadding}">
                <StackPanel>
                    <TextBlock Text="Selecte a Title" />
                    <ScrollViewer
                        x:Name="ScrollViewer"
                        AutomationProperties.AccessibilityView="Raw"
                        Foreground="{ThemeResource ComboBoxDropDownForeground}"
                        VerticalSnapPointsAlignment="Near"
                        VerticalSnapPointsType="OptionalSingle"
                        ZoomMode="Disabled">
                        <ListView Margin="{ThemeResource ComboBoxDropdownContentMargin}" x:Name="list"></ListView>
                    </ScrollViewer>
                </StackPanel>
            </Border>
        </Popup>
    </Grid>
</Grid>
  

Для конкретной логики кода вам нужно закодировать его самостоятельно в его code-behind.