如何使用弹出窗口创建自定义combox?

时间:2019-04-04 05:29:56

标签: uwp-xaml

组合框弹出窗口应始终在下面打开,并在弹出窗口中显示标题。他们有什么办法做到这一点。enter image description here

1 个答案:

答案 0 :(得分:0)

  

如何在该弹出窗口中添加“选择标题”

您可以编辑其default style“转到-> Visual Studio中的文档大纲->右键单击ComboBox->编辑样式->编辑副本”

您可以在其ControlTemplate中看到Popup控件(名为“ x:Name =“ Popup””)。

然后,您可以像下面这样在其中添加一个TextBlock:

<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>
  

如何始终打开组合框下方的弹出窗口

使用默认的组合框是不可能的。由于弹出框的“打开/关闭”状态是在组合框的代码隐藏中控制的,因此您无法对其进行更改。但是您可以选择制作一个自定义控件来实现它。

例如,您可以使用默认样式引用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="&#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>

对于特定的代码逻辑,您需要自己在其代码隐藏中对其进行编码。