WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

Commit 14b9892

Browse files
ChrisPulmanChrisPulman
committed
Add AutoSuggestBox sample and new button styles
Introduces an AutoSuggestBox sample with fruit suggestions to the input page, including new styles for AutoSuggestBox, BezelButton, and GelButton. Updates Calendar, CheckBox, CheckBoxModern, and HexColorTextBox themes for improved appearance and consistency. Index.axaml now includes the new button styles.
1 parent 03478dd commit 14b9892

File tree

10 files changed

+698
-92
lines changed

10 files changed

+698
-92
lines changed

‎src/CrissCross.Avalonia.UI.Gallery/ViewModels/InputPageViewModel.cs‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
// ReactiveUI Association Incorporated licenses this file to you under the MIT license.
33
// See the LICENSE file in the project root for full license information.
44

5+
using System.Collections.Generic;
6+
57
namespace CrissCross.Avalonia.UI.Gallery.ViewModels;
68

79
/// <summary>
@@ -14,4 +16,41 @@ public class InputPageViewModel : RxObject
1416
/// </summary>
1517
public InputPageViewModel() =>
1618
this.BuildComplete(() => DisplayName = "Input Controls");
19+
20+
/// <summary>
21+
/// Gets the sample suggestions for the AutoSuggestBox.
22+
/// </summary>
23+
public IEnumerable<string> SampleSuggestions { get; } =
24+
[
25+
"Apple",
26+
"Apricot",
27+
"Avocado",
28+
"Banana",
29+
"Blackberry",
30+
"Blueberry",
31+
"Cherry",
32+
"Coconut",
33+
"Cranberry",
34+
"Date",
35+
"Dragonfruit",
36+
"Fig",
37+
"Grape",
38+
"Grapefruit",
39+
"Guava",
40+
"Kiwi",
41+
"Lemon",
42+
"Lime",
43+
"Mango",
44+
"Melon",
45+
"Orange",
46+
"Papaya",
47+
"Peach",
48+
"Pear",
49+
"Pineapple",
50+
"Plum",
51+
"Pomegranate",
52+
"Raspberry",
53+
"Strawberry",
54+
"Watermelon"
55+
];
1756
}

‎src/CrissCross.Avalonia.UI.Gallery/Views/Pages/InputPageView.axaml‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,24 @@
3333
</controls:StackPanel>
3434
</controls:Card>
3535

36+
<!-- AutoSuggestBox -->
37+
<controls:Card>
38+
<controls:StackPanel Spacing="12">
39+
<controls:TextBlock Text="AutoSuggestBox" FontSize="18" FontWeight="Bold" />
40+
<controls:TextBlock Text="AutoSuggestBox provides suggestions as users type. Start typing a fruit name to see suggestions." Opacity="0.7" />
41+
<controls:StackPanel Spacing="12" MaxWidth="400" HorizontalAlignment="Left">
42+
<controls:StackPanel>
43+
<controls:TextBlock Text="Search for fruits:" FontSize="12" Margin="0,0,0,4" />
44+
<controls:AutoSuggestBox
45+
PlaceholderText="Type to search fruits..."
46+
ItemsSource="{Binding SampleSuggestions}"
47+
FilterMode="Contains"
48+
MinimumPrefixLength="1" />
49+
</controls:StackPanel>
50+
</controls:StackPanel>
51+
</controls:StackPanel>
52+
</controls:Card>
53+
3654
<!-- RichTextBox -->
3755
<controls:Card>
3856
<controls:StackPanel Spacing="12">

‎src/CrissCross.Avalonia.UI/Themes/AutoSuggestBox.axaml‎

Lines changed: 74 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,35 +3,101 @@
33
xmlns:controls="clr-namespace:CrissCross.Avalonia.UI.Controls;assembly=CrissCross.Avalonia.UI">
44

