Skip to content

Commit 6340bea

Browse files
michaelstonismichaelstonis
authored
Merge pull request #101 from TheEightBot/feature/cvl-updates
2 parents d2d060f + e9942f1 commit 6340bea

File tree

3 files changed

+185
-60
lines changed

3 files changed

+185
-60
lines changed

‎AuroraControls.TestApp/CardViewLayoutPage.xaml‎

Lines changed: 118 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,119 @@
1-
<?xml version="1.0" encoding="UTF-8"?>
2-
<ContentPage
3-
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
4-
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
5-
xmlns:aurora="http://auroracontrols.maui/controls"
6-
x:Class="AuroraControls.TestApp.CardViewLayoutPage"
7-
Padding="8">
8-
<Grid>
9-
<Grid.RowDefinitions>
10-
<RowDefinition Height="Auto" />
11-
<RowDefinition Height="*" />
12-
</Grid.RowDefinitions>
13-
<Button Text="Update Values"
14-
Clicked="UpdateValues_Clicked"
15-
Grid.Row="0" Grid.Column="0" />
16-
<aurora:CardViewLayout x:Name="control"
17-
Margin="24,24,24,24" BackgroundColor="Chartreuse"
18-
ShadowColor="DarkBlue" Elevation="10"
19-
CornerRadius="16" BorderColor="Fuchsia" BorderSize="8"
20-
Padding="0"
21-
Grid.Row="1" Grid.Column="0">
22-
<Grid x:Name="content">
23-
<Grid.RowDefinitions>
24-
<RowDefinition Height="Auto" />
25-
<RowDefinition Height="Auto" />
26-
<RowDefinition Height="*" />
27-
<RowDefinition Height="Auto" />
28-
</Grid.RowDefinitions>
29-
<Image Aspect="AspectFill" Source="https://api.floodmagazine.com/wp-content/uploads/2016/07/Steve_Brule-2016-Marc_Lemoine-5-677x1024.jpg"
30-
Grid.Column="0" Grid.Row="0" Grid.RowSpan="4" Margin="-4"/>
31-
<Label Text="WORLD PREMIERE"
32-
TextColor="LightSlateGray" FontAttributes="Bold" Margin="16"
33-
Grid.Column="0" Grid.Row="0" />
34-
<Label Text="The Art of the Dingus"
35-
TextColor="LightSlateGray" FontSize="30" FontAttributes="Bold" Margin="16"
36-
Grid.Column="0" Grid.Row="1" />
37-
<Label Text="Inside the wonderful world of Dr. Steve Brule. For Your Health."
38-
TextColor="LightSlateGray" FontAttributes="Bold" Margin="16"
39-
Grid.Column="0" Grid.Row="3" />
40-
</Grid>
41-
</aurora:CardViewLayout>
42-
</Grid>
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<ContentPage x:Class="AuroraControls.TestApp.CardViewLayoutPage"
3+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
5+
xmlns:aurora="http://auroracontrols.maui/controls"
6+
Title="CardViewLayout Test">
7+
<ScrollView>
8+
<Grid RowDefinitions="Auto,*" Padding="20">
9+
<!-- Control Panel -->
10+
<StackLayout Grid.Row="0" Spacing="15" BackgroundColor="LightGray" Padding="20">
11+
<Label Text="CardViewLayout Configuration" FontSize="18" FontAttributes="Bold" HorizontalOptions="Center" />
12+
13+
<!-- Corner Radius -->
14+
<StackLayout>
15+
<Label Text="{Binding Source={x:Reference cornerRadiusSlider}, Path=Value, StringFormat='Corner Radius: {0:F1}'}" />
16+
<Slider x:Name="cornerRadiusSlider"
17+
Minimum="0"
18+
Maximum="50"
19+
Value="0"
20+
ValueChanged="OnCornerRadiusChanged" />
21+
</StackLayout>
22+
23+
<!-- Elevation -->
24+
<StackLayout>
25+
<Label Text="{Binding Source={x:Reference elevationSlider}, Path=Value, StringFormat='Elevation: {0:F1}'}" />
26+
<Slider x:Name="elevationSlider"
27+
Minimum="0"
28+
Maximum="20"
29+
Value="2"
30+
ValueChanged="OnElevationChanged" />
31+
</StackLayout>
32+
33+
<!-- Border Size -->
34+
<StackLayout>
35+
<Label Text="{Binding Source={x:Reference borderSizeSlider}, Path=Value, StringFormat='Border Size: {0:F1}'}" />
36+
<Slider x:Name="borderSizeSlider"
37+
Minimum="0"
38+
Maximum="10"
39+
Value="0"
40+
ValueChanged="OnBorderSizeChanged" />
41+
</StackLayout>
42+
43+
<!-- Shadow Color -->
44+
<StackLayout>
45+
<Label Text="Shadow Color" />
46+
<StackLayout Orientation="Horizontal" Spacing="10">
47+
<Button Text="Gray" BackgroundColor="Gray" Clicked="OnShadowColorChanged" />
48+
<Button Text="Blue" BackgroundColor="Blue" Clicked="OnShadowColorChanged" />
49+
<Button Text="Red" BackgroundColor="Red" Clicked="OnShadowColorChanged" />
50+
<Button Text="Green" BackgroundColor="Green" Clicked="OnShadowColorChanged" />
51+
<Button Text="Purple" BackgroundColor="Purple" Clicked="OnShadowColorChanged" />
52+
</StackLayout>
53+
</StackLayout>
54+
55+
<!-- Border Color -->
56+
<StackLayout>
57+
<Label Text="Border Color" />
58+
<StackLayout Orientation="Horizontal" Spacing="10">
59+
<Button Text="None" BackgroundColor="Transparent" Clicked="OnBorderColorChanged" />
60+
<Button Text="Black" BackgroundColor="Black" Clicked="OnBorderColorChanged" />
61+
<Button Text="Blue" BackgroundColor="Blue" Clicked="OnBorderColorChanged" />
62+
<Button Text="Red" BackgroundColor="Red" Clicked="OnBorderColorChanged" />
63+
<Button Text="Green" BackgroundColor="Green" Clicked="OnBorderColorChanged" />
64+
</StackLayout>
65+
</StackLayout>
66+
67+
<!-- Background Color for the card content -->
68+
<StackLayout>
69+
<Label Text="Card Background Color" />
70+
<StackLayout Orientation="Horizontal" Spacing="10">
71+
<Button Text="White" BackgroundColor="White" Clicked="OnBackgroundColorChanged" />
72+
<Button Text="Light Blue" BackgroundColor="LightBlue" Clicked="OnBackgroundColorChanged" />
73+
<Button Text="Light Green" BackgroundColor="LightGreen" Clicked="OnBackgroundColorChanged" />
74+
<Button Text="Light Pink" BackgroundColor="LightPink" Clicked="OnBackgroundColorChanged" />
75+
<Button Text="Light Yellow" BackgroundColor="LightYellow" Clicked="OnBackgroundColorChanged" />
76+
</StackLayout>
77+
</StackLayout>
78+
</StackLayout>
79+
80+
<!-- Card Display Area -->
81+
<StackLayout Grid.Row="1" Padding="20" Spacing="20">
82+
<Label Text="Card Preview" FontSize="16" FontAttributes="Bold" HorizontalOptions="Center" />
83+
84+
<!-- Sample CardViewLayout -->
85+
<aurora:CardViewLayout x:Name="sampleCard"
86+
CornerRadius="0"
87+
Elevation="2"
88+
ShadowColor="#576076"
89+
BorderColor="Transparent"
90+
BorderSize="0"
91+
HeightRequest="200"
92+
Margin="20">
93+
<StackLayout x:Name="cardContent"
94+
BackgroundColor="White"
95+
Padding="20"
96+
Spacing="10">
97+
<Label Text="Sample Card Content"
98+
FontSize="18"
99+
FontAttributes="Bold"
100+
HorizontalOptions="Center" />
101+
<Label Text="This is a sample card to demonstrate the CardViewLayout control. You can modify its appearance using the controls above."
102+
FontSize="14"
103+
TextColor="Gray"
104+
HorizontalTextAlignment="Center" />
105+
<Button Text="Sample Button"
106+
BackgroundColor="Blue"
107+
TextColor="White"
108+
CornerRadius="5"
109+
HorizontalOptions="Center" />
110+
<Label Text="Adjust the settings above to see how they affect this card's appearance."
111+
FontSize="12"
112+
TextColor="DarkGray"
113+
HorizontalTextAlignment="Center" />
114+
</StackLayout>
115+
</aurora:CardViewLayout>
116+
</StackLayout>
117+
</Grid>
118+
</ScrollView>
43119
</ContentPage>

