feat: Add AutoCompleteBox
This commit is contained in:
rabbitism
parent
b977bdb617
commit
fddf351970
@ -16,6 +16,9 @@
|
||||
<TabItem Header="Overview">
|
||||
<pages:Overview />
|
||||
</TabItem>
|
||||
<TabItem Header="AutoCompleteBox">
|
||||
<pages:AutoCompleteBoxDemo />
|
||||
</TabItem>
|
||||
<TabItem Header="Border">
|
||||
<pages:BorderDemo />
|
||||
</TabItem>
|
||||
|
||||
41
src/Semi.Avalonia.Demo/Pages/AutoCompleteBoxDemo.axaml
Normal file
41
src/Semi.Avalonia.Demo/Pages/AutoCompleteBoxDemo.axaml
Normal file
@ -0,0 +1,41 @@
|
||||
<UserControl
|
||||
x:Class="Semi.Avalonia.Demo.Pages.AutoCompleteBoxDemo"
|
||||
xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
xmlns:local="clr-namespace:Semi.Avalonia.Demo.Pages"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
d:DesignHeight="450"
|
||||
d:DesignWidth="800"
|
||||
mc:Ignorable="d">
|
||||
<Design.DataContext>
|
||||
<local:AutoCompleteBoxDemoViewModel />
|
||||
</Design.DataContext>
|
||||
<StackPanel
|
||||
Margin="20"
|
||||
HorizontalAlignment="Left"
|
||||
Spacing="20">
|
||||
<StackPanel.Styles>
|
||||
<Style Selector="AutoCompleteBox">
|
||||
<Setter Property="Width" Value="300" />
|
||||
</Style>
|
||||
</StackPanel.Styles>
|
||||
<AutoCompleteBox Items="{Binding States}" ValueMemberBinding="{Binding Name, x:DataType=local:StateData}">
|
||||
<AutoCompleteBox.ItemTemplate>
|
||||
<DataTemplate DataType="local:StateData">
|
||||
<TextBlock Text="{Binding Name}" />
|
||||
</DataTemplate>
|
||||
</AutoCompleteBox.ItemTemplate>
|
||||
</AutoCompleteBox>
|
||||
<AutoCompleteBox
|
||||
Items="{Binding States}"
|
||||
Theme="{StaticResource BorderlessAutoCompleteBox}"
|
||||
ValueMemberBinding="{Binding Name, x:DataType=local:StateData}">
|
||||
<AutoCompleteBox.ItemTemplate>
|
||||
<DataTemplate DataType="local:StateData">
|
||||
<TextBlock Text="{Binding Name}" />
|
||||
</DataTemplate>
|
||||
</AutoCompleteBox.ItemTemplate>
|
||||
</AutoCompleteBox>
|
||||
</StackPanel>
|
||||
</UserControl>
|
||||
99
src/Semi.Avalonia.Demo/Pages/AutoCompleteBoxDemo.axaml.cs
Normal file
99
src/Semi.Avalonia.Demo/Pages/AutoCompleteBoxDemo.axaml.cs
Normal file
@ -0,0 +1,99 @@
|
||||
using System.Collections.ObjectModel;
|
||||
using Avalonia;
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Markup.Xaml;
|
||||
using System.Collections.Generic;
|
||||
using CommunityToolkit.Mvvm.ComponentModel;
|
||||
|
||||
namespace Semi.Avalonia.Demo.Pages;
|
||||
|
||||
public partial class AutoCompleteBoxDemo : UserControl
|
||||
{
|
||||
public AutoCompleteBoxDemo()
|
||||
{
|
||||
InitializeComponent();
|
||||
this.DataContext = new AutoCompleteBoxDemoViewModel();
|
||||
}
|
||||
}
|
||||
|
||||
public class AutoCompleteBoxDemoViewModel: ObservableObject
|
||||
{
|
||||
public ObservableCollection<StateData> States { get; set; }
|
||||
|
||||
public AutoCompleteBoxDemoViewModel()
|
||||
{
|
||||
States = new ObservableCollection<StateData>(GetStates());
|
||||
|
||||
}
|
||||
|
||||
private static List<StateData> GetStates()
|
||||
{
|
||||
return new List<StateData>
|
||||
{
|
||||
new StateData("Alabama", "AL", "Montgomery"),
|
||||
new StateData("Alaska", "AK", "Juneau"),
|
||||
new StateData("Arizona", "AZ", "Phoenix"),
|
||||
new StateData("Arkansas", "AR", "Little Rock"),
|
||||
new StateData("California", "CA", "Sacramento"),
|
||||
new StateData("Colorado", "CO", "Denver"),
|
||||
new StateData("Connecticut", "CT", "Hartford"),
|
||||
new StateData("Delaware", "DE", "Dover"),
|
||||
new StateData("Florida", "FL", "Tallahassee"),
|
||||
new StateData("Georgia", "GA", "Atlanta"),
|
||||
new StateData("Hawaii", "HI", "Honolulu"),
|
||||
new StateData("Idaho", "ID", "Boise"),
|
||||
new StateData("Illinois", "IL", "Springfield"),
|
||||
new StateData("Indiana", "IN", "Indianapolis"),
|
||||
new StateData("Iowa", "IA", "Des Moines"),
|
||||
new StateData("Kansas", "KS", "Topeka"),
|
||||
new StateData("Kentucky", "KY", "Frankfort"),
|
||||
new StateData("Louisiana", "LA", "Baton Rouge"),
|
||||
new StateData("Maine", "ME", "Augusta"),
|
||||
new StateData("Maryland", "MD", "Annapolis"),
|
||||
new StateData("Massachusetts", "MA", "Boston"),
|
||||
new StateData("Michigan", "MI", "Lansing"),
|
||||
new StateData("Minnesota", "MN", "St. Paul"),
|
||||
new StateData("Mississippi", "MS", "Jackson"),
|
||||
new StateData("Missouri", "MO", "Jefferson City"),
|
||||
new StateData("Montana", "MT", "Helena"),
|
||||
new StateData("Nebraska", "NE", "Lincoln"),
|
||||
new StateData("Nevada", "NV", "Carson City"),
|
||||
new StateData("New Hampshire", "NH", "Concord"),
|
||||
new StateData("New Jersey", "NJ", "Trenton"),
|
||||
new StateData("New Mexico", "NM", "Santa Fe"),
|
||||
new StateData("New York", "NY", "Albany"),
|
||||
new StateData("North Carolina", "NC", "Raleigh"),
|
||||
new StateData("North Dakota", "ND", "Bismarck"),
|
||||
new StateData("Ohio", "OH", "Columbus"),
|
||||
new StateData("Oklahoma", "OK", "Oklahoma City"),
|
||||
new StateData("Oregon", "OR", "Salem"),
|
||||
new StateData("Pennsylvania", "PA", "Harrisburg"),
|
||||
new StateData("Rhode Island", "RI", "Providence"),
|
||||
new StateData("South Carolina", "SC", "Columbia"),
|
||||
new StateData("South Dakota", "SD", "Pierre"),
|
||||
new StateData("Tennessee", "TN", "Nashville"),
|
||||
new StateData("Texas", "TX", "Austin"),
|
||||
new StateData("Utah", "UT", "Salt Lake City"),
|
||||
new StateData("Vermont", "VT", "Montpelier"),
|
||||
new StateData("Virginia", "VA", "Richmond"),
|
||||
new StateData("Washington", "WA", "Olympia"),
|
||||
new StateData("West Virginia", "WV", "Charleston"),
|
||||
new StateData("Wisconsin", "WI", "Madison"),
|
||||
new StateData("Wyoming", "WY", "Cheyenne"),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
public class StateData
|
||||
{
|
||||
public string Name { get; private set; }
|
||||
public string Abbreviation { get; private set; }
|
||||
public string Capital { get; private set; }
|
||||
|
||||
public StateData(string name, string abbreviation, string capital)
|
||||
{
|
||||
Name = name;
|
||||
Abbreviation = abbreviation;
|
||||
Capital = capital;
|
||||
}
|
||||
}
|
||||
@ -22,6 +22,7 @@
|
||||
<PackageReference Include="Avalonia.Desktop" Version="11.0.0-preview4" />
|
||||
<!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
|
||||
<PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="11.0.0-preview4" />
|
||||
<PackageReference Include="CommunityToolkit.Mvvm" Version="8.1.0-preview3" />
|
||||
<PackageReference Include="XamlNameReferenceGenerator" Version="1.4.2" />
|
||||
</ItemGroup>
|
||||
<ItemGroup>
|
||||
|
||||
67
src/Semi.Avalonia/Controls/AutoCompleteBox.axaml
Normal file
67
src/Semi.Avalonia/Controls/AutoCompleteBox.axaml
Normal file
@ -0,0 +1,67 @@
|
||||
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||
<Design.PreviewWith>
|
||||
<StackPanel Margin="20" Spacing="20">
|
||||
<TextBox Text="Hello" />
|
||||
<AutoCompleteBox Width="100" />
|
||||
</StackPanel>
|
||||
</Design.PreviewWith>
|
||||
<ControlTheme x:Key="{x:Type AutoCompleteBox}" TargetType="AutoCompleteBox">
|
||||
<Setter Property="Background" Value="{DynamicResource AutoCompleteBoxDefaultBackground}" />
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource AutoCompleteBoxDefaultBorderBrush}" />
|
||||
<Setter Property="AutoCompleteBox.MaxDropDownHeight" Value="600" />
|
||||
<Setter Property="BorderThickness" Value="1" />
|
||||
<Setter Property="Padding" Value="4" />
|
||||
<Setter Property="Template">
|
||||
<ControlTemplate TargetType="AutoCompleteBox">
|
||||
<Panel>
|
||||
<TextBox
|
||||
Name="PART_TextBox"
|
||||
Padding="{TemplateBinding Padding}"
|
||||
Background="{TemplateBinding Background}"
|
||||
BorderBrush="{TemplateBinding BorderBrush}"
|
||||
BorderThickness="{TemplateBinding BorderThickness}"
|
||||
CornerRadius="{TemplateBinding CornerRadius}"
|
||||
DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}"
|
||||
Watermark="{TemplateBinding Watermark}" />
|
||||
|
||||
<Popup
|
||||
Name="PART_Popup"
|
||||
MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
|
||||
MaxHeight="{TemplateBinding MaxDropDownHeight}"
|
||||
IsLightDismissEnabled="True"
|
||||
PlacementTarget="{TemplateBinding}">
|
||||
<Border
|
||||
Margin="{DynamicResource AutoCompleteBoxPopupMargin}"
|
||||
HorizontalAlignment="Stretch"
|
||||
Background="{DynamicResource AutoCompleteBoxPopupBackground}"
|
||||
BorderBrush="{DynamicResource AutoCompleteBoxPopupBorderBrush}"
|
||||
BorderThickness="{DynamicResource AutoCompleteBoxPopupBorderThickness}"
|
||||
BoxShadow="{DynamicResource AutoCompleteBoxPopupBoxShadow}"
|
||||
CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}">
|
||||
<ListBox
|
||||
Name="PART_SelectingItemsControl"
|
||||
Background="{TemplateBinding Background}"
|
||||
Foreground="{TemplateBinding Foreground}"
|
||||
ItemTemplate="{TemplateBinding ItemTemplate}"
|
||||
ScrollViewer.HorizontalScrollBarVisibility="Auto"
|
||||
ScrollViewer.VerticalScrollBarVisibility="Auto" />
|
||||
</Border>
|
||||
</Popup>
|
||||
</Panel>
|
||||
</ControlTemplate>
|
||||
</Setter>
|
||||
</ControlTheme>
|
||||
|
||||
<ControlTheme
|
||||
x:Key="BorderlessAutoCompleteBox"
|
||||
BasedOn="{StaticResource {x:Type AutoCompleteBox}}"
|
||||
TargetType="AutoCompleteBox">
|
||||
<ControlTheme.Children>
|
||||
<Style Selector="^ /template/ TextBox#PART_TextBox">
|
||||
<Setter Property="Theme" Value="{StaticResource BorderlessTextBox}" />
|
||||
</Style>
|
||||
</ControlTheme.Children>
|
||||
<Setter Property="Background" Value="{DynamicResource AutoCompleteBoxBorderlessBackground}" />
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource AutoCompleteBoxBorderlessBorderBrush}" />
|
||||
</ControlTheme>
|
||||
</ResourceDictionary>
|
||||
@ -1,6 +1,7 @@
|
||||
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||
<!-- Add Resources Here -->
|
||||
<ResourceDictionary.MergedDictionaries>
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Controls/AutoCompleteBox.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Controls/Border.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Controls/Button.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Controls/CheckBox.axaml" />
|
||||
|
||||
12
src/Semi.Avalonia/Themes/Light/AutoCompleteBox.axaml
Normal file
12
src/Semi.Avalonia/Themes/Light/AutoCompleteBox.axaml
Normal file
@ -0,0 +1,12 @@
|
||||
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
||||
<SolidColorBrush x:Key="AutoCompleteBoxDefaultBorderBrush" Color="#C6CACD" />
|
||||
<SolidColorBrush x:Key="AutoCompleteBoxDefaultBackground" Color="Transparent" />
|
||||
<BoxShadows x:Key="AutoCompleteBoxPopupBoxShadow">0 0 8 0 #1A000000</BoxShadows>
|
||||
<SolidColorBrush x:Key="AutoCompleteBoxPopupBackground" Color="White" />
|
||||
<SolidColorBrush x:Key="AutoCompleteBoxPopupBorderBrush" Opacity="0.08" Color="#1C1F23" />
|
||||
<Thickness x:Key="AutoCompleteBoxPopupBorderThickness">1</Thickness>
|
||||
<Thickness x:Key="AutoCompleteBoxPopupMargin">0 4</Thickness>
|
||||
<CornerRadius x:Key="AutoCompleteBoxPopupCornerRadius">6</CornerRadius>
|
||||
<SolidColorBrush x:Key="AutoCompleteBoxBorderlessBorderBrush" Color="Transparent" />
|
||||
<SolidColorBrush x:Key="AutoCompleteBoxBorderlessBackground" Opacity="0.05" Color="#2E3238" />
|
||||
</ResourceDictionary>
|
||||
@ -2,6 +2,7 @@
|
||||
<ResourceDictionary.MergedDictionaries>
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Palette.axaml" />
|
||||
<!-- Controls -->
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/AutoCompleteBox.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Border.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Button.axaml" />
|
||||
<ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/CheckBox.axaml" />
|
||||
|
||||
@ -4,47 +4,23 @@
|
||||
xmlns:sys="clr-namespace:System;assembly=System.Runtime">
|
||||
<SolidColorBrush x:Key="TextBoxDefaultBorderBrush" Color="#C6CACD" />
|
||||
<SolidColorBrush x:Key="TextBoxDefaultBackground" Color="Transparent" />
|
||||
<SolidColorBrush
|
||||
x:Key="TextBoxFocusBackground"
|
||||
Opacity="0.05"
|
||||
Color="#E6E8EA" />
|
||||
<SolidColorBrush x:Key="TextBoxFocusBackground" Opacity="0.05" Color="#E6E8EA" />
|
||||
<SolidColorBrush x:Key="TextBoxPointerOverBorderBrush" Color="#0062D6" />
|
||||
<SolidColorBrush x:Key="TextBoxFocusBorderBrush" Color="#004FB3" />
|
||||
<SolidColorBrush x:Key="TextBoxForeground" Color="#1C1F23" />
|
||||
<SolidColorBrush x:Key="TextBoxWatermarkForeground" Color="#1C1F23" />
|
||||
<SolidColorBrush
|
||||
x:Key="TextBoxInnerForeground"
|
||||
Opacity="0.62"
|
||||
Color="#1C1F23" />
|
||||
<SolidColorBrush x:Key="TextBoxInnerForeground" Opacity="0.62" Color="#1C1F23" />
|
||||
|
||||
<SolidColorBrush
|
||||
x:Key="TextBoxButtonDefaultForeground"
|
||||
Opacity="0.2"
|
||||
Color="#2E3238" />
|
||||
<SolidColorBrush
|
||||
x:Key="TextBoxButtonPointerOverForeground"
|
||||
Opacity="0.4"
|
||||
Color="#2E3238" />
|
||||
<SolidColorBrush x:Key="TextBoxButtonDefaultForeground" Opacity="0.2" Color="#2E3238" />
|
||||
<SolidColorBrush x:Key="TextBoxButtonPointerOverForeground" Opacity="0.4" Color="#2E3238" />
|
||||
|
||||
<SolidColorBrush
|
||||
x:Key="TextBoxDisabledBackground"
|
||||
Opacity="0.04"
|
||||
Color="#403238" />
|
||||
<SolidColorBrush
|
||||
x:Key="TextBoxDisabledForeground"
|
||||
Opacity="0.35"
|
||||
Color="#1C1F23" />
|
||||
<SolidColorBrush x:Key="TextBoxDisabledBackground" Opacity="0.04" Color="#403238" />
|
||||
<SolidColorBrush x:Key="TextBoxDisabledForeground" Opacity="0.35" Color="#1C1F23" />
|
||||
<SolidColorBrush x:Key="TextBoxDisabledBorderBrush" Color="#E6E8EA" />
|
||||
|
||||
<SolidColorBrush
|
||||
x:Key="TextBoxBorderlessDefaultBackground"
|
||||
Opacity="0.05"
|
||||
Color="#2E3238" />
|
||||
<SolidColorBrush x:Key="TextBoxBorderlessDefaultBackground" Opacity="0.05" Color="#2E3238" />
|
||||
<SolidColorBrush x:Key="TextBoxBorderlessDefaultBorderBrush" Color="Transparent" />
|
||||
<SolidColorBrush
|
||||
x:Key="TextBoxBorderlessPointeroverBackground"
|
||||
Opacity="0.09"
|
||||
Color="#2E3238" />
|
||||
<SolidColorBrush x:Key="TextBoxBorderlessPointeroverBackground" Opacity="0.09" Color="#2E3238" />
|
||||
<SolidColorBrush x:Key="TextBoxBorderlessPointeroverBorderBrush" Color="Transparent" />
|
||||
|
||||
<sys:Double x:Key="TextBoxDefaultHeight">30</sys:Double>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user