55
<!-- CrissCross AutoSuggestBox Style -->
6-
<!-- Inherits from AutoCompleteBox, use its base styling with customizations -->
6+
<!-- Inherits from AutoCompleteBox - use standard AutoCompleteBox template parts -->
77
<Style Selector="controls|AutoSuggestBox">
88
<Setter Property="Background" Value="{DynamicResource TextControlBackground}" />
99
<Setter Property="Foreground" Value="{DynamicResource TextControlForeground}" />
1010
<Setter Property="BorderBrush" Value="{DynamicResource TextControlBorderBrush}" />
1111
<Setter Property="BorderThickness" Value="1" />
12-
<Setter Property="Padding" Value="10,6" />
12+
<Setter Property="Padding" Value="10,5,6,7" />
1313
<Setter Property="MinHeight" Value="32" />
14-
<Setter Property="CornerRadius" Value="4" />
1514
<Setter Property="MinimumPrefixLength" Value="1" />
15+
<Setter Property="MinimumPopulateDelay" Value="0:0:0.1" />
1616
<Setter Property="IsTextCompletionEnabled" Value="True" />
1717
<Setter Property="FilterMode" Value="Contains" />
18-
<Setter Property="Watermark" Value="{Binding PlaceholderText, RelativeSource={RelativeSource Self}}" />
18+
<Setter Property="MaxDropDownHeight" Value="300" />
19+
<Setter Property="Template">
20+
<ControlTemplate>
21+
<Grid Name="PART_LayoutRoot">
22+
<TextBox Name="PART_TextBox"
23+
Foreground="{TemplateBinding Foreground}"
24+
Background="{TemplateBinding Background}"
25+
BorderBrush="{TemplateBinding BorderBrush}"
26+
BorderThickness="{TemplateBinding BorderThickness}"
27+
FontSize="{TemplateBinding FontSize}"
28+
FontFamily="{TemplateBinding FontFamily}"
29+
FontWeight="{TemplateBinding FontWeight}"
30+
Padding="{TemplateBinding Padding}"
31+
Margin="0"
32+
Watermark="{Binding PlaceholderText, RelativeSource={RelativeSource TemplatedParent}}"
33+
CornerRadius="4"
34+
AcceptsReturn="False"
35+
AcceptsTab="False" />
36+
<Popup Name="PART_Popup"
37+
WindowManagerAddShadowHint="False"
38+
MaxHeight="{TemplateBinding MaxDropDownHeight}"
39+
IsLightDismissEnabled="True"
40+
PlacementTarget="PART_TextBox"
41+
Placement="BottomEdgeAlignedLeft"
42+
OverlayInputPassThroughElement="{Binding ElementName=PART_TextBox}">
43+
<Border Name="PopupBorder"
44+
Background="{DynamicResource FlyoutPresenterBackground}"
45+
BorderBrush="{DynamicResource FlyoutBorderThemeBrush}"
46+
BorderThickness="1"
47+
CornerRadius="4"
48+
HorizontalAlignment="Stretch"
49+
MinWidth="{Binding Bounds.Width, ElementName=PART_TextBox}"
50+
BoxShadow="0 4 12 0 #40000000">
51+
<ListBox Name="PART_SelectingItemsControl"
52+
Foreground="{DynamicResource TextControlForeground}"
53+
Background="Transparent"
54+
BorderThickness="0"
55+
ItemTemplate="{TemplateBinding ItemTemplate}"
56+
Margin="0"
57+
Padding="4"
58+
MaxHeight="280"
59+
ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
60+
</Border>
61+
</Popup>
62+
</Grid>
63+
</ControlTemplate>
64+
</Setter>
1965
</Style>
2066

2167
<!-- Focus state -->
22-
<Style Selector="controls|AutoSuggestBox:focus-within">
68+
<Style Selector="controls|AutoSuggestBox:focus-within /template/ TextBox#PART_TextBox">
2369
<Setter Property="BorderBrush" Value="{DynamicResource TextControlBorderBrushFocused}" />
2470
</Style>
2571

2672
<!-- Pointer over state -->
27-
<Style Selector="controls|AutoSuggestBox:pointerover">
73+
<Style Selector="controls|AutoSuggestBox:pointerover /template/ TextBox#PART_TextBox">
2874
<Setter Property="BorderBrush" Value="{DynamicResource TextControlBorderBrushPointerOver}" />
2975
</Style>
3076

