Split DropDown
ADD
WalletWasabi.Fluent/ViewModels/SearchBar/SearchBarDesignViewModel.cs
+using System.Collections.ObjectModel;
+using ReactiveUI;
+
+namespace WalletWasabi.Fluent.ViewModels.SearchBar;
+
+public class SearchBarDesignViewModel : ReactiveObject
+{
+ public ReadOnlyObservableCollection<SearchItem> Items { get; } = new(new ObservableCollection<SearchItem>(new[]
+ {
+ new SearchItem("Test 1: Short", "Description short", null) {Icon = "settings_bitcoin_regular"},
+ new SearchItem("Test 2: Loooooooooooong", "Description long", null) {Icon = "settings_bitcoin_regular"},
+ new SearchItem("Test 3: Short again", "Description very very loooooooooooong and difficult to read", null)
+ {Icon = "settings_bitcoin_regular"}, new SearchItem("Test 3", "Another", null) {Icon = "settings_bitcoin_regular"}
+ }));
+
+ public string SearchText => "Sample text";
+}
\ No newline at end of file

MODIFY
WalletWasabi.Fluent/Views/SearchBar/SearchBar.axaml
WalletWasabi.Fluent/Views/SearchBar/SearchBar.axaml
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="WalletWasabi.Fluent.Views.SearchBar.SearchBar"
- x:DataType="searchBar:SearchBarViewModel"
xmlns:i="clr-namespace:Avalonia.Xaml.Interactivity;assembly=Avalonia.Xaml.Interactivity"
xmlns:ia="clr-namespace:Avalonia.Xaml.Interactions.Core;assembly=Avalonia.Xaml.Interactions"
xmlns:searchBar="clr-namespace:WalletWasabi.Fluent.ViewModels.SearchBar"
- x:CompileBindings="True" x:Name="UserControl">
+ xmlns:searchBar1="clr-namespace:WalletWasabi.Fluent.Views.SearchBar"
+ x:Name="UserControl">
+
+ <Design.DataContext>
+ <searchBar:SearchBarDesignViewModel />
+ </Design.DataContext>
<Panel>
<TextBox Classes="" x:Name="Parent" DockPanel.Dock="Top" Text="{Binding SearchText, Mode=TwoWay}">
</i:Interaction.Behaviors>
</TextBox>
<Popup x:Name="Popup" PlacementTarget="{Binding #Parent}">
- <ListBox Items="{Binding Items}">
-
- <ListBox.Styles>
- <Style Selector="ListBox:empty">
- <Setter Property="Template">
- <Setter.Value>
- <ControlTemplate>
- <TextBlock>No results</TextBlock>
- </ControlTemplate>
- </Setter.Value>
- </Setter>
- </Style>
- </ListBox.Styles>
-
- <ListBox.ItemTemplate>
- <DataTemplate x:DataType="searchBar:SearchItem">
- <DockPanel Background="Transparent">
-
- <DockPanel.Children>
- <TextBlock Text="{Binding Name}" Width="100" />
- <TextBlock Text="{Binding Description}" />
- </DockPanel.Children>
-
- <i:Interaction.Behaviors>
- <ia:EventTriggerBehavior EventName="PointerPressed">
- <ia:InvokeCommandAction Command="{Binding Command}" />
- <ia:ChangePropertyAction TargetObject="{Binding #Popup}" PropertyName="IsOpen" Value="False"></ia:ChangePropertyAction>
- </ia:EventTriggerBehavior>
- </i:Interaction.Behaviors>
-
- </DockPanel>
- </DataTemplate>
- </ListBox.ItemTemplate>
-
- <i:Interaction.Behaviors>
- <searchBar:AutoSelectFirstItemBehavior />
- </i:Interaction.Behaviors>
-
- </ListBox>
+ <searchBar1:SearchBarDropdown MaxHeight="500" />
</Popup>
</Panel>
</UserControl>

MODIFY
WalletWasabi.Fluent/Views/SearchBar/SearchBar.axaml.cs
WalletWasabi.Fluent/Views/SearchBar/SearchBar.axaml.cs
@@ -24,7 +24,7 @@ public class SearchBar : UserControl
{
var reactiveCommand = ReactiveCommand.Create(
() => { });
- var searchItem = new SearchItem(m.Title, m.Caption, reactiveCommand);
+ var searchItem = new SearchItem(m.Title, m.Caption, reactiveCommand){ Icon = m.IconName };
return searchItem;
});

ADD
WalletWasabi.Fluent/Views/SearchBar/SearchBarDropdown.axaml
+<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"
+ mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+ xmlns:i="clr-namespace:Avalonia.Xaml.Interactivity;assembly=Avalonia.Xaml.Interactivity"
+ x:Class="WalletWasabi.Fluent.Views.SearchBar.SearchBarDropdown"
+ xmlns:searchBar="clr-namespace:WalletWasabi.Fluent.ViewModels.SearchBar"
+ xmlns:conv="clr-namespace:WalletWasabi.Fluent.Converters">
+
+ <Design.DataContext>
+ <searchBar:SearchBarDesignViewModel />
+ </Design.DataContext>
+
+ <ListBox Items="{Binding Items}">
+
+ <ListBox.Styles>
+ <Style Selector="ListBox:empty">
+ <Setter Property="Template">
+ <Setter.Value>
+ <ControlTemplate>
+ <TextBlock>No results</TextBlock>
+ </ControlTemplate>
+ </Setter.Value>
+ </Setter>
+ </Style>
+ </ListBox.Styles>
+
+ <ListBox.ItemTemplate>
+ <DataTemplate x:DataType="searchBar:SearchItem">
+ <DockPanel Background="Transparent">
+
+ <DockPanel.Children>
+ <PathIcon DockPanel.Dock="Left" Width="16" Height="16" Opacity="0.8" VerticalAlignment="Center">
+ <PathIcon.Data>
+ <Binding Path="Icon" Converter="{x:Static conv:NavBarIconConverter.Instance}" />
+ </PathIcon.Data>
+ </PathIcon>
+ <TextBlock Margin="10 0" VerticalAlignment="Center" DockPanel.Dock="Left" Text="{Binding Name}" />
+ <TextBlock FontWeight="ExtraLight" VerticalAlignment="Center" Text="{Binding Description}" />
+ </DockPanel.Children>
+
+ <!--<i:Interaction.Behaviors>
+ <ia:EventTriggerBehavior EventName="PointerPressed">
+ <ia:InvokeCommandAction Command="{Binding Command}" />
+ <ia:ChangePropertyAction TargetObject="{Binding #Popup}" PropertyName="IsOpen" Value="False"></ia:ChangePropertyAction>
+ </ia:EventTriggerBehavior>
+ </i:Interaction.Behaviors>-->
+
+ </DockPanel>
+ </DataTemplate>
+ </ListBox.ItemTemplate>
+
+ <i:Interaction.Behaviors>
+ <searchBar:AutoSelectFirstItemBehavior />
+ </i:Interaction.Behaviors>
+
+ </ListBox>
+</UserControl>
\ No newline at end of file

ADD
WalletWasabi.Fluent/Views/SearchBar/SearchBarDropdown.axaml.cs
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace WalletWasabi.Fluent.Views.SearchBar;
+public partial class SearchBarDropdown : UserControl
+{
+ public SearchBarDropdown()
+ {
+ InitializeComponent();
+ }
+
+ private void InitializeComponent()
+ {
+ AvaloniaXamlLoader.Load(this);
+ }
+}

Split DropDown