Skip to content

Commit dedefbf

Browse files
committed
Changed Templating, Added X button to tokens
1 parent e9dd06b commit dedefbf

File tree

6 files changed

+150
-44
lines changed

6 files changed

+150
-44
lines changed

AvaloniaTokenizingTextBox.Sample/App.axaml

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,19 @@
66
<local:ViewLocator/>
77
</Application.DataTemplates>
88

9-
<Application.Styles>
9+
<Application.Styles>
10+
<StyleInclude Source="avares://Avalonia.Themes.Default/DefaultTheme.xaml"/>
11+
<StyleInclude Source="avares://Avalonia.Themes.Default/Accents/BaseLight.xaml"/>
12+
<FluentTheme Mode="Light"/>
13+
14+
<!--<StyleInclude Source="avares://Avalonia.Themes.Fluent/FluentLight.xaml" />
15+
<StyleInclude Source="avares://Avalonia.Themes.Fluent/Accents/BaseLight.xaml" />-->
16+
17+
<!--<StyleInclude Source="avares://Avalonia.Themes.Fluent/FluentDark.xaml" />
18+
<StyleInclude Source="avares://Avalonia.Themes.Fluent/Accents/BaseDark.xaml" />-->
19+
1020
<StyleInclude Source="avares://AvaloniaTokenizingTextBox/Styles/TokenizingTextBox.xaml"/>
1121
<StyleInclude Source="avares://AvaloniaTokenizingTextBox/Styles/TokenizingTextBoxItem.xaml"/>
1222

13-
<FluentTheme Mode="Light"/>
1423
</Application.Styles>
1524
</Application>

AvaloniaTokenizingTextBox.Sample/Views/MainWindow.axaml

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,20 @@
1414
<vm:MainWindowViewModel/>
1515
</Design.DataContext>
1616

17-
<DockPanel>
17+
<DockPanel Margin="10">
1818
<c:TokenizingTextBox DockPanel.Dock="Top"
1919
TokenDelimiter=";"
2020
Items="{Binding Tokens}"
21-
SelectedItem="{Binding SelectedItem}" />
21+
SelectedItem="{Binding SelectedItem}"
22+
/>
2223

2324
<Grid>
2425
<Grid.ColumnDefinitions>
2526
<ColumnDefinition />
2627
<ColumnDefinition />
2728
</Grid.ColumnDefinitions>
28-
<StackPanel Grid.Column="0">
29-
<TextBlock Text="Items List" />
29+
<StackPanel Grid.Column="0" Margin="0,10">
30+
<TextBlock Text="Bound List" />
3031
<ListBox Name="lstBox" Items="{Binding Tokens}" SelectedItem="{Binding SelectedItem}"/>
3132
</StackPanel>
3233
</Grid>

AvaloniaTokenizingTextBox/Controls/TokenizingTextBox.cs

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,18 @@ protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
106106

107107
#endregion Protected Methods
108108

109+
#region Public Methods
110+
111+
public void DeleteSelected()
112+
{
113+
if (SelectedItem == null) return;
114+
int index = IndexOf(Items, SelectedItem);
115+
(Items as IList)?.RemoveAt(index);
116+
_textBox?.Focus();
117+
}
118+
119+
#endregion Public Methods
120+
109121
#region Private Methods
110122

111123
private void AddToken(string token)
@@ -114,6 +126,7 @@ private void AddToken(string token)
114126
(Items as IList)?.Add(token);
115127
}
116128

129+
117130
private void TextBox_GotFocus(object? sender, GotFocusEventArgs e) => SelectedIndex = -1;
118131

119132
private void TextBox_KeyDown(object? sender, KeyEventArgs e)

AvaloniaTokenizingTextBox/Controls/TokenizingTextBoxItem.cs

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
using Avalonia.Controls;
33
using Avalonia.Controls.Metadata;
44
using Avalonia.Controls.Mixins;
5+
using Avalonia.Controls.Primitives;
56

67
namespace AvaloniaTokenizingTextBox.Controls
78
{
@@ -15,6 +16,9 @@ namespace AvaloniaTokenizingTextBox.Controls
1516
[PseudoClasses(":pressed", ":selected")]
1617
public class TokenizingTextBoxItem : ContentControl, ISelectable
1718
{
19+
private const string PART_Button = "PART_Button";
20+
private Button? _button;
21+
1822
/// <summary>
1923
/// Defines the <see cref="IsSelected"/> property.
2024
/// </summary>
@@ -36,5 +40,24 @@ static TokenizingTextBoxItem()
3640
PressedMixin.Attach<TokenizingTextBoxItem>();
3741
FocusableProperty.OverrideDefaultValue<TokenizingTextBoxItem>(true);
3842
}
43+
44+
protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
45+
{
46+
base.OnApplyTemplate(e);
47+
48+
if (_button != null)
49+
{
50+
_button.Click -= Button_Click;
51+
}
52+
53+
_button = (Button)e.NameScope.Get<Control>(PART_Button);
54+
55+
if (_button != null)
56+
{
57+
_button.Click += Button_Click;
58+
}
59+
}
60+
61+
private void Button_Click(object? sender, Avalonia.Interactivity.RoutedEventArgs e) => IsSelected = true;
3962
}
4063
}

