瀏覽代碼

Starting to add search bar

Kenric Nugteren 4 月之前
父節點
當前提交
60f2401ebd

+ 34 - 0
InABox.Avalonia/Components/SearchBar/SearchBar.axaml

@@ -0,0 +1,34 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+			 xmlns:components="clr-namespace:InABox.Avalonia.Components"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="100"
+             x:Class="InABox.Avalonia.Components.SearchBar"
+			 x:DataType="components:SearchBar">
+	<Border Background="{StaticResource PrsTileBackground}"
+			BorderBrush="{StaticResource PrsTileBorder}"
+			CornerRadius="{StaticResource PrsCornerRadius}"
+			Height="40"
+			Padding="3">
+		<Grid>
+			<Grid.ColumnDefinitions>
+				<ColumnDefinition Width="Auto"/>
+				<ColumnDefinition Width="*"/>
+			</Grid.ColumnDefinitions>
+			<Image Classes="Small" Source="{SvgImage /Images/search.svg}"
+				   Grid.Column="0"/>
+			<TextBox Name="TextBox"
+					 Grid.Column="1"
+					 Watermark="{Binding $parent[components:SearchBar].PlaceholderText}"
+					 Text="{Binding $parent[components:SearchBar].Text}"
+					 TextChanged="TextBox_TextChanged"
+					 VerticalAlignment="Center"
+					 VerticalContentAlignment="Center"
+					 Background="Transparent"
+					 Margin="0"
+					 BorderBrush="Transparent"
+					 BorderThickness="0"/>
+		</Grid>
+	</Border>
+</UserControl>

+ 50 - 0
InABox.Avalonia/Components/SearchBar/SearchBar.axaml.cs

@@ -0,0 +1,50 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Data;
+using Avalonia.Markup.Xaml;
+using System.Windows.Input;
+
+namespace InABox.Avalonia.Components;
+
+public partial class SearchBar : UserControl
+{
+    public static readonly StyledProperty<string> PlaceholderTextProperty =
+        AvaloniaProperty.Register<SearchBar, string>(nameof(PlaceholderText), "Search...");
+
+    public string PlaceholderText
+    {
+        get => GetValue(PlaceholderTextProperty);
+        set => SetValue(PlaceholderTextProperty, value);
+    }
+
+    public static readonly StyledProperty<ICommand?> CommandProperty =
+        AvaloniaProperty.Register<SearchBar, ICommand?>(nameof(Command), null);
+   
+    public ICommand? Command
+    {
+        get => GetValue(CommandProperty);
+        set => SetValue(CommandProperty, value);
+    }
+
+    public static readonly StyledProperty<string> TextProperty =
+        AvaloniaProperty.Register<SearchBar, string>(nameof(Text), "", defaultBindingMode: BindingMode.TwoWay);
+
+    public string Text
+    {
+        get => GetValue(TextProperty);
+        set => SetValue(TextProperty, value);
+    }
+
+    public SearchBar()
+    {
+        InitializeComponent();
+    }
+
+    private void TextBox_TextChanged(object? sender, TextChangedEventArgs e)
+    {
+        if (Command is not null && Command.CanExecute(null))
+        {
+            Command.Execute(null);
+        }
+    }
+}

+ 28 - 0
InABox.Avalonia/Images/Images.cs

@@ -0,0 +1,28 @@
+using System;
+using System.Reflection;
+using Avalonia.Svg.Skia;
+using InABox.Avalonia.Components;
+using Syncfusion.Pdf.Parsing;
+
+namespace PRS.Avalonia;
+
+public static class Images
+{
+    
+    public static SvgImage? LoadSVG(string image, Assembly? assembly = null)
+    {
+        SvgImage? result = null;
+        if (!string.IsNullOrWhiteSpace(image))
+        {
+            SvgSource.EnableThrowOnMissingResource = false;
+            var source = assembly != null 
+                ? SvgSource.Load($"avares://{assembly.GetName().Name}{image}")
+                : SvgSource.Load($"avares://{Assembly.GetCallingAssembly().GetName().Name}{image}"); 
+            result = new SvgImage { Source = source };
+        }
+
+        return result;
+    }
+    
+    public static SvgImage? search => LoadSVG("/Images/search.svg");
+}

+ 11 - 0
InABox.Avalonia/Images/search.svg