‎AuroraControls.TestApp/CardViewLayoutPage.xaml.cs‎

Lines changed: 66 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,72 @@ public CardViewLayoutPage()
77
InitializeComponent();
88
}
99

10-
private async void UpdateValues_Clicked(object sender, System.EventArgs e)
10+
private void OnCornerRadiusChanged(object sender, ValueChangedEventArgs e)
1111
{
12-
var rngesus = new Random(Guid.NewGuid().GetHashCode());
13-
14-
var elevation = rngesus.Next(0, 8);
15-
var cornerRadius = rngesus.Next(0, 24);
16-
var borderSize = rngesus.Next(0, 10);
17-
var borderColor = Color.FromRgb(rngesus.Next(0, 255), rngesus.Next(0, 255), rngesus.Next(0, 255));
18-
var backgroundColor = Color.FromRgb(rngesus.Next(0, 255), rngesus.Next(0, 255), rngesus.Next(0, 255));
19-
var shadowColor = Color.FromRgb(rngesus.Next(0, 255), rngesus.Next(0, 255), rngesus.Next(0, 255));
20-
21-
await Task.WhenAll(
22-
control.TransitionTo(c => c.CornerRadius, cornerRadius),
23-
control.TransitionTo(c => c.BorderSize, borderSize),
24-
control.ColorTo(c => c.BorderColor, borderColor),
25-
control.ColorTo(c => c.BackgroundColor, backgroundColor),
26-
control.ColorTo(c => c.ShadowColor, shadowColor),
27-
control.TransitionTo(c => c.Elevation, elevation));
12+
sampleCard.CornerRadius = e.NewValue;
13+
}
14+
15+
private void OnElevationChanged(object sender, ValueChangedEventArgs e)
16+
{
17+
sampleCard.Elevation = e.NewValue;
18+
}
19+
20+
private void OnBorderSizeChanged(object sender, ValueChangedEventArgs e)
21+
{
22+
sampleCard.BorderSize = e.NewValue;
23+
}
24+
25+
private void OnShadowColorChanged(object sender, EventArgs e)
26+
{
27+
if (sender is Button button)
28+
{
29+
Color shadowColor = button.Text switch
30+
{
31+
"Gray" => Colors.Gray,
32+
"Blue" => Colors.Blue,
33+
"Red" => Colors.Red,
34+
"Green" => Colors.Green,
35+
"Purple" => Colors.Purple,
36+
_ => Color.FromArgb("#576076"), // Default shadow color
37+
};
38+
39+
sampleCard.ShadowColor = shadowColor;
40+
}
41+
}
42+
43+
private void OnBorderColorChanged(object sender, EventArgs e)
44+
{
45+
if (sender is Button button)
46+
{
47+
Color borderColor = button.Text switch
48+
{
49+
"None" => Colors.Transparent,
50+
"Black" => Colors.Black,
51+
"Blue" => Colors.Blue,
52+
"Red" => Colors.Red,
53+
"Green" => Colors.Green,
54+
_ => Colors.Transparent,
55+
};
56+
57+
sampleCard.BorderColor = borderColor;
58+
}
59+
}
60+
61+
private void OnBackgroundColorChanged(object sender, EventArgs e)
62+
{
63+
if (sender is Button button)
64+
{
65+
Color backgroundColor = button.Text switch
66+
{
67+
"White" => Colors.White,
68+
"Light Blue" => Colors.LightBlue,
69+
"Light Green" => Colors.LightGreen,
70+
"Light Pink" => Colors.LightPink,
71+
"Light Yellow" => Colors.LightYellow,
72+
_ => Colors.White,
73+
};
74+
75+
cardContent.BackgroundColor = backgroundColor;
76+
}
2877
}
2978
}

‎AuroraControlsMaui/CardViewLayout.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ public double CornerRadius
6060
/// The card shadow color property.
6161
/// </summary>
6262
public static readonly BindableProperty ShadowColorProperty =
63-
BindableProperty.Create(nameof(ShadowColor), typeof(Color), typeof(CardViewLayout), Colors.Transparent,
63+
BindableProperty.Create(nameof(ShadowColor), typeof(Color), typeof(CardViewLayout), Color.FromArgb("#576076"),
6464
propertyChanged: (bindable, _, newValue) =>
6565
{
6666
if (bindable is CardViewLayout clv)

0 commit comments

Comments
 (0)