Skip to content

Commit 464022c

Browse files
ghost1372ghost1372
committed
Add CircleIconPage and CountdownPage Samples
1 parent 7612541 commit 464022c

File tree

10 files changed

+199
-120
lines changed

10 files changed

+199
-120
lines changed

‎README.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,8 @@ Install-Package DevWinUI
131131
## 🔥 DevWinUI.Controls 🔥
132132
### ⚡ What’s Inside? ⚡
133133

134+
- ✨ Countdown
135+
- ✨ CircleIcon
134136
- ✨ ImageFrame
135137
- ✨ FrostedGlass
136138
- ✨ ProfileControl
@@ -301,6 +303,12 @@ Install-Package DevWinUI.ContextMenu
301303

302304
## 🕰️ History 🕰️
303305

306+
### Countdown
307+
![Countdown](https://raw.githubusercontent.com/ghost1372/DevWinUI-Resources/refs/heads/main/DevWinUI-Docs/Countdown.gif)
308+
309+
### CircleIcon
310+
![CircleIcon](https://raw.githubusercontent.com/ghost1372/DevWinUI-Resources/refs/heads/main/DevWinUI-Docs/CircleIcon.gif)
311+
304312
### ImageFrame
305313
![ImageFrame](https://raw.githubusercontent.com/ghost1372/DevWinUI-Resources/refs/heads/main/DevWinUI-Docs/ImageFrame.gif)
306314

‎dev/DevWinUI.Controls/Themes/Generic.xaml‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,9 @@ Themes\Styles\Controls\WaveProgressBar.xaml
114114
Themes\Styles\Win2D\BubbleButton.xaml
115115
Themes\Styles\Win2D\BubbleProgressButton.xaml
116116
Themes\Styles\Win2D\BubbleView.xaml
117+
Themes\Styles\Win2D\CircleIcon.xaml
117118
Themes\Styles\Win2D\ConfettiCannon.xaml
119+
Themes\Styles\Win2D\Countdown.xaml
118120
Themes\Styles\Win2D\GooeyButton.xaml
119121
Themes\Styles\Win2D\GooeyButtonItem.xaml
120122
Themes\Styles\Win2D\GooeyEffect.xaml
@@ -3405,6 +3407,21 @@ Themes\Styles\Win2D\Watermark.xaml
34053407
</Setter.Value>
34063408
</Setter>
34073409
</Style>
3410+
<Style x:Key="DefaultCircleIconStyle" TargetType="local:CircleIcon">
3411+
<Setter Property="FontFamily" Value="Segoe UI" />
3412+
<Setter Property="FontWeight" Value="SemiLight" />
3413+
<Setter Property="FontSize" Value="62" />
3414+
<Setter Property="Template">
3415+
<Setter.Value>
3416+
<ControlTemplate TargetType="local:CircleIcon">
3417+
<Grid>
3418+
<win2d:CanvasControl x:Name="PART_Canvas" />
3419+
<ContentPresenter Padding="0,0,02,8" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding Content}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontWeight="{TemplateBinding FontWeight}" />
3420+
</Grid>
3421+
</ControlTemplate>
3422+
</Setter.Value>
3423+
</Setter>
3424+
</Style>
34083425
<Style x:Key="DefaultConfettiCannonStyle" TargetType="local:ConfettiCannon">
34093426
<Setter Property="ClearColor" Value="Transparent" />
34103427
<Setter Property="IsFixedTimeStep" Value="False" />
@@ -3417,6 +3434,15 @@ Themes\Styles\Win2D\Watermark.xaml
34173434
</Setter.Value>
34183435
</Setter>
34193436
</Style>
3437+
<Style x:Key="DefaultCountdownStyle" TargetType="local:Countdown">
3438+
<Setter Property="Template">
3439+
<Setter.Value>
3440+
<ControlTemplate TargetType="local:Countdown">
3441+
<win2d:CanvasAnimatedControl x:Name="PART_Canvas" />
3442+
</ControlTemplate>
3443+
</Setter.Value>
3444+
</Setter>
3445+
</Style>
34203446
<Style x:Key="DefaultGooeyEffectStyle" TargetType="local:GooeyEffect">
34213447
<Setter Property="Template">
34223448
<Setter.Value>
@@ -11272,7 +11298,9 @@ Themes\Styles\Win2D\Watermark.xaml
1127211298
</Setter>
1127311299
</Style>
1127411300
<Style TargetType="local:BubbleView" BasedOn="{StaticResource DefaultBubbleViewStyle}" />
11301+
<Style TargetType="local:CircleIcon" BasedOn="{StaticResource DefaultCircleIconStyle}" />
1127511302
<Style TargetType="local:ConfettiCannon" BasedOn="{StaticResource DefaultConfettiCannonStyle}" />
11303+
<Style TargetType="local:Countdown" BasedOn="{StaticResource DefaultCountdownStyle}" />
1127611304
<Style x:Key="DefaultGooeyButtonStyle" TargetType="local:GooeyButton">
1127711305
<Setter Property="Background" Value="{ThemeResource GooeyButtonBackgroundBrush}" />
1127811306
<Setter Property="Foreground" Value="{ThemeResource GooeyButtonForegroundBrush}" />

‎dev/DevWinUI.Gallery/Assets/Fluent/Countdown.png‎

1.89 KB
Loading

‎dev/DevWinUI.Gallery/Assets/NavViewMenu/AppData.json‎

Lines changed: 49 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -24,32 +24,20 @@
2424
"UniqueId": "DevWinUIGallery.Views.MenuFlyoutSecondaryMenuPage",
2525
"Title": "MenuFlyout Attach",
2626
"IsNew": true,
27-
"DataInfoBadge": {
28-
"LandingPageInfoBadgeStyle": "StringInfoBadgeStyle",
29-
"InfoBadgeValue": "New "
30-
},
3127
"Subtitle": "Provides attached properties and behavior extensions for to support a customizable secondary menu section.",
3228
"ImagePath": "ms-appx:///Assets/Fluent/CommandBarFlyout.png"
3329
},
3430
{
3531
"UniqueId": "DevWinUIGallery.Views.SunTimesHelperPage",
3632
"Title": "SunTimes Helper",
3733
"IsNew": true,
38-
"DataInfoBadge": {
39-
"LandingPageInfoBadgeStyle": "StringInfoBadgeStyle",
40-
"InfoBadgeValue": "New "
41-
},
4234
"Subtitle": "A helper class for calculating sunrise and sunset",
4335
"ImagePath": "ms-appx:///Assets/Fluent/Sunny.png"
4436
},
4537
{
4638
"UniqueId": "DevWinUIGallery.Views.SystemTrayIconPage",
4739
"Title": "SystemTrayIcon",
4840
"IsNew": true,
49-
"DataInfoBadge": {
50-
"LandingPageInfoBadgeStyle": "StringInfoBadgeStyle",
51-
"InfoBadgeValue": "New "
52-
},
5341
"Subtitle": "SystemTrayIcon is a class that manages an application’s icon in the Windows system tray. It allows showing an icon, setting a tooltip, handling click events, and displaying a context menu directly from the tray area.",
5442
"ImagePath": "ms-appx:///Assets/Fluent/MenuFlyout.png"
5543
},
@@ -171,158 +159,67 @@
171159
"IsSpecialSection": false,
172160
"UseBuiltInNavigationViewInfoBadgeStyle": true,
173161
"Items": [
174-
{
175-
"UniqueId": "DevWinUIGallery.Views.ImageFramePage",
176-
"Title": "Image Frame",
177-
"Subtitle": "ImageFrame is a control that loads and displays images with optional rounded corners, shadows, and smooth transitions.",
178-
"IsNew": true,
179-
"DataInfoBadge": {
180-
"LandingPageInfoBadgeStyle": "StringInfoBadgeStyle",
181-
"InfoBadgeValue": "New "
182-
},
183-
"ImagePath": "ms-appx:///Assets/Fluent/Image.png"
184-
},
185-
{
186-
"UniqueId": "DevWinUIGallery.Views.ProfileControlPage",
187-
"Title": "ProfileControl",
188-
"Subtitle": "ProfileControl is a circular profile image control with optional blur, border, and tint effects.",
189-
"IsNew": true,
190-
"DataInfoBadge": {
191-
"LandingPageInfoBadgeStyle": "StringInfoBadgeStyle",
192-
"InfoBadgeValue": "New "
193-
},
194-
"ImagePath": "ms-appx:///Assets/Fluent/PersonPicture.png"
195-
},
196-
{
197-
"UniqueId": "DevWinUIGallery.Views.FrostedGlassPage",
198-
"Title": "Frosted Glass",
199-
"Subtitle": "FrostedGlass is a control that creates a blurred, frosted‑glass background with configurable tint, blur, and shadow.",
200-
"IsNew": true,
201-
"DataInfoBadge": {
202-
"LandingPageInfoBadgeStyle": "StringInfoBadgeStyle",
203-
"InfoBadgeValue": "New "
204-
},
205-
"ImagePath": "ms-appx:///Assets/Fluent/Acrylic.png"
206-
},
207-
{
208-
"UniqueId": "DevWinUIGallery.Views.FluidBannerPage",
209-
"Title": "Fluid Banner",
210-
"Subtitle": "FluidBanner is a control that displays multiple images in a smooth, fluid banner.",
211-
"IsNew": true,
212-
"DataInfoBadge": {
213-
"LandingPageInfoBadgeStyle": "StringInfoBadgeStyle",
214-
"InfoBadgeValue": "New "
215-
},
216-
"ImagePath": "ms-appx:///Assets/Fluent/StackPanelHorizontal.png"
217-
},
218-
{
219-
"UniqueId": "DevWinUIGallery.Views.ColorShadowPage",
220-
"Title": "Color Shadow",
221-
"Subtitle": "ColorShadow is a control that draws an image along with a softly blurred, color-based shadow generated from the image itself.",
222-
"IsNew": true,
223-
"DataInfoBadge": {
224-
"LandingPageInfoBadgeStyle": "StringInfoBadgeStyle",
225-
"InfoBadgeValue": "New "
226-
},
227-
"ImagePath": "ms-appx:///Assets/Fluent/ThemeShadow.png"
228-
},
229162
{
230163
"UniqueId": "DevWinUIGallery.Views.HaloPage",
231164
"Title": "Halo",
232165
"Subtitle": "The Halo is a set of interconnected UI components for circular or arc-based interfaces.",
233166
"IsNew": true,
234-
"DataInfoBadge": {
235-
"LandingPageInfoBadgeStyle": "StringInfoBadgeStyle",
236-
"InfoBadgeValue": "New "
237-
},
238167
"ImagePath": "ms-appx:///Assets/Fluent/ProgressRing.png"
239168
},
240169
{
241170
"UniqueId": "DevWinUIGallery.Views.OffsetBoxPage",
242171
"Title": "Offset Box",
243172
"Subtitle": "a ContentControl box which can change content offset by hovering it.",
244173
"IsNew": true,
245-
"DataInfoBadge": {
246-
"LandingPageInfoBadgeStyle": "StringInfoBadgeStyle",
247-
"InfoBadgeValue": "New "
248-
},
249174
"ImagePath": "ms-appx:///Assets/Fluent/external.png"
250175
},
251176
{
252177
"UniqueId": "DevWinUIGallery.Views.GoToCardPage",
253178
"Title": "Go To Card",
254179
"Subtitle": "a versatile card control that displays a title, optional icon, and an action button, allowing users to navigate to a URI or trigger a custom action when clicked.",
255180
"IsNew": true,
256-
"DataInfoBadge": {
257-
"LandingPageInfoBadgeStyle": "StringInfoBadgeStyle",
258-
"InfoBadgeValue": "New "
259-
},
260181
"ImagePath": "ms-appx:///Assets/Fluent/external.png"
261182
},
262183
{
263184
"UniqueId": "DevWinUIGallery.Views.LoopingListPage",
264185
"Title": "Looping List",
265186
"Subtitle": "An infinitely scrolling selector displayed in a flyout.",
266187
"IsNew": true,
267-
"DataInfoBadge": {
268-
"LandingPageInfoBadgeStyle": "StringInfoBadgeStyle",
269-
"InfoBadgeValue": "New "
270-
},
271188
"ImagePath": "ms-appx:///Assets/Fluent/TimePicker.png"
272189
},
273190
{
274191
"UniqueId": "DevWinUIGallery.Views.LoopingSelectorPage",
275192
"Title": "Looping Selector",
276193
"Subtitle": "An infinitely scrolling selection control.",
277194
"IsNew": true,
278-
"DataInfoBadge": {
279-
"LandingPageInfoBadgeStyle": "StringInfoBadgeStyle",
280-
"InfoBadgeValue": "New "
281-
},
282195
"ImagePath": "ms-appx:///Assets/Fluent/ListBox.png"
283196
},
284197
{
285198
"UniqueId": "DevWinUIGallery.Views.SegmentedSliderPage",
286199
"Title": "Segmented Slider",
287200
"Subtitle": "Slider control that divides its track into multiple visual segments. Each segment can represent a specific range, time span, or category, with individual fill states and labels.",
288201
"IsNew": true,
289-
"DataInfoBadge": {
290-
"LandingPageInfoBadgeStyle": "StringInfoBadgeStyle",
291-
"InfoBadgeValue": "New "
292-
},
293202
"ImagePath": "ms-appx:///Assets/Fluent/Slider.png"
294203
},
295204
{
296205
"UniqueId": "DevWinUIGallery.Views.TimelinePage",
297206
"Title": "Timeline",
298207
"Subtitle": "A visual control to display a day’s time range with key points like StartTime, EndTime, Sunrise, and Sunset.",
299208
"IsNew": true,
300-
"DataInfoBadge": {
301-
"LandingPageInfoBadgeStyle": "StringInfoBadgeStyle",
302-
"InfoBadgeValue": "New "
303-
},
304209
"ImagePath": "ms-appx:///Assets/Fluent/Line.png"
305210
},
306211
{
307212
"UniqueId": "DevWinUIGallery.Views.WanderingParticlesPage",
308213
"Title": "Wandering Particles",
309214
"Subtitle": "A visual effect that generates particles moving in random, flowing paths, creating a dynamic and wandering animation.",
310215
"IsNew": true,
311-
"DataInfoBadge": {
312-
"LandingPageInfoBadgeStyle": "StringInfoBadgeStyle",
313-
"InfoBadgeValue": "New "
314-
},
315216
"ImagePath": "ms-appx:///Assets/Fluent/Particle.png"
316217
},
317218
{
318219
"UniqueId": "DevWinUIGallery.Views.SnowFlakeEffectPage",
319220
"Title": "SnowFlake Effect",
320221
"Subtitle": "A visual effect that simulates falling snowflakes, with customizable particle count.",
321222
"IsNew": true,
322-
"DataInfoBadge": {
323-
"LandingPageInfoBadgeStyle": "StringInfoBadgeStyle",
324-
"InfoBadgeValue": "New"
325-
},
326223
"ImagePath": "ms-appx:///Assets/Fluent/Snowflake.png"
327224
},
328225
{
@@ -492,10 +389,6 @@
492389
"Title": "StepBar",
493390
"Subtitle": "A control that visually represents progress through a series of steps or stages, often used in wizards, forms, or multi-step processes.",
494391
"IsUpdated": true,
495-
"DataInfoBadge": {
496-
"LandingPageInfoBadgeStyle": "StringInfoBadgeStyle",
497-
"InfoBadgeValue": "Updated"
498-
},
499392
"ImagePath": "ms-appx:///Assets/Fluent/Line.png"
500393
},
501394
{
@@ -671,10 +564,6 @@
671564
"Title": "Styles",
672565
"Subtitle": "Styles",
673566
"IsUpdated": true,
674-
"DataInfoBadge": {
675-
"LandingPageInfoBadgeStyle": "StringInfoBadgeStyle",
676-
"InfoBadgeValue": "Updated"
677-
},
678567
"ImagePath": "ms-appx:///Assets/Fluent/InfoBadge.png"
679568
},
680569
{
@@ -698,6 +587,41 @@
698587
"ImagePath": "ms-appx:///Assets/Fluent/Acrylic.png",
699588
"UseBuiltInNavigationViewInfoBadgeStyle": true,
700589
"Items": [
590+
{
591+
"UniqueId": "DevWinUIGallery.Views.ImageFramePage",
592+
"Title": "Image Frame",
593+
"Subtitle": "ImageFrame is a control that loads and displays images with optional rounded corners, shadows, and smooth transitions.",
594+
"IsNew": true,
595+
"ImagePath": "ms-appx:///Assets/Fluent/Image.png"
596+
},
597+
{
598+
"UniqueId": "DevWinUIGallery.Views.ProfileControlPage",
599+
"Title": "ProfileControl",
600+
"Subtitle": "ProfileControl is a circular profile image control with optional blur, border, and tint effects.",
601+
"IsNew": true,
602+
"ImagePath": "ms-appx:///Assets/Fluent/PersonPicture.png"
603+
},
604+
{
605+
"UniqueId": "DevWinUIGallery.Views.FrostedGlassPage",
606+
"Title": "Frosted Glass",
607+
"Subtitle": "FrostedGlass is a control that creates a blurred, frosted‑glass background with configurable tint, blur, and shadow.",
608+
"IsNew": true,
609+
"ImagePath": "ms-appx:///Assets/Fluent/Acrylic.png"
610+
},
611+
{
612+
"UniqueId": "DevWinUIGallery.Views.FluidBannerPage",
613+
"Title": "Fluid Banner",
614+
"Subtitle": "FluidBanner is a control that displays multiple images in a smooth, fluid banner.",
615+
"IsNew": true,
616+
"ImagePath": "ms-appx:///Assets/Fluent/StackPanelHorizontal.png"
617+
},
618+
{
619+
"UniqueId": "DevWinUIGallery.Views.ColorShadowPage",
620+
"Title": "Color Shadow",
621+
"Subtitle": "ColorShadow is a control that draws an image along with a softly blurred, color-based shadow generated from the image itself.",
622+
"IsNew": true,
623+
"ImagePath": "ms-appx:///Assets/Fluent/ThemeShadow.png"
624+
},
701625
{
702626
"UniqueId": "DevWinUIGallery.Views.DepthLayerViewPage",
703627
"Title": "Depth Layer View",
@@ -797,15 +721,25 @@
797721
"ImagePath": "ms-appx:///Assets/Fluent/Canvas.png",
798722
"UseBuiltInNavigationViewInfoBadgeStyle": true,
799723
"Items": [
724+
{
725+
"UniqueId": "DevWinUIGallery.Views.CountdownPage",
726+
"Title": "Countdown",
727+
"Subtitle": "Countdown is a circular animated timer with customizable border, gradient background, and center text showing remaining seconds or a label.",
728+
"IsNew": true,
729+
"ImagePath": "ms-appx:///Assets/Fluent/Countdown.png"
730+
},
731+
{
732+
"UniqueId": "DevWinUIGallery.Views.CircleIconPage",
733+
"Title": "Circle Icon",
734+
"Subtitle": "CircleIcon is a circular control with customizable border, gradient background, and optional content.",
735+
"IsNew": true,
736+
"ImagePath": "ms-appx:///Assets/Fluent/InfoBadge.png"
737+
},
800738
{
801739
"UniqueId": "DevWinUIGallery.Views.SpeedGraphPage",
802740
"Title": "Speed Graph",
803741
"Subtitle": "A dynamic, animated graph control inspired by the Windows 11 copy dialog.",
804742
"IsNew": true,
805-
"DataInfoBadge": {
806-
"LandingPageInfoBadgeStyle": "StringInfoBadgeStyle",
807-
"InfoBadgeValue": "New "
808-
},
809743
"ImagePath": "ms-appx:///Assets/Fluent/Graph.png"
810744
},
811745
{

‎dev/DevWinUI.Gallery/T4Templates/NavigationPageMappings.cs‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,6 @@ public partial class NavigationPageMappings
3535
{"DevWinUIGallery.Views.ExtensionPage", typeof(DevWinUIGallery.Views.ExtensionPage)},
3636
{"DevWinUIGallery.Views.ThemeManagerPage", typeof(DevWinUIGallery.Views.ThemeManagerPage)},
3737
{"DevWinUIGallery.Views.CheckUpdatePage", typeof(DevWinUIGallery.Views.CheckUpdatePage)},
38-
{"DevWinUIGallery.Views.ImageFramePage", typeof(DevWinUIGallery.Views.ImageFramePage)},
39-
{"DevWinUIGallery.Views.ProfileControlPage", typeof(DevWinUIGallery.Views.ProfileControlPage)},
40-
{"DevWinUIGallery.Views.FrostedGlassPage", typeof(DevWinUIGallery.Views.FrostedGlassPage)},
41-
{"DevWinUIGallery.Views.FluidBannerPage", typeof(DevWinUIGallery.Views.FluidBannerPage)},
42-
{"DevWinUIGallery.Views.ColorShadowPage", typeof(DevWinUIGallery.Views.ColorShadowPage)},
4338
{"DevWinUIGallery.Views.HaloPage", typeof(DevWinUIGallery.Views.HaloPage)},
4439
{"DevWinUIGallery.Views.OffsetBoxPage", typeof(DevWinUIGallery.Views.OffsetBoxPage)},
4540
{"DevWinUIGallery.Views.GoToCardPage", typeof(DevWinUIGallery.Views.GoToCardPage)},
@@ -108,6 +103,11 @@ public partial class NavigationPageMappings
108103
{"DevWinUIGallery.Views.StylesPage", typeof(DevWinUIGallery.Views.StylesPage)},
109104
{"DevWinUIGallery.Views.SwitchPresenterPage", typeof(DevWinUIGallery.Views.SwitchPresenterPage)},
110105
{"DevWinUIGallery.Views.InlineAutoCompleteTextBoxPage", typeof(DevWinUIGallery.Views.InlineAutoCompleteTextBoxPage)},
106+
{"DevWinUIGallery.Views.ImageFramePage", typeof(DevWinUIGallery.Views.ImageFramePage)},
107+
{"DevWinUIGallery.Views.ProfileControlPage", typeof(DevWinUIGallery.Views.ProfileControlPage)},
108+
{"DevWinUIGallery.Views.FrostedGlassPage", typeof(DevWinUIGallery.Views.FrostedGlassPage)},
109+
{"DevWinUIGallery.Views.FluidBannerPage", typeof(DevWinUIGallery.Views.FluidBannerPage)},
110+
{"DevWinUIGallery.Views.ColorShadowPage", typeof(DevWinUIGallery.Views.ColorShadowPage)},
111111
{"DevWinUIGallery.Views.DepthLayerViewPage", typeof(DevWinUIGallery.Views.DepthLayerViewPage)},
112112
{"DevWinUIGallery.Views.ShyHeaderPage", typeof(DevWinUIGallery.Views.ShyHeaderPage)},
113113
{"DevWinUIGallery.Views.FlipToRevealPage", typeof(DevWinUIGallery.Views.FlipToRevealPage)},
@@ -123,6 +123,8 @@ public partial class NavigationPageMappings
123123
{"DevWinUIGallery.Views.PerspectiveZoomPage", typeof(DevWinUIGallery.Views.PerspectiveZoomPage)},
124124
{"DevWinUIGallery.Views.CompositionAnimationControllerPage", typeof(DevWinUIGallery.Views.CompositionAnimationControllerPage)},
125125
{"DevWinUIGallery.Views.CompositionShadowPage", typeof(DevWinUIGallery.Views.CompositionShadowPage)},
126+
{"DevWinUIGallery.Views.CountdownPage", typeof(DevWinUIGallery.Views.CountdownPage)},
127+
{"DevWinUIGallery.Views.CircleIconPage", typeof(DevWinUIGallery.Views.CircleIconPage)},
126128
{"DevWinUIGallery.Views.SpeedGraphPage", typeof(DevWinUIGallery.Views.SpeedGraphPage)},
127129
{"DevWinUIGallery.Views.ConfettiCannonPage", typeof(DevWinUIGallery.Views.ConfettiCannonPage)},
128130
{"DevWinUIGallery.Views.HatchPage", typeof(DevWinUIGallery.Views.HatchPage)},

0 commit comments

Comments
 (0)