AvaloniaTokenizingTextBox/Styles/TokenizingTextBox.xaml

Lines changed: 67 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,77 @@
11
<Styles xmlns="https://github.com/avaloniaui"
22
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3-
xmlns:Controls="clr-namespace:AvaloniaTokenizingTextBox.Controls;assembly=AvaloniaTokenizingTextBox">
4-
<Style Selector="Controls|TokenizingTextBox">
3+
xmlns:c="clr-namespace:AvaloniaTokenizingTextBox.Controls;assembly=AvaloniaTokenizingTextBox">
4+
5+
<Design.PreviewWith>
6+
<DockPanel Height="100">
7+
<c:TokenizingTextBox Width="500" DockPanel.Dock="Top" Margin="10" InputText="Test String">
8+
<c:TokenizingTextBoxItem>
9+
Text
10+
</c:TokenizingTextBoxItem>
11+
<c:TokenizingTextBoxItem>
12+
Text1
13+
</c:TokenizingTextBoxItem>
14+
15+
</c:TokenizingTextBox>
16+
17+
<TextBox DockPanel.Dock="Bottom" Margin="10" Height="25">Test</TextBox>
18+
</DockPanel>
19+
</Design.PreviewWith>
20+
21+
<Style Selector="TextBox.Token">
22+
<Setter Property="BorderBrush" Value="Transparent"/>
23+
<Setter Property="Watermark" Value="Add Token"/>
24+
<Setter Property="Padding" Value="0" />
25+
<Setter Property="Margin" Value="0" />
26+
<Setter Property="VerticalContentAlignment" Value="Center"/>
27+
<Setter Property="VerticalAlignment" Value="Center"/>
28+
<Setter Property="MinHeight" Value="25" />
29+
30+
</Style>
31+
32+
<Style Selector="TextBox.Token:focus /template/ Border#PART_BorderElement">
33+
<Setter Property="Background" Value="{DynamicResource TextControlBackgroundFocused}"/>
34+
<Setter Property="BorderBrush" Value="Transparent"/>
35+
<Setter Property="BorderThickness" Value="{DynamicResource TextControlBorderThemeThicknessFocused}" />
36+
</Style>
37+
38+
<Style Selector="TextBox.Token:pointerover /template/ Border#PART_BorderElement">
39+
<Setter Property="BorderBrush" Value="Transparent"/>
40+
<Setter Property="Background" Value="{DynamicResource TextControlBackgroundPointerOver}" />
41+
</Style>
42+
43+
<!--<Style Selector="TextBox.Token /template/ TextPresenter">
44+
<Setter Property="VerticalAlignment" Value="Center"/>
45+
<Setter Property="Margin" Value="0" />
46+
</Style>-->
47+
48+
<Style Selector="c|TokenizingTextBox">
49+
<Setter Property="BorderBrush" Value="{DynamicResource TextControlBorderBrush}" />
50+
<Setter Property="BorderThickness" Value="{DynamicResource TextControlBorderThemeThickness}" />
551
<Setter Property="Focusable" Value="False" />
652
<Setter Property="Template">
753
<Setter.Value>
854
<ControlTemplate>
9-
<Controls:TokenizingWrapPanel Name="PART_WrapPanel" Margin="5" HorizontalSpacing="5" StretchChild="Last">
10-
<ItemsPresenter Name="PART_ItemsPresenter"
11-
Items="{TemplateBinding Items}"
12-
ItemsPanel="{TemplateBinding ItemsPanel}"
13-
ItemTemplate="{TemplateBinding ItemTemplate}"
14-
VirtualizationMode="None"
55+
<Border Name="PART_OuterBorder"
56+
BorderBrush="{TemplateBinding BorderBrush}"
57+
BorderThickness="{TemplateBinding BorderThickness}"
58+
CornerRadius="4"
59+
>
60+
<StackPanel VerticalAlignment="Center">
61+
<c:TokenizingWrapPanel Name="PART_WrapPanel" Margin="1,0,0,0"
62+
StretchChild="Last">
63+
<ItemsPresenter Name="PART_ItemsPresenter"
64+
Items="{TemplateBinding Items}"
65+
ItemsPanel="{TemplateBinding ItemsPanel}"
66+
ItemTemplate="{TemplateBinding ItemTemplate}"
67+
>
68+
</ItemsPresenter>
69+
<c:TokenTextBox Classes="Token" Name="PART_TextBox"
70+
Text="{TemplateBinding InputText, Mode=TwoWay}"
1571
/>
16-
<Controls:TokenTextBox Name="PART_TextBox" Grid.Row="0" Text="{TemplateBinding InputText, Mode=TwoWay}"
17-
BorderThickness="0,0,0,1"
18-
Padding="5,2"
19-
VerticalContentAlignment="Center"
20-
MinHeight="25"
21-
/>
22-
</Controls:TokenizingWrapPanel>
72+
</c:TokenizingWrapPanel>
73+
</StackPanel>
74+
</Border>
2375
</ControlTemplate>
2476
</Setter.Value>
2577
</Setter>

