Skip to content

Commit a55d6eb

Browse files
committed
Add Halo Samples
1 parent 96cb61a commit a55d6eb

File tree

13 files changed

+314
-6
lines changed

13 files changed

+314
-6
lines changed

README.md

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

134+
- ✨ Halo (HaloArc, HaloChain, HaloDisk, HaloRing, HaloSlice, HaloSlider, HaloRingLabel)
134135
- ✨ OffsetBox
135136
- ✨ InfoCard
136137
- ✨ GoToCard
@@ -295,17 +296,20 @@ Install-Package DevWinUI.ContextMenu
295296

296297
## 🕰️ History 🕰️
297298

299+
### Halo
300+
![Halo](https://raw.githubusercontent.com/ghost1372/DevWinUI-Resources/refs/heads/main/DevWinUI-Docs/Halo.gif)
301+
298302
### OffsetBox
299-
![OffsetBox](https://raw.githubusercontent.com/ghost1372/DevWinUI-Resources/refs/heads/main/DevWinUI-Docs/OffsetBox.png )
303+
![OffsetBox](https://raw.githubusercontent.com/ghost1372/DevWinUI-Resources/refs/heads/main/DevWinUI-Docs/OffsetBox.gif)
300304

301305
### InfoCard
302-
![InfoCard](https://raw.githubusercontent.com/ghost1372/DevWinUI-Resources/refs/heads/main/DevWinUI-Docs/InfoCard.png )
306+
![InfoCard](https://raw.githubusercontent.com/ghost1372/DevWinUI-Resources/refs/heads/main/DevWinUI-Docs/InfoCard.png)
303307

304308
### GoToCard
305-
![GoToCard](https://raw.githubusercontent.com/ghost1372/DevWinUI-Resources/refs/heads/main/DevWinUI-Docs/GoToCard.png )
309+
![GoToCard](https://raw.githubusercontent.com/ghost1372/DevWinUI-Resources/refs/heads/main/DevWinUI-Docs/GoToCard.png)
306310

307311
### TabViewItem Rounded Style
308-
![TabViewItem Rounded Style](https://raw.githubusercontent.com/ghost1372/DevWinUI-Resources/refs/heads/main/DevWinUI-Docs/TabViewItemRoundedStyle.png )
312+
![TabViewItem Rounded Style](https://raw.githubusercontent.com/ghost1372/DevWinUI-Resources/refs/heads/main/DevWinUI-Docs/TabViewItemRoundedStyle.png)
309313

310314
### LoopingList
311315
![LoopingList](https://raw.githubusercontent.com/ghost1372/DevWinUI-Resources/refs/heads/main/DevWinUI-Docs/LoopingList.gif)

dev/DevWinUI.Controls/Themes/Generic.xaml

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656
Themes\Styles\Controls\GoToTop.xaml
5757
Themes\Styles\Controls\Gravatar.xaml
5858
Themes\Styles\Controls\Growl.xaml
59+
Themes\Styles\Controls\HaloSlider.xaml
5960
Themes\Styles\Controls\HeaderCarousel.xaml
6061
Themes\Styles\Controls\HeaderCarouselItem.xaml
6162
Themes\Styles\Controls\HeaderTile.xaml
@@ -1785,6 +1786,33 @@
17851786
</Setter>
17861787
</Style>
17871788
<x:Double x:Key="GrowlWidth">340</x:Double>
1789+
<Style x:Key="DefaultHaloSliderStyle" TargetType="local:HaloSlider">
1790+
<Setter Property="Background" Value="AliceBlue" />
1791+
<Setter Property="local:Halo.Thickness" Value="50" />
1792+
<Setter Property="Thumb">
1793+
<Setter.Value>
1794+
<ControlTemplate>
1795+
<Ellipse Width="{TemplateBinding Width}"
1796+
Height="{TemplateBinding Height}"
1797+
Fill="{TemplateBinding Background}" />
1798+
</ControlTemplate>
1799+
</Setter.Value>
1800+
</Setter>
1801+
<Setter Property="Template">
1802+
<Setter.Value>
1803+
<ControlTemplate TargetType="local:HaloSlider">
1804+
<local:HaloRing>
1805+
<Grid local:HaloRing.Angle="{Binding Angle, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" local:HaloRing.Offset="{Binding Offset, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
1806+
<ContentControl Width="{TemplateBinding local:Halo.Thickness}"
1807+
Height="{TemplateBinding local:Halo.Thickness}"
1808+
Background="{TemplateBinding Background}"
1809+
Template="{TemplateBinding Thumb}" />
1810+
</Grid>
1811+
</local:HaloRing>
1812+
</ControlTemplate>
1813+
</Setter.Value>
1814+
</Setter>
1815+
</Style>
17881816
<Style TargetType="local:HeaderCarousel">
17891817
<Setter Property="ItemsPanel">
17901818
<Setter.Value>
@@ -3225,7 +3253,7 @@
32253253
<Grid MinHeight="{TemplateBinding MinHeight}">
32263254
<Grid.RowDefinitions>
32273255
<RowDefinition Height="Auto" />
3228-
<RowDefinition />
3256+
<RowDefinition MinHeight="110" />
32293257
<RowDefinition Height="Auto" />
32303258
</Grid.RowDefinitions>
32313259
<!-- Fix InfoBar Cut off Right Edges -->
@@ -10383,6 +10411,7 @@
1038310411
</Setter.Value>
1038410412
</Setter>
1038510413
</Style>
10414+
<Style TargetType="local:HaloSlider" BasedOn="{StaticResource DefaultHaloSliderStyle}" />
1038610415
<Style TargetType="local:HeaderCarouselItem" BasedOn="{StaticResource DefaultCarouselItemStyle}" />
1038710416
<Style x:Key="DefaultHeaderTileStyle" TargetType="local:HeaderTile">
1038810417
<Setter Property="Width" Value="232" />
@@ -15548,4 +15577,4 @@
1554815577
<Style TargetType="local:PinBox" BasedOn="{StaticResource DefaultPinBoxStyle}" />
1554915578
<Style TargetType="local:StepBar" BasedOn="{StaticResource DefaultStepBarStyle}" />
1555015579
<Style TargetType="local:SettingsExpander" BasedOn="{StaticResource DefaultSettingsExpanderStyle}" />
15551-
</ResourceDictionary>
15580+
</ResourceDictionary>
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:local="using:DevWinUI">
5+
6+
<Style TargetType="local:HaloSlider" BasedOn="{StaticResource DefaultHaloSliderStyle}" />
7+
8+
<Style x:Key="DefaultHaloSliderStyle" TargetType="local:HaloSlider">
9+
<Setter Property="Background" Value="AliceBlue" />
10+
<Setter Property="local:Halo.Thickness" Value="50" />
11+
<Setter Property="Thumb">
12+
<Setter.Value>
13+
<ControlTemplate>
14+
<Ellipse Width="{TemplateBinding Width}"
15+
Height="{TemplateBinding Height}"
16+
Fill="{TemplateBinding Background}" />
17+
</ControlTemplate>
18+
</Setter.Value>
19+
</Setter>
20+
<Setter Property="Template">
21+
<Setter.Value>
22+
<ControlTemplate TargetType="local:HaloSlider">
23+
<local:HaloRing>
24+
<Grid local:HaloRing.Angle="{Binding Angle, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" local:HaloRing.Offset="{Binding Offset, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
25+
<ContentControl Width="{TemplateBinding local:Halo.Thickness}"
26+
Height="{TemplateBinding local:Halo.Thickness}"
27+
Background="{TemplateBinding Background}"
28+
Template="{TemplateBinding Thumb}" />
29+
</Grid>
30+
</local:HaloRing>
31+
</ControlTemplate>
32+
</Setter.Value>
33+
</Setter>
34+
</Style>
35+
</ResourceDictionary>

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,17 @@
171171
"IsSpecialSection": false,
172172
"UseBuiltInNavigationViewInfoBadgeStyle": true,
173173
"Items": [
174+
{
175+
"UniqueId": "DevWinUIGallery.Views.HaloPage",
176+
"Title": "Halo",
177+
"Subtitle": "The Halo is a set of interconnected UI components for circular or arc-based interfaces.",
178+
"IsNew": true,
179+
"DataInfoBadge": {
180+
"LandingPageInfoBadgeStyle": "StringInfoBadgeStyle",
181+
"InfoBadgeValue": "New "
182+
},
183+
"ImagePath": "ms-appx:///Assets/Fluent/ProgressRing.png"
184+
},
174185
{
175186
"UniqueId": "DevWinUIGallery.Views.OffsetBoxPage",
176187
"Title": "Offset Box",
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<dev:Halo Margin="5">
2+
<dev:HaloArc Spread="180"
3+
Stroke="White"
4+
StrokeThickness="30"
5+
Tension="0.5" />
6+
<dev:HaloArc Angle="180"
7+
Spread="180"
8+
Stroke="Black"
9+
StrokeThickness="30"
10+
Tension="0.5" />
11+
</dev:Halo>
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<dev:Halo Margin="5">
2+
<dev:HaloChain Spacing="10"
3+
Tension="0.5">
4+
<TextBlock FontSize="30"
5+
Text="D" />
6+
<TextBlock FontSize="30"
7+
Text="E" />
8+
<TextBlock FontSize="30"
9+
Text="V" />
10+
<TextBlock FontSize="30"
11+
Text="W" />
12+
<TextBlock FontSize="30"
13+
Text="I" />
14+
<TextBlock FontSize="30"
15+
Text="N" />
16+
<TextBlock FontSize="30"
17+
Text="U" />
18+
<TextBlock FontSize="30"
19+
Text="I" />
20+
</dev:HaloChain>
21+
</dev:Halo>
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<dev:Halo Margin="5">
2+
<dev:HaloDisc dev:Halo.Band="2"
3+
dev:Halo.Thickness="10"
4+
Fill="White" />
5+
<dev:HaloDisc dev:Halo.Band="1"
6+
dev:Halo.Thickness="20"
7+
Fill="Black" />
8+
<dev:HaloDisc dev:Halo.Thickness="10"
9+
Fill="White" />
10+
</dev:Halo>
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<dev:Halo Margin="5">
2+
<dev:HaloRing>
3+
<Ellipse Width="30"
4+
Height="30"
5+
Fill="{ThemeResource SystemAccentColor}" />
6+
<Ellipse Width="30"
7+
Height="30"
8+
dev:HaloRing.Angle="90"
9+
Fill="{ThemeResource SystemAccentColor}" />
10+
<Ellipse Width="30"
11+
Height="30"
12+
dev:HaloRing.Angle="180"
13+
Fill="{ThemeResource SystemAccentColor}" />
14+
<Ellipse Width="30"
15+
Height="30"
16+
dev:HaloRing.Angle="270"
17+
Fill="{ThemeResource SystemAccentColor}" />
18+
</dev:HaloRing>
19+
</dev:Halo>
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<dev:Halo Margin="5">
2+
<dev:HaloSlice Fill="White"
3+
Spread="180"
4+
Offset="90" />
5+
<dev:HaloSlice Angle="180"
6+
Fill="Black"
7+
Spread="180"
8+
Offset="90" />
9+
</dev:Halo>
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<dev:Halo Margin="5">
2+
<dev:HaloSlider Angle="{x:Bind SldAngle.Value, Mode=OneWay}">
3+
<dev:HaloSlider.Thumb>
4+
<ControlTemplate>
5+
<Rectangle Width="30"
6+
Height="30"
7+
Fill="{ThemeResource SystemAccentColor}"
8+
RadiusX="4"
9+
RadiusY="4" />
10+
</ControlTemplate>
11+
</dev:HaloSlider.Thumb>
12+
</dev:HaloSlider>
13+
</dev:Halo>

0 commit comments

Comments
 (0)