Avalonia实战实例三：实现可输入框的ComboBox控件

接着上篇关闭按钮实现登录界面
实现一个可输入，可下拉的用户名输入框

一、Avalonia中的ComboBox控件

Avalonia中Fluent主题里ComboBox实现：

<ControlTheme x:Key="{x:Type ComboBox}" TargetType="ComboBox">
  <Setter Property="Padding" Value="{DynamicResource ComboBoxPadding}" />
  <Setter Property="FocusAdorner" Value="{x:Null}" />
  <Setter Property="MaxDropDownHeight" Value="504" />
  <Setter Property="Foreground" Value="{DynamicResource ComboBoxForeground}" />
  <Setter Property="Background" Value="{DynamicResource ComboBoxBackground}" />
  <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxBorderBrush}" />
  <Setter Property="BorderThickness" Value="{DynamicResource ComboBoxBorderThemeThickness}" />
  <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
  <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
  <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
  <Setter Property="MinHeight" Value="{DynamicResource ComboBoxMinHeight}" />
  <Setter Property="HorizontalContentAlignment" Value="Stretch" />
  <Setter Property="VerticalContentAlignment" Value="Center" />
  <Setter Property="HorizontalAlignment" Value="Left" />
  <Setter Property="VerticalAlignment" Value="Top" />
  <Setter Property="PlaceholderForeground" Value="{DynamicResource ComboBoxPlaceHolderForeground}" />
  <Setter Property="Template">
    <ControlTemplate>
      <DataValidationErrors>
        <Grid ColumnDefinitions="*,32">
          <Border x:Name="Background"
                  Grid.Column="0"
                  Grid.ColumnSpan="2"
                  Background="{TemplateBinding Background}"
                  BorderBrush="{TemplateBinding BorderBrush}"
                  BorderThickness="{TemplateBinding BorderThickness}"
                  CornerRadius="{TemplateBinding CornerRadius}"
                  MinWidth="{DynamicResource ComboBoxThemeMinWidth}" />
          <Border x:Name="HighlightBackground"
                  Grid.Column="0"
                  Grid.ColumnSpan="2"
                  Background="{DynamicResource ComboBoxBackgroundUnfocused}"
                  BorderBrush="{DynamicResource ComboBoxBackgroundBorderBrushUnfocused}"
                  BorderThickness="{TemplateBinding BorderThickness}"
                  CornerRadius="{TemplateBinding CornerRadius}"
                  IsVisible="False"/>
          <TextBlock x:Name="PlaceholderTextBlock"
                     Grid.Column="0"
                     HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                     VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                     Margin="{TemplateBinding Padding}"
                     Text="{TemplateBinding PlaceholderText}"
                     Foreground="{TemplateBinding PlaceholderForeground}"
                     IsVisible="{TemplateBinding SelectionBoxItem, Converter={x:Static ObjectConverters.IsNull}}" />
          <ContentControl x:Name="ContentPresenter"
                          Content="{TemplateBinding SelectionBoxItem}"
                          Grid.Column="0"
                          Margin="{TemplateBinding Padding}"
                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                          ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
          </ContentControl>

          <Border x:Name="DropDownOverlay"
                  Grid.Column="1"
                  Background="Transparent"
                  Margin="0,1,1,1"
                  Width="30"
                  IsVisible="False"
                  HorizontalAlignment="Right" />

          <PathIcon x:Name="DropDownGlyph"
                    Grid.Column="1"
                    UseLayoutRounding="False"
                    IsHitTestVisible="False"
                    Height="12"
                    Width="12"
                    Margin="0,0,10,0"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Center"
                    Foreground="{DynamicResource ComboBoxDropDownGlyphForeground}"
                    Data="M1939 486L2029 576L1024 1581L19 576L109 486L1024 1401L1939 486Z"/>

          <Popup Name="PART_Popup"
                 WindowManagerAddShadowHint="False"
                 IsOpen="{TemplateBinding IsDropDownOpen, Mode=TwoWay}"
                 MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
                 MaxHeight="{TemplateBinding MaxDropDownHeight}"
                 PlacementTarget="Background"
                 IsLightDismissEnabled="True"
                 InheritsTransform="True">
            <Border x:Name="PopupBorder"
                    Background="{DynamicResource ComboBoxDropDownBackground}"
                    BorderBrush="{DynamicResource ComboBoxDropDownBorderBrush}"
                    BorderThickness="{DynamicResource ComboBoxDropdownBorderThickness}"
                    Padding="{DynamicResource ComboBoxDropdownBorderPadding}"
                    HorizontalAlignment="Stretch"
                    CornerRadius="{DynamicResource OverlayCornerRadius}">
              <ScrollViewer HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                            VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                            IsDeferredScrollingEnabled="{TemplateBinding (ScrollViewer.IsDeferredScrollingEnabled)}">
                <ItemsPresenter Name="PART_ItemsPresenter"
                                Margin="{DynamicResource ComboBoxDropdownContentMargin}"
                                ItemsPanel="{TemplateBinding ItemsPanel}" />
              </ScrollViewer>
            </Border>
          </Popup>
        </Grid>
      </DataValidationErrors>
    </ControlTemplate>
  </Setter>

  <!--  PointerOver State  -->
  <Style Selector="^:pointerover /template/ Border#Background">
    <Setter Property="Background" Value="{DynamicResource ComboBoxBackgroundPointerOver}" />
    <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxBorderBrushPointerOver}" />
  </Style>

  <!--  Pressed State  -->
  <Style Selector="^:pressed /template/ Border#Background">
    <Setter Property="Background" Value="{DynamicResource ComboBoxBackgroundPressed}" />
    <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxBorderBrushPressed}" />
  </Style>

  <!-- Error State -->
  <Style Selector="^:error /template/ Border#Background">
    <Setter Property="BorderBrush" Value="{DynamicResource SystemControlErrorTextForegroundBrush}" />
  </Style>

  <!--  Focus Pressed State  -->
  <Style Selector="^:focused:pressed">
    <Style Selector="^ /template/ ContentControl#ContentPresenter">
      <Setter Property="Foreground" Value="{DynamicResource ComboBoxForegroundFocusedPressed}" />
    </Style>
    <Style Selector="^ /template/ TextBlock#PlaceholderTextBlock">
      <Setter Property="Foreground" Value="{DynamicResource ComboBoxPlaceHolderForegroundFocusedPressed}" />
    </Style>
    <Style Selector="^ /template/ PathIcon#DropDownGlyph">
      <Setter Property="Foreground" Value="{DynamicResource ComboBoxDropDownGlyphForegroundFocusedPressed}" />
    </Style>
  </Style>

  <!--  Focused State  -->
  <Style Selector="^:focus-visible">
    <Style Selector="^ /template/ Border#HighlightBackground">
      <Setter Property="IsVisible" Value="True" />
      <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxBackgroundBorderBrushFocused}" />
    </Style>
    <Style Selector="^ /template/ ContentControl#ContentPresenter">
      <Setter Property="Foreground" Value="{DynamicResource ComboBoxForegroundFocused}" />
    </Style>
    <Style Selector="^ /template/ TextBlock#PlaceholderTextBlock">
      <Setter Property="Foreground" Value="{DynamicResource ComboBoxForegroundFocused}" />
    </Style>
    <Style Selector="^ /template/ PathIcon#DropDownGlyph">
      <Setter Property="Foreground" Value="{DynamicResource ComboBoxDropDownGlyphForegroundFocused}" />
    </Style>
  </Style>

  <!--  Disabled State  -->
  <Style Selector="^:disabled">
    <Style Selector="^ /template/ Border#Background">
      <Setter Property="Background" Value="{DynamicResource ComboBoxBackgroundDisabled}" />
      <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxBorderBrushDisabled}" />
    </Style>
    <Style Selector="^ /template/ ContentControl#ContentPresenter">
      <Setter Property="Foreground" Value="{DynamicResource ComboBoxForegroundDisabled}" />
    </Style>
    <Style Selector="^ /template/ TextBlock#PlaceholderTextBlock">
      <Setter Property="Foreground" Value="{DynamicResource ComboBoxForegroundDisabled}" />
    </Style>
    <Style Selector="^ /template/ PathIcon#DropDownGlyph">
      <Setter Property="Foreground" Value="{DynamicResource ComboBoxDropDownGlyphForegroundDisabled}" />
    </Style>
  </Style>