AvaloniaTokenizingTextBox/Styles/TokenizingTextBoxItem.xaml

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,58 +2,66 @@
22
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
33
xmlns:Controls="clr-namespace:AvaloniaTokenizingTextBox.Controls;assembly=AvaloniaTokenizingTextBox">
44
<Design.PreviewWith>
5-
<Border>
6-
<ListBox>
7-
<Controls:TokenizingTextBoxItem>
8-
Text
9-
</Controls:TokenizingTextBoxItem>
10-
<Controls:TokenizingTextBoxItem>
11-
Text1
12-
</Controls:TokenizingTextBoxItem>
13-
14-
</ListBox>
15-
</Border>
5+
<Controls:TokenizingTextBox Width="500">
6+
<Controls:TokenizingTextBoxItem>
7+
Text
8+
</Controls:TokenizingTextBoxItem>
9+
<Controls:TokenizingTextBoxItem>
10+
Text1
11+
</Controls:TokenizingTextBoxItem>
12+
</Controls:TokenizingTextBox>
1613
</Design.PreviewWith>
1714

15+
<Style Selector="Button.textBoxClearButton:pressed /template/ Border#PART_ButtonLayoutBorder">
16+
<Setter Property="Background" Value="Transparent" />
17+
</Style>
18+
1819
<Style Selector="Controls|TokenizingTextBoxItem">
19-
<Setter Property="Background" Value="AliceBlue"/>
20-
<Setter Property="BorderBrush" Value="Blue" />
21-
<Setter Property="BorderThickness" Value="0,0,0,1"/>
22-
<Setter Property="Padding" Value="5,0" />
23-
<Setter Property="MinHeight" Value="25"/>
20+
<Setter Property="Background" Value="{DynamicResource SystemControlHighlightListMediumBrush}"/>
21+
<Setter Property="BorderBrush" Value="{DynamicResource SystemControlHighlightListAccentLowBrush}" />
22+
<Setter Property="MinHeight" Value="25" />
23+
<Setter Property="Padding" Value="6,0,0,0" />
24+
<Setter Property="VerticalContentAlignment" Value="Center" />
2425
<Setter Property="Template">
2526
<Setter.Value>
2627
<ControlTemplate>
2728
<Border Name="PART_Border"
2829
BorderBrush="{TemplateBinding BorderBrush}"
2930
Background="{TemplateBinding Background}"
3031
BorderThickness="{TemplateBinding BorderThickness}"
31-
Padding="{TemplateBinding Padding}"
32+
Margin="1"
33+
CornerRadius="2"
3234
>
33-
<ContentPresenter Name="PART_ContentPresenter"
35+
<StackPanel Orientation="Horizontal">
36+
<ContentPresenter Name="PART_ContentPresenter"
3437
Content="{TemplateBinding Content}"
3538
ContentTemplate="{TemplateBinding ContentTemplate}"
36-
VerticalAlignment="Center" />
39+
Padding="{TemplateBinding Padding}"
40+
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
41+
/>
42+
<Button Name="PART_Button" Classes="textBoxClearButton" Command="{Binding $parent[ListBox].DeleteSelected}"/>
43+
</StackPanel>
44+
3745
</Border>
3846
</ControlTemplate>
3947
</Setter.Value>
4048
</Setter>
4149
</Style>
4250

43-
<Style Selector="Controls|TokenizingTextBoxItem /template/ Border#PART_Border">
51+
<!--<Style Selector="Controls|TokenizingTextBoxItem /template/ Border#PART_Border">
4452
<Setter Property="CornerRadius" Value="2"/>
45-
</Style>
53+
</Style>-->
4654

4755
<Style Selector="Controls|TokenizingTextBoxItem:selected /template/ Border#PART_Border">
48-
<Setter Property="Background" Value="{DynamicResource SystemControlHighlightListAccentLowBrush}" />
56+
<Setter Property="Background" Value="{DynamicResource SystemControlHighlightListAccentHighBrush}" />
4957
</Style>
5058

5159
<Style Selector="Controls|TokenizingTextBoxItem:pressed /template/ Border#PART_Border">
5260
<Setter Property="Background" Value="{DynamicResource SystemControlHighlightListMediumBrush}" />
5361
</Style>
5462

5563
<Style Selector="Controls|TokenizingTextBoxItem:pointerover /template/ Border#PART_Border">
56-
<Setter Property="Background" Value="{DynamicResource SystemControlHighlightListLowBrush}" />
64+
<Setter Property="Background" Value="{DynamicResource SystemControlHighlightListAccentLowBrush}" />
5765
</Style>
5866

5967
</Styles>

0 commit comments

Comments
 (0)