77+
<!-- Style ListBoxItems in popup -->
78+
<Style Selector="controls|AutoSuggestBox /template/ ListBox#PART_SelectingItemsControl ListBoxItem">
79+
<Setter Property="Foreground" Value="{DynamicResource TextControlForeground}" />
80+
<Setter Property="Padding" Value="10,8" />
81+
<Setter Property="Margin" Value="2" />
82+
<Setter Property="CornerRadius" Value="4" />
83+
</Style>
84+
85+
<Style Selector="controls|AutoSuggestBox /template/ ListBox#PART_SelectingItemsControl ListBoxItem:pointerover">
86+
<Setter Property="Background" Value="{DynamicResource ListViewItemBackgroundPointerOver}" />
87+
</Style>
88+
89+
<Style Selector="controls|AutoSuggestBox /template/ ListBox#PART_SelectingItemsControl ListBoxItem:selected">
90+
<Setter Property="Background" Value="{DynamicResource SystemAccentColor}" />
91+
<Setter Property="Foreground" Value="White" />
92+
</Style>
93+
94+
<Style Selector="controls|AutoSuggestBox /template/ ListBox#PART_SelectingItemsControl ListBoxItem:selected:pointerover">
95+
<Setter Property="Background" Value="{DynamicResource SystemAccentColorDark1}" />
96+
</Style>
97+
3198
<!-- Disabled state -->
3299
<Style Selector="controls|AutoSuggestBox:disabled">
33-
<Setter Property="Foreground" Value="{DynamicResource TextControlForegroundDisabled}" />
34-
<Setter Property="Background" Value="{DynamicResource TextControlBackgroundDisabled}" />
100+
<Setter Property="Opacity" Value="0.5" />
35101
</Style>
36102

37103
</Styles>

‎src/CrissCross.Avalonia.UI/Themes/BezelButton.axaml‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
<Styles xmlns="https://github.com/avaloniaui"
2+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3+
xmlns:controls="clr-namespace:CrissCross.Avalonia.UI.Controls;assembly=CrissCross.Avalonia.UI">
4+
5+
<!-- CrissCross BezelButton Style - A button with a beveled/raised 3D appearance -->
6+
<Style Selector="controls|BezelButton">
7+
<Setter Property="Background" Value="{DynamicResource ButtonBackground}" />
8+
<Setter Property="Foreground" Value="{DynamicResource ButtonForeground}" />
9+
<Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderBrush}" />
10+
<Setter Property="BorderThickness" Value="1" />
11+
<Setter Property="Padding" Value="16,8" />
12+
<Setter Property="HorizontalContentAlignment" Value="Center" />
13+
<Setter Property="VerticalContentAlignment" Value="Center" />
14+
<Setter Property="OuterCornerRadius" Value="6" />
15+
<Setter Property="InnerCornerRadius" Value="4" />
16+
<Setter Property="FocusBrush" Value="{DynamicResource SystemAccentColor}" />
17+
<Setter Property="FocusBorderThickness" Value="2" />
18+
<Setter Property="Template">
19+
<ControlTemplate>
20+
<Grid>
21+
<!-- Outer bezel (light top-left, dark bottom-right for 3D effect) -->
22+
<Border Name="OuterBezel"
23+
CornerRadius="{TemplateBinding OuterCornerRadius}"
24+
Padding="3">
25+
<Border.Background>
26+
<LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,100%">
27+
<GradientStop Offset="0" Color="#FFDDDDDD" />
28+
<GradientStop Offset="0.5" Color="#FF888888" />
29+
<GradientStop Offset="1" Color="#FF333333" />
30+
</LinearGradientBrush>
31+
</Border.Background>
32+
33+
<!-- Inner bezel (reverse gradient for depth) -->
34+
<Border Name="InnerBezel"
35+
CornerRadius="{TemplateBinding InnerCornerRadius}"
36+
Padding="2">
37+
<Border.Background>
38+
<LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,100%">
39+
<GradientStop Offset="0" Color="#FF222222" />
40+
<GradientStop Offset="0.5" Color="#FF666666" />
41+
<GradientStop Offset="1" Color="#FFAAAAAA" />
42+
</LinearGradientBrush>
43+
</Border.Background>
44+
45+
<!-- Main button surface -->
46+
<Border Name="ButtonSurface"
47+
Background="{TemplateBinding Background}"
48+
CornerRadius="{TemplateBinding InnerCornerRadius}">
49+
<Grid>
50+
<!-- Glare/highlight overlay -->
51+
<Border Name="GlareOverlay"
52+
CornerRadius="{TemplateBinding InnerCornerRadius}"
53+
IsHitTestVisible="False">
54+
<Border.Background>
55+
<LinearGradientBrush StartPoint="0%,0%" EndPoint="0%,100%">
56+
<GradientStop Offset="0" Color="#40FFFFFF" />
57+
<GradientStop Offset="0.5" Color="#10FFFFFF" />
58+
<GradientStop Offset="0.5" Color="Transparent" />
59+
<GradientStop Offset="1" Color="Transparent" />
60+
</LinearGradientBrush>
61+
</Border.Background>
62+
</Border>
63+
64+
<!-- Pressed overlay -->
65+
<Border Name="PressedOverlay"
66+
CornerRadius="{TemplateBinding InnerCornerRadius}"
67+
IsHitTestVisible="False"
68+
IsVisible="False">
69+
<Border.Background>
70+
<RadialGradientBrush>
71+
<GradientStop Offset="0" Color="Transparent" />
72+
<GradientStop Offset="1" Color="#30000000" />
73+
</RadialGradientBrush>
74+
</Border.Background>
75+
</Border>
76+
77+
<!-- Content -->
78+
<ContentPresenter Name="PART_ContentPresenter"
79+
Content="{TemplateBinding Content}"
80+
ContentTemplate="{TemplateBinding ContentTemplate}"
81+
Padding="{TemplateBinding Padding}"
82+
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
83+
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
84+
TextBlock.Foreground="{TemplateBinding Foreground}" />
85+
</Grid>
86+
</Border>
87+
</Border>
88+
</Border>
89+
90+
<!-- Focus border -->
91+
<Border Name="FocusBorder"
92+
CornerRadius="{TemplateBinding OuterCornerRadius}"
93+
BorderBrush="{TemplateBinding FocusBrush}"
94+
BorderThickness="0"
95+
IsHitTestVisible="False" />
96+
</Grid>
97+
</ControlTemplate>
98+
</Setter>
99+
</Style>
100+
101+
<!-- Pressed state -->
102+
<Style Selector="controls|BezelButton:pressed /template/ Border#PressedOverlay">
103+
<Setter Property="IsVisible" Value="True" />
104+
</Style>
105+
106+
<Style Selector="controls|BezelButton:pressed /template/ Border#GlareOverlay">
107+
<Setter Property="Opacity" Value="0.3" />
108+
</Style>
109+
110+
<Style Selector="controls|BezelButton:pressed /template/ Border#OuterBezel">
111+
<Setter Property="Background">
112+
<LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,100%">
113+
<GradientStop Offset="0" Color="#FF333333" />
114+
<GradientStop Offset="0.5" Color="#FF666666" />
115+
<GradientStop Offset="1" Color="#FFAAAAAA" />
116+
</LinearGradientBrush>
117+
</Setter>
118+
</Style>
119+
120+
<Style Selector="controls|BezelButton:pressed /template/ Border#InnerBezel">
121+
<Setter Property="Background">
122+
<LinearGradientBrush StartPoint="0%,0%" EndPoint="100%,100%">
123+
<GradientStop Offset="0" Color="#FFAAAAAA" />
124+
<GradientStop Offset="0.5" Color="#FF888888" />
125+
<GradientStop Offset="1" Color="#FF444444" />
126+
</LinearGradientBrush>
127+
</Setter>
128+
</Style>
129+
130+
<!-- Pointer over state -->
131+
<Style Selector="controls|BezelButton:pointerover /template/ Border#ButtonSurface">
132+
<Setter Property="Background" Value="{DynamicResource ButtonBackgroundPointerOver}" />
133+
</Style>
134+
135+
<!-- Focus state -->
136+
<Style Selector="controls|BezelButton:focus-visible /template/ Border#FocusBorder">
137+
<Setter Property="BorderThickness" Value="{Binding FocusBorderThickness, RelativeSource={RelativeSource TemplatedParent}}" />
138+
</Style>
139+
140+
<!-- Disabled state -->
141+
<Style Selector="controls|BezelButton:disabled">
142+
<Setter Property="Opacity" Value="0.5" />
143+
</Style>
144+
145+
<Style Selector="controls|BezelButton:disabled /template/ Border#ButtonSurface">
146+
<Setter Property="Background" Value="{DynamicResource ButtonBackgroundDisabled}" />
147+
</Style>
148+
149+
<Style Selector="controls|BezelButton:disabled /template/ ContentPresenter#PART_ContentPresenter">
150+
<Setter Property="TextBlock.Foreground" Value="{DynamicResource ButtonForegroundDisabled}" />
151+
</Style>
152+
153+
</Styles>

0 commit comments

Comments
 (0)