Skip to content

Commit 4aad444

Browse files
PaulAndersonSPaulAndersonS
authored
Merge pull request #107 from syncfusion/CardsControl
Cards control in MAUI Toolkit
2 parents d8eaa8b + f796253 commit 4aad444

32 files changed

+4803
-0
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ The Syncfusion® Toolkit is built with community collaboration in mind, aiming t
4343
| | Bottom Sheet | Slides up from the bottom of the screen to display additional content or functionality. |
4444
| Layout | Carousel | Smooth, touch-enabled sliding galleries for showcasing images or featured content. |
4545
| | Text Input Layout | Enhances input fields with floating labels and validation, improving user interaction. |
46+
| | Cards |Create dismissible cards or a stack of cards, and customize their background, borders, and corners. |
4647
| Buttons | Chips | Interactive tags for filtering, labeling, or visual options, perfect for e-commerce or task management. |
4748
| | Segmented Control | Quickly switch between views or categories, ideal for apps with multiple layout options. |
4849
| | Button | Customizable button control with icon support, background images, and visual state styling. |

‎maui/samples/Gallery/ControlList.xml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,5 +19,6 @@
1919
<Assembly Name="NumericEntry" />
2020
<Assembly Name="NumericUpDown" />
2121
<Assembly Name="Calendar" />
22+
<Assembly Name="Cards" />
2223
</Assemblies>
2324
</SampleBrowser>

‎maui/samples/Gallery/Resources/Images/bitcoin.jpg

30.4 KB
Loading

‎maui/samples/Gallery/Resources/Images/building.jpg

41.1 KB
Loading

‎maui/samples/Gallery/Resources/Images/cardchip.png

3.79 KB
Loading

‎maui/samples/Gallery/Resources/Images/cards.png

1.75 KB
Loading

‎maui/samples/Gallery/Resources/Images/coin.jpg

31.8 KB
Loading

‎maui/samples/Gallery/Resources/Images/hexagon.jpg

41.3 KB
Loading

‎maui/samples/Gallery/SampleList/CardsSamplesList.xml

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<SyncfusionControls>
3+
<ControlCategory Name="Layouts">
4+
<Control Title="Cards"
5+
Image="cards.png"
6+
ControlName="SfCards"
7+
Description="A container control that allows users to create dismissible cards or a stack of cards.">
8+
<Sample Title="Card view" SampleName="CardView"/>
9+
</Control>
10+
</ControlCategory>
11+
</SyncfusionControls>