@@ -0,0 +1,11 @@
+<svg height="512" viewBox="0 0 32 32" width="512" xmlns="http://www.w3.org/2000/svg">
+    <g id="Ikon">
+        <path d="m22 19.81-2.1 2.1-2.62-2.62a8.9081 8.9081 0 0 0 2.08-2.12z" fill="#757575"/>
+        <path d="m28.1 28.1a2.5107 2.5107 0 0 1 -3.54 0l-5.42-5.43 3.53-3.53 5.43 5.42a2.5169 2.5169 0 0 1 0 3.54z"
+              fill="#f9a825"/>
+        <circle cx="12" cy="12" fill="#eee" r="9"/>
+    </g>
+    <g id="Line">
+        <path d="m28.8066 23.8521-5.43-5.42a.9944.9944 0 0 0 -1.369-.0286l-1.3484-1.3484c5.2893-8.5045-5.0935-19.9918-14.7392-12.9946-10.0739 8.1359.6986 22.8215 11.2162 16.5l1.35 1.35a1.0066 1.0066 0 0 0 -.0538 1.4664l5.4917 5.4951a3.5025 3.5025 0 0 0 4.8825-5.0199zm-21.6707-18.2035c8.5533-6.3148 18.0541 6.0889 9.7285 12.7027-8.5535 6.315-18.0544-6.0888-9.7285-12.7027zm11.6307 13.7137q.3582-.33.68-.6909l1.1393 1.1386-.686.686zm8.6553 8a1.4842 1.4842 0 0 1 -2.1538.0308l-4.7144-4.7231 2.1163-2.1163 4.7188 4.71a1.5211 1.5211 0 0 1 .0331 2.0991z"/>
+    </g>
+</svg>

+ 14 - 0
InABox.Avalonia/InABox.Avalonia.csproj

@@ -7,8 +7,13 @@
         <RootNamespace>InABox.Avalonia</RootNamespace>
         <RootNamespace>InABox.Avalonia</RootNamespace>
         <LangVersion>default</LangVersion>
         <LangVersion>default</LangVersion>
         <AvaloniaUseCompiledBindingsByDefault>true</AvaloniaUseCompiledBindingsByDefault>
         <AvaloniaUseCompiledBindingsByDefault>true</AvaloniaUseCompiledBindingsByDefault>
+        <Configurations>Debug;Release;DebugDev</Configurations>
     </PropertyGroup>
     </PropertyGroup>
 
 
+    <ItemGroup>
+      <None Remove="Images\search.svg" />
+    </ItemGroup>
+
     <ItemGroup>
     <ItemGroup>
       <ProjectReference Include="..\InABox.Avalonia.Platform\InABox.Avalonia.Platform.csproj" />
       <ProjectReference Include="..\InABox.Avalonia.Platform\InABox.Avalonia.Platform.csproj" />
       <ProjectReference Include="..\InABox.Core\InABox.Core.csproj" />
       <ProjectReference Include="..\InABox.Core\InABox.Core.csproj" />
@@ -42,11 +47,20 @@
       <AdditionalFiles Include="Components\Modules\ModuleList\AvaloniaModuleList.axaml" />
       <AdditionalFiles Include="Components\Modules\ModuleList\AvaloniaModuleList.axaml" />
     </ItemGroup>
     </ItemGroup>
 
 
+    <ItemGroup>
+      <AvaloniaResource Include="Images\search.svg">
+        <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+      </AvaloniaResource>
+    </ItemGroup>
+
     <ItemGroup>
     <ItemGroup>
       <Compile Update="Components\ModuleGrid\PrsModuleGrid.axaml.cs">
       <Compile Update="Components\ModuleGrid\PrsModuleGrid.axaml.cs">
         <DependentUpon>PrsModuleGrid.axaml</DependentUpon>
         <DependentUpon>PrsModuleGrid.axaml</DependentUpon>
         <SubType>Code</SubType>
         <SubType>Code</SubType>
       </Compile>
       </Compile>
+      <Compile Update="Components\SearchBar\SearchBar.axaml.cs">
+        <DependentUpon>SearchBar.axaml</DependentUpon>
+      </Compile>
     </ItemGroup>
     </ItemGroup>
 
 
     <ItemGroup>
     <ItemGroup>