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 12d095f

Browse files
ChrisPulmanChrisPulman
authored
Merge pull request #210 from reactivemarbles/AddNewControlsToAvaloniaUI
Update Control styles
2 parents a207430 + 14b9892 commit 12d095f

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)