‎maui/samples/Gallery/Samples/Cards/GettingStarted/Behavior/GettingStartedBehavior.cs

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
using Syncfusion.Maui.Toolkit.Cards;
2+
3+
namespace Syncfusion.Maui.ControlsGallery.Cards.SfCards
4+
{
5+
/// <summary>
6+
/// Getting started Behavior class
7+
/// </summary>
8+
public class GettingStartedBehavior : Behavior<SampleView>
9+
{
10+
/// <summary>
11+
/// Instance of card view.
12+
/// </summary>
13+
SfCardView? _firstCard, _secondCard, _thirdCard, _fourthCard, _fifthCard;
14+
15+
/// <summary>
16+
/// The corner radius label.
17+
/// </summary>
18+
Label? _cornerRadiusLabel;
19+
20+
/// <summary>
21+
/// The corner radius slider.
22+
/// </summary>
23+
Slider? _cornerRadiusSlider;
24+
25+
/// <summary>
26+
/// The indicator switch.
27+
/// </summary>
28+
Switch? _indicatorSwitch;
29+
30+
/// <summary>
31+
/// The indicator position option.
32+
/// </summary>
33+
Grid? _indicatorPositionOption;
34+
35+
/// <summary>
36+
/// This combo box is used to choose the indicator position of the cards.
37+
/// </summary>
38+
Picker? _indicatorPositionComboBox;
39+
40+
/// <summary>
41+
/// Begins when the behavior attached to the view
42+
/// </summary>
43+
/// <param name="sampleView">bindable value</param>
44+
protected override void OnAttachedTo(SampleView sampleView)
45+
{
46+
base.OnAttachedTo(sampleView);
47+
48+
_firstCard = sampleView.Content.FindByName<SfCardView>("firstCard");
49+
_secondCard = sampleView.Content.FindByName<SfCardView>("secondCard");
50+
_thirdCard = sampleView.Content.FindByName<SfCardView>("thirdCard");
51+
_fourthCard = sampleView.Content.FindByName<SfCardView>("fourthCard");
52+
_fifthCard = sampleView.Content.FindByName<SfCardView>("fifthCard");
53+
_cornerRadiusLabel = sampleView.Content.FindByName<Label>("cornerRadiusLabel");
54+
_cornerRadiusSlider = sampleView.Content.FindByName<Slider>("cornerRadiusSlider");
55+
_indicatorSwitch = sampleView.Content.FindByName<Switch>("indicatorSwitch");
56+
_indicatorPositionOption = sampleView.Content.FindByName<Grid>("indicatorPositionOption");
57+
58+
_indicatorPositionComboBox = sampleView.Content.FindByName<Picker>("indicatorPositionComboBox");
59+
_indicatorPositionComboBox.ItemsSource = Enum.GetValues(typeof(CardIndicatorPosition)).Cast<CardIndicatorPosition>().ToList();
60+
_indicatorPositionComboBox.SelectedIndex = 0;
61+
_indicatorPositionComboBox.SelectedIndexChanged += IndicatorPositionComboBox_SelectedIndexChanged;
62+
63+
if (_cornerRadiusSlider != null)
64+
{
65+
_cornerRadiusSlider.ValueChanged += CornerRadiusSlider_ValueChanged;
66+
}
67+
68+
if (_indicatorSwitch != null)
69+
{
70+
_indicatorSwitch.Toggled += IndicatorSwitch_Toggled;
71+
}
72+
}
73+
74+
/// <summary>
75+
/// Method for Cards Indication thickness changed.
76+
/// </summary>
77+
/// <param name="sender">Return the objects.</param>
78+
/// <param name="e">Event Arguments</param>
79+
void IndicatorSwitch_Toggled(object? sender, ToggledEventArgs e)
80+
{
81+
bool isIndcatorEnabled = e.Value;
82+
double indicatorThickness = isIndcatorEnabled ? 7 : 0;
83+
if (_firstCard != null && _secondCard != null && _thirdCard != null && _fourthCard != null && _fifthCard != null && _indicatorPositionOption != null)
84+
{
85+
_firstCard.IndicatorThickness = indicatorThickness;
86+
_secondCard.IndicatorThickness = indicatorThickness;
87+
_thirdCard.IndicatorThickness = indicatorThickness;
88+
_fourthCard.IndicatorThickness = indicatorThickness;
89+
_fifthCard.IndicatorThickness = indicatorThickness;
90+
if (isIndcatorEnabled)
91+
{
92+
_indicatorPositionOption.IsVisible = true;
93+
_firstCard.IndicatorColor = Color.FromArgb("#E2C799");
94+
_secondCard.IndicatorColor = Color.FromArgb("#D4BBA0");
95+
_thirdCard.IndicatorColor = Color.FromArgb("#A4A8AB");
96+
_fourthCard.IndicatorColor = Color.FromArgb("#19376D");
97+
_fifthCard.IndicatorColor = Color.FromArgb("#77ABB7");
98+
}
99+
else
100+
{
101+
_indicatorPositionOption.IsVisible = false;
102+
}
103+
}
104+
}
105+
106+
/// <summary>
107+
/// Method for Cards Indication position combo box changed.
108+
/// </summary>
109+
/// <param name="sender">Return the object.</param>
110+
/// <param name="e">Event Arguments.</param>
111+
void IndicatorPositionComboBox_SelectedIndexChanged(object? sender, EventArgs e)
112+
{
113+
if (sender is Picker picker && _firstCard != null && _secondCard != null && _thirdCard != null && _fourthCard != null && _fifthCard != null)
114+
{
115+
string? selectedPosition = picker.SelectedItem.ToString();
116+
switch (selectedPosition)
117+
{
118+
case "Bottom":
119+
_firstCard.IndicatorPosition = CardIndicatorPosition.Bottom;
120+
_secondCard.IndicatorPosition = CardIndicatorPosition.Bottom;
121+
_thirdCard.IndicatorPosition = CardIndicatorPosition.Bottom;
122+
_fourthCard.IndicatorPosition = CardIndicatorPosition.Bottom;
123+
_fifthCard.IndicatorPosition = CardIndicatorPosition.Bottom;
124+
break;
125+
case "Top":
126+
_firstCard.IndicatorPosition = CardIndicatorPosition.Top;
127+
_secondCard.IndicatorPosition = CardIndicatorPosition.Top;
128+
_thirdCard.IndicatorPosition = CardIndicatorPosition.Top;
129+
_fourthCard.IndicatorPosition = CardIndicatorPosition.Top;
130+
_fifthCard.IndicatorPosition = CardIndicatorPosition.Top;
131+
break;
132+
case "Left":
133+
_firstCard.IndicatorPosition = CardIndicatorPosition.Left;
134+
_secondCard.IndicatorPosition = CardIndicatorPosition.Left;
135+
_thirdCard.IndicatorPosition = CardIndicatorPosition.Left;
136+
_fourthCard.IndicatorPosition = CardIndicatorPosition.Left;
137+
_fifthCard.IndicatorPosition = CardIndicatorPosition.Left;
138+
break;
139+
case "Right":
140+
_firstCard.IndicatorPosition = CardIndicatorPosition.Right;
141+
_secondCard.IndicatorPosition = CardIndicatorPosition.Right;
142+
_thirdCard.IndicatorPosition = CardIndicatorPosition.Right;
143+
_fourthCard.IndicatorPosition = CardIndicatorPosition.Right;
144+
_fifthCard.IndicatorPosition = CardIndicatorPosition.Right;
145+
break;
146+
}
147+
}
148+
}
149+
150+
/// <summary>
151+
/// Method to corner radius slider value changed
152+
/// </summary>
153+
/// <param name="sender">return the object</param>
154+
/// <param name="e">Event Arguments</param>
155+
void CornerRadiusSlider_ValueChanged(object? sender, ValueChangedEventArgs e)
156+
{
157+
if (_firstCard != null && _secondCard != null && _thirdCard != null && _fourthCard != null && _fifthCard != null && _cornerRadiusLabel != null)
158+
{
159+
_firstCard.CornerRadius = new CornerRadius(Math.Round(e.NewValue));
160+
_secondCard.CornerRadius = new CornerRadius(Math.Round(e.NewValue));
161+
_thirdCard.CornerRadius = new CornerRadius(Math.Round(e.NewValue));
162+
_fourthCard.CornerRadius = new CornerRadius(Math.Round(e.NewValue));
163+
_fifthCard.CornerRadius = new CornerRadius(Math.Round(e.NewValue));
164+
_cornerRadiusLabel.Text = "CornerRadius: " + Math.Round(e.NewValue);
165+
}
166+
}
167+
168+
/// <summary>
169+
/// Begins when the behavior attached to the view
170+
/// </summary>
171+
/// <param name="sampleView">bindable value</param>
172+
protected override void OnDetachingFrom(SampleView sampleView)
173+
{
174+
base.OnDetachingFrom(sampleView);
175+
if (_cornerRadiusSlider != null)
176+
{
177+
_cornerRadiusSlider.ValueChanged -= CornerRadiusSlider_ValueChanged;
178+
}
179+
180+
if (_indicatorSwitch != null)
181+
{
182+
_indicatorSwitch.Toggled -= IndicatorSwitch_Toggled;
183+
}
184+
185+
if (_indicatorPositionComboBox != null)
186+
{
187+
_indicatorPositionComboBox.SelectedIndexChanged -= IndicatorPositionComboBox_SelectedIndexChanged;
188+
}
189+
}
190+
}
191+
}

0 commit comments

Comments
 (0)