</ControlTheme>

查看源码：

• 1、与WPF不同：

  <Grid ColumnDefinitions="*,32"/>
  <!--等同于WPF-->
 <Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="32" />
    </Grid.ColumnDefinitions>
  </Grid>

• 2、可以看到ComboBox是不能输入的，因此我们需要更改Template模板。

二、更改Template，并添加水印

 <Style Selector="ComboBox">
     <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}" />
     <Setter Property="BorderThickness" Value="{DynamicResource ThemeBorderThickness}" />
     <Setter Property="HorizontalContentAlignment" Value="Stretch" />
     <Setter Property="VerticalContentAlignment" Value="Center" />
     <Setter Property="Padding" Value="4" />
     <Setter Property="MinHeight" Value="20" />
     <Setter Property="PlaceholderForeground" Value="{DynamicResource ThemeForegroundBrush}" />
     <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
     <Setter Property="Template">
         <ControlTemplate>
             <DataValidationErrors>
                 <Grid ColumnDefinitions="*,32">
                     <Border
                         x:Name="Background"
                         Grid.Column="0"
                         Grid.ColumnSpan="2"
                         MinWidth="{DynamicResource ComboBoxThemeMinWidth}"
                         Background="{TemplateBinding Background}"
                         BorderBrush="{TemplateBinding BorderBrush}"
                         BorderThickness="{TemplateBinding BorderThickness}"
                         CornerRadius="{TemplateBinding CornerRadius}" />
                     <Border
                         x:Name="HighlightBackground"
                         Grid.Column="0"
                         Grid.ColumnSpan="2"
                         Background="{DynamicResource ComboBoxBackgroundUnfocused}"
                         BorderBrush="{DynamicResource ComboBoxBackgroundBorderBrushUnfocused}"
                         BorderThickness="{TemplateBinding BorderThickness}"
                         CornerRadius="{TemplateBinding CornerRadius}"
                         IsVisible="False" />
                     <TextBlock
                         Name="hint"
                         Margin="8,0,0,0"
                         VerticalAlignment="Center"
                         FontSize="12"
                         Foreground="White"
                         IsVisible="{TemplateBinding SelectionBoxItem,
                                                     Converter={x:Static ObjectConverters.IsNull}}"
                         Opacity="0.8"
                         Text="请输入用户名！！！" />
                     <TextBox
                         x:Name="PlaceholderTextBlock"
                         Grid.Column="0"
                         Margin="{TemplateBinding Padding}"
                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                         Background="Transparent"
                         BorderThickness="0"
                         Foreground="{TemplateBinding Foreground}"
                         IsInactiveSelectionHighlightEnabled="False"
                         Text="{TemplateBinding SelectionBoxItem}" />
                     <Border
                         x:Name="DropDownOverlay"
                         Grid.Column="1"
                         Width="30"
                         Margin="0,1,1,1"
                         HorizontalAlignment="Right"
                         Background="Transparent"
                         IsVisible="False" />

                     <PathIcon
                         x:Name="DropDownGlyph"
                         Grid.Column="1"
                         Width="12"
                         Height="12"
                         Margin="0,0,10,0"
                         HorizontalAlignment="Right"
                         VerticalAlignment="Center"
                         Data="M1939 486L2029 576L1024 1581L19 576L109 486L1024 1401L1939 486Z"
                         Foreground="{DynamicResource ComboBoxDropDownGlyphForeground}"
                         IsHitTestVisible="False"
                         UseLayoutRounding="False" />
                     <Popup
                         Name="PART_Popup"
                         MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
                         MaxHeight="{TemplateBinding MaxDropDownHeight}"
                         InheritsTransform="True"
                         IsLightDismissEnabled="True"
                         IsOpen="{TemplateBinding IsDropDownOpen,
                                                  Mode=TwoWay}"
                         PlacementTarget="Background"
                         WindowManagerAddShadowHint="False">
                         <Border
                             x:Name="PopupBorder"
                             Padding="{DynamicResource ComboBoxDropdownBorderPadding}"
                             HorizontalAlignment="Stretch"
                             Background="{DynamicResource ComboBoxDropDownBackground}"
                             BorderBrush="{DynamicResource ComboBoxDropDownBorderBrush}"
                             BorderThickness="{DynamicResource ComboBoxDropdownBorderThickness}"
                             CornerRadius="{DynamicResource OverlayCornerRadius}">
                             <ScrollViewer
                                 HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                 IsDeferredScrollingEnabled="{TemplateBinding (ScrollViewer.IsDeferredScrollingEnabled)}"
                                 VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
                                 <ItemsPresenter
                                     Name="PART_ItemsPresenter"
                                     Margin="{DynamicResource ComboBoxDropdownContentMargin}"
                                     ItemsPanel="{TemplateBinding ItemsPanel}" />
                             </ScrollViewer>
                         </Border>
                     </Popup>
                 </Grid>
             </DataValidationErrors>
         </ControlTemplate>
     </Setter>
 </Style>