Skip to content

AutoSuggestBox content alignment and interactive content #3942

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Oct 31, 2025
Merged

AutoSuggestBox content alignment and interactive content #3942

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d8bca15
Refactor FieldsViewModel and enhance AutoSuggestBox
corvinsz Oct 7, 2025
89f9625
Make _autoSuggestBox3Suggestions nullable
corvinsz Oct 7, 2025
0cb9ebf
Add Hyperlink as interactive element in AutoSuggestBox
corvinsz Oct 30, 2025
16bacff
Adds IsInteractiveElement attached property
Keboo Oct 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
154 changes: 72 additions & 82 deletions src/MainDemo.Wpf/Domain/FieldsViewModel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,60 +1,35 @@
using System.Collections.ObjectModel;
using System.Windows.Media;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using MaterialDesignDemo.Shared.Domain;

namespace MaterialDesignDemo.Domain;
public class FieldsViewModel : ViewModelBase
public partial class FieldsViewModel : ObservableObject
{
private string? _name;
private string? _name2;
private string? _password1 = string.Empty;
private string? _password2 = "pre-filled";
private string? _password1Validated = "pre-filled";
private string? _password2Validated = "pre-filled";
private string? _text1;
private string? _text2;
private ObservableCollection<string>? _autoSuggestBox1Suggestions;
private string? _autoSuggestBox1Text;
private readonly List<string>? _originalAutoSuggestBox1Suggestions;
private ObservableCollection<KeyValuePair<string, Color>>? _autoSuggestBox2Suggestions;
private string? _autoSuggestBox2Text;
private readonly List<KeyValuePair<string, Color>>? _originalAutoSuggestBox2Suggestions;
private readonly List<string> _originalAutoSuggestBox3Suggestions;

public string? Name
{
get => _name;
set => SetProperty(ref _name, value);
}
[ObservableProperty]
private string? _name;

public string? Name2
{
get => _name2;
set => SetProperty(ref _name2, value);
}
[ObservableProperty]
private string? _name2;

public string? Text1
{
get => _text1;
set => SetProperty(ref _text1, value);
}
[ObservableProperty]
private string? _text1;

public string? Text2
{
get => _text2;
set => SetProperty(ref _text2, value);
}
[ObservableProperty]
private string? _text2;

public string? Password1
{
get => _password1;
set => SetProperty(ref _password1, value);
}
[ObservableProperty]
private string? _password1 = string.Empty;

public string? Password2
{
get => _password2;
set => SetProperty(ref _password2, value);
}
[ObservableProperty]
private string? _password2 = "pre-filled";

public string? Password1Validated
{
Expand All @@ -80,43 +55,64 @@ public string? Password2Validated

public FieldsTestObject TestObject => new() { Name = "Mr. Test" };

public ObservableCollection<string>? AutoSuggestBox1Suggestions
[ObservableProperty]
private ObservableCollection<string>? _autoSuggestBox1Suggestions;

[ObservableProperty]
private ObservableCollection<KeyValuePair<string, Color>>? _autoSuggestBox2Suggestions;

[ObservableProperty]
private List<string>? _autoSuggestBox3Suggestions;


[ObservableProperty]
private string? _autoSuggestBox1Text;

partial void OnAutoSuggestBox1TextChanged(string? value)
{
get => _autoSuggestBox1Suggestions;
set => SetProperty(ref _autoSuggestBox1Suggestions, value);
if (_originalAutoSuggestBox1Suggestions != null && value != null)
{
var searchResult = _originalAutoSuggestBox1Suggestions.Where(x => IsMatch(x, value));
AutoSuggestBox1Suggestions = new(searchResult);
}
}

public ObservableCollection<KeyValuePair<string, Color>>? AutoSuggestBox2Suggestions
[ObservableProperty]
private string? _autoSuggestBox2Text;

partial void OnAutoSuggestBox2TextChanged(string? value)
{
get => _autoSuggestBox2Suggestions;
set => SetProperty(ref _autoSuggestBox2Suggestions, value);
if (_originalAutoSuggestBox2Suggestions != null && value != null)
{
var searchResult = _originalAutoSuggestBox2Suggestions.Where(x => IsMatch(x.Key, value));
AutoSuggestBox2Suggestions = new(searchResult);
}
}

public string? AutoSuggestBox1Text
[ObservableProperty]
private string? _autoSuggestBox3Text;

partial void OnAutoSuggestBox3TextChanged(string? value)
{
get => _autoSuggestBox1Text;
set
if (value is not null)
{
if (SetProperty(ref _autoSuggestBox1Text, value) &&
_originalAutoSuggestBox1Suggestions != null && value != null)
{
var searchResult = _originalAutoSuggestBox1Suggestions.Where(x => IsMatch(x, value));
AutoSuggestBox1Suggestions = new ObservableCollection<string>(searchResult);
}
var searchResult = _originalAutoSuggestBox3Suggestions.Where(x => IsMatch(x, value));
AutoSuggestBox3Suggestions = new(searchResult);
}
}

public string? AutoSuggestBox2Text
[RelayCommand]
private void RemoveAutoSuggestBox3Suggestion(string suggestion)
{
get => _autoSuggestBox2Text;
set
_originalAutoSuggestBox3Suggestions.Remove(suggestion);
if (string.IsNullOrEmpty(AutoSuggestBox3Text))
{
AutoSuggestBox3Suggestions = new(_originalAutoSuggestBox3Suggestions);
}
else
{
if (SetProperty(ref _autoSuggestBox2Text, value) &&
_originalAutoSuggestBox2Suggestions != null && value != null)
{
var searchResult = _originalAutoSuggestBox2Suggestions.Where(x => IsMatch(x.Key, value));
AutoSuggestBox2Suggestions = new ObservableCollection<KeyValuePair<string, Color>>(searchResult);
}
var searchResult = _originalAutoSuggestBox3Suggestions.Where(x => IsMatch(x, AutoSuggestBox3Text!));
AutoSuggestBox3Suggestions = new(searchResult);
}
}

Expand All @@ -128,12 +124,16 @@ public FieldsViewModel()
SetPassword1FromViewModelCommand = new AnotherCommandImplementation(_ => Password1 = "Set from ViewModel!");
SetPassword2FromViewModelCommand = new AnotherCommandImplementation(_ => Password2 = "Set from ViewModel!");

_originalAutoSuggestBox1Suggestions = new List<string>()
{
_originalAutoSuggestBox1Suggestions =
[
"Burger", "Fries", "Shake", "Lettuce"
};
];

_originalAutoSuggestBox2Suggestions = new List<KeyValuePair<string, Color>>(GetColors());
_originalAutoSuggestBox2Suggestions = new(GetColors());
_originalAutoSuggestBox3Suggestions =
[
"jsmith", "jdoe", "mscott", "pparker", "bwilliams", "ljohnson", "abrown", "dlee", "cmiller", "tmoore"
];

AutoSuggestBox1Suggestions = new ObservableCollection<string>(_originalAutoSuggestBox1Suggestions);
}
Expand All @@ -158,20 +158,10 @@ private static IEnumerable<KeyValuePair<string, Color>> GetColors()
}
}

public class FieldsTestObject : ViewModelBase
public partial class FieldsTestObject : ObservableObject
{
[ObservableProperty]
private string? _name;
[ObservableProperty]
private string? _content;

public string? Name
{
get => _name;
set => SetProperty(ref _name, value);
}

public string? Content
{
get => _content;
set => SetProperty(ref _content, value);
}
}
120 changes: 82 additions & 38 deletions src/MainDemo.Wpf/Fields.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -692,36 +692,36 @@
<WrapPanel>
<StackPanel Width="256" Margin="0,0,16,16">
<TextBlock Margin="0,0,0,8"
VerticalAlignment="Center"
Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
Text="Simple source list" />
VerticalAlignment="Center"
Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
Text="Simple source list" />

<smtx:XamlDisplay UniqueKey="fields_autosuggestion_1">
<materialDesign:AutoSuggestBox VerticalAlignment="Bottom"
Suggestions="{Binding AutoSuggestBox1Suggestions}"
Text="{Binding AutoSuggestBox1Text, UpdateSourceTrigger=PropertyChanged}" />
Suggestions="{Binding AutoSuggestBox1Suggestions}"
Text="{Binding AutoSuggestBox1Text, UpdateSourceTrigger=PropertyChanged}" />
</smtx:XamlDisplay>
</StackPanel>

<StackPanel Width="256" Margin="0,0,16,16">
<TextBlock Margin="0,0,0,8"
Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
Text="AutoSuggestBox with ItemTemplate" />
Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
Text="AutoSuggestBox with ItemTemplate" />
<smtx:XamlDisplay UniqueKey="fields_autosuggestion_2">
<materialDesign:AutoSuggestBox materialDesign:HintAssist.HelperText="Select color"
materialDesign:HintAssist.Hint="Color"
materialDesign:TextFieldAssist.HasClearButton="True"
DropDownElevation="Dp0"
Suggestions="{Binding AutoSuggestBox2Suggestions}"
Text="{Binding AutoSuggestBox2Text, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
ValueMember="Key">
materialDesign:HintAssist.Hint="Color"
materialDesign:TextFieldAssist.HasClearButton="True"
DropDownElevation="Dp0"
Suggestions="{Binding AutoSuggestBox2Suggestions}"
Text="{Binding AutoSuggestBox2Text, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
ValueMember="Key">
<materialDesign:AutoSuggestBox.ItemTemplate>
<DataTemplate>
<DockPanel>
<Border Width="20"
Height="20"
Background="{Binding Value, Converter={StaticResource ColorToBrushConverter}}"
CornerRadius="10" />
Height="20"
Background="{Binding Value, Converter={StaticResource ColorToBrushConverter}}"
CornerRadius="10" />
<TextBlock Margin="10,0,0,0" Text="{Binding Key}" />
</DockPanel>
</DataTemplate>
Expand All @@ -733,23 +733,23 @@

<StackPanel Width="256" Margin="0,0,16,16">
<TextBlock Margin="0,0,0,8"
Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
Text="Filled AutoSuggestBox" />
Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
Text="Filled AutoSuggestBox" />
<smtx:XamlDisplay UniqueKey="fields_autosuggestion_3">
<materialDesign:AutoSuggestBox materialDesign:HintAssist.Hint="Color"
materialDesign:TextFieldAssist.HasClearButton="True"
DropDownElevation="Dp0"
Style="{StaticResource MaterialDesignFilledAutoSuggestBox}"
Suggestions="{Binding AutoSuggestBox2Suggestions}"
Text="{Binding AutoSuggestBox2Text, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
ValueMember="Key">
materialDesign:TextFieldAssist.HasClearButton="True"
DropDownElevation="Dp0"
Style="{StaticResource MaterialDesignFilledAutoSuggestBox}"
Suggestions="{Binding AutoSuggestBox2Suggestions}"
Text="{Binding AutoSuggestBox2Text, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
ValueMember="Key">
<materialDesign:AutoSuggestBox.ItemTemplate>
<DataTemplate>
<DockPanel>
<Border Width="20"
Height="20"
Background="{Binding Value, Converter={StaticResource ColorToBrushConverter}}"
CornerRadius="10" />
Height="20"
Background="{Binding Value, Converter={StaticResource ColorToBrushConverter}}"
CornerRadius="10" />
<TextBlock Margin="10,0,0,0" Text="{Binding Key}" />
</DockPanel>
</DataTemplate>
Expand All @@ -760,30 +760,74 @@

<StackPanel Width="256" Margin="0,0,16,16">
<TextBlock Margin="0,0,0,8"
Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
Text="Outlined AutoSuggestBox" />
Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
Text="Outlined AutoSuggestBox" />
<smtx:XamlDisplay UniqueKey="fields_autosuggestion_4">
<materialDesign:AutoSuggestBox materialDesign:HintAssist.Hint="Color"
materialDesign:TextFieldAssist.HasClearButton="True"
DropDownElevation="Dp0"
Style="{StaticResource MaterialDesignOutlinedAutoSuggestBox}"
Suggestions="{Binding AutoSuggestBox2Suggestions}"
Text="{Binding AutoSuggestBox2Text, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
ValueMember="Key">
materialDesign:TextFieldAssist.HasClearButton="True"
DropDownElevation="Dp0"
Style="{StaticResource MaterialDesignOutlinedAutoSuggestBox}"
Suggestions="{Binding AutoSuggestBox2Suggestions}"
Text="{Binding AutoSuggestBox2Text, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
ValueMember="Key">
<materialDesign:AutoSuggestBox.ItemTemplate>
<DataTemplate>
<DockPanel>
<Border Width="20"
Height="20"
Background="{Binding Value, Converter={StaticResource ColorToBrushConverter}}"
CornerRadius="10" />
Height="20"
Background="{Binding Value, Converter={StaticResource ColorToBrushConverter}}"
CornerRadius="10" />
<TextBlock Margin="10,0,0,0" Text="{Binding Key}" />
</DockPanel>
</DataTemplate>
</materialDesign:AutoSuggestBox.ItemTemplate>
</materialDesign:AutoSuggestBox>
</smtx:XamlDisplay>
</StackPanel>

<StackPanel Width="512" Margin="0,0,16,16">
<TextBlock Margin="0,0,0,8"
Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
Text="AutoSuggestBox with interactable content" />
<smtx:XamlDisplay UniqueKey="fields_autosuggestion_5">
<materialDesign:AutoSuggestBox materialDesign:HintAssist.Hint="Username"
materialDesign:TextFieldAssist.HasLeadingIcon="True"
materialDesign:TextFieldAssist.LeadingIcon="User"
DropDownBackground="{DynamicResource MaterialDesign.Brush.ToolBar.Background}"
DropDownElevation="Dp24"
DropDownMaxHeight="500"
Suggestions="{Binding AutoSuggestBox3Suggestions}"
Text="{Binding AutoSuggestBox3Text, UpdateSourceTrigger=PropertyChanged}">
<materialDesign:AutoSuggestBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
VerticalAlignment="Center"
Text="{Binding .}" />
<Button Grid.Column="1"
Padding="2,0,0,0"
Command="{Binding DataContext.RemoveAutoSuggestBox3SuggestionCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
CommandParameter="{Binding .}"
Focusable="False"
Style="{StaticResource MaterialDesignToolButton}">
<materialDesign:PackIcon Width="16"
Height="16"
Margin="0"
Kind="CloseCircle" />
</Button>
</Grid>
</DataTemplate>
</materialDesign:AutoSuggestBox.ItemTemplate>
</materialDesign:AutoSuggestBox>
</smtx:XamlDisplay>
</StackPanel>



</WrapPanel>
</StackPanel>
</UserControl>
Loading
Loading