Skip to content

Commit 6dadded

Browse files
ghost1372ghost1372
committed
Add XamlLights and StoreCarousel Samples
1 parent 1217ad4 commit 6dadded

File tree

18 files changed

+339
-0
lines changed

18 files changed

+339
-0
lines changed

‎README.md‎

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

135+
- ✨ StoreCarousel
136+
- ✨ Xaml Lights
135137
- ✨ ImageFrame
136138
- ✨ FrostedGlass
137139
- ✨ ProfileControl
@@ -306,6 +308,12 @@ Install-Package DevWinUI.ContextMenu
306308

307309
## 🕰️ History 🕰️
308310

311+
### StoreCarousel
312+
![StoreCarousel](https://raw.githubusercontent.com/ghost1372/DevWinUI-Resources/refs/heads/main/DevWinUI-Docs/StoreCarousel.gif)
313+
314+
### Xaml Lights
315+
![Xaml Lights](https://raw.githubusercontent.com/ghost1372/DevWinUI-Resources/refs/heads/main/DevWinUI-Docs/XamlLights.gif)
316+
309317
### AnimatedTextBlock
310318
![AnimatedTextBlock](https://raw.githubusercontent.com/ghost1372/DevWinUI-Resources/refs/heads/main/DevWinUI-Docs/AnimatedTextBlock.gif)
311319

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

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@ Themes\Styles\Controls\SplitCircle.xaml
105105
Themes\Styles\Controls\StepBar.xaml
106106
Themes\Styles\Controls\StorageBar.xaml
107107
Themes\Styles\Controls\StorageRing.xaml
108+
Themes\Styles\Controls\StoreCarousel.xaml
108109
Themes\Styles\Controls\TextBox.xaml
109110
Themes\Styles\Controls\Timeline.xaml
110111
Themes\Styles\Controls\TransitioningContentControl.xaml
@@ -331,6 +332,15 @@ Themes\Styles\Win2D\Watermark.xaml
331332
<StaticResource x:Key="StorageRingTrackCautionBrush" ResourceKey="ControlStrongStrokeColorDefaultBrush" />
332333
<StaticResource x:Key="StorageRingTrackCriticalBrush" ResourceKey="ControlStrongStrokeColorDefaultBrush" />
333334
<StaticResource x:Key="StorageRingTrackDisabledBrush" ResourceKey="ControlStrongStrokeColorDisabledBrush" />
335+
<Color x:Key="StoreCarouselTitleForegroundColor">#FFFFFF</Color>
336+
<Color x:Key="StoreCarouselDescriptionForegroundColor">#C5FFFFFF</Color>
337+
<Color x:Key="StoreCarouselNavButtonForegroundColor">#72000000</Color>
338+
<Thickness x:Key="StoreCarouselNavButtonBorderThickness">0</Thickness>
339+
<x:Double x:Key="StoreCarouselNavButtonBlurAmount">0</x:Double>
340+
<x:Double x:Key="StoreCarouselNavButtonRectangleOpacity">0</x:Double>
341+
<SolidColorBrush x:Key="StoreCarouselTitleForegroundBrush" Color="{StaticResource StoreCarouselTitleForegroundColor}" />
342+
<SolidColorBrush x:Key="StoreCarouselDescriptionForegroundBrush" Color="{StaticResource StoreCarouselDescriptionForegroundColor}" />
343+
<SolidColorBrush x:Key="StoreCarouselNavButtonForegroundBrush" Color="{StaticResource StoreCarouselNavButtonForegroundColor}" />
334344
<StaticResource x:Key="WaveProgressBarBackground" ResourceKey="CardStrokeColorDefaultSolidBrush" />
335345
<StaticResource x:Key="WaveProgressBarBorderBrush" ResourceKey="ControlElevationBorderBrush" />
336346
<StaticResource x:Key="ProgressCompletedBackgroundBrush" ResourceKey="AccentAAFillColorDefaultBrush" />
@@ -535,6 +545,15 @@ Themes\Styles\Win2D\Watermark.xaml
535545
<StaticResource x:Key="StorageRingTrackCautionBrush" ResourceKey="ControlStrongStrokeColorDefaultBrush" />
536546
<StaticResource x:Key="StorageRingTrackCriticalBrush" ResourceKey="ControlStrongStrokeColorDefaultBrush" />
537547
<StaticResource x:Key="StorageRingTrackDisabledBrush" ResourceKey="ControlStrongStrokeColorDisabledBrush" />
548+
<Color x:Key="StoreCarouselTitleForegroundColor">#FFFFFF</Color>
549+
<Color x:Key="StoreCarouselDescriptionForegroundColor">#C5FFFFFF</Color>
550+
<Color x:Key="StoreCarouselNavButtonForegroundColor">#C5FFFFFF</Color>
551+
<Thickness x:Key="StoreCarouselNavButtonBorderThickness">1</Thickness>
552+
<x:Double x:Key="StoreCarouselNavButtonBlurAmount">20</x:Double>
553+
<x:Double x:Key="StoreCarouselNavButtonRectangleOpacity">1</x:Double>
554+
<SolidColorBrush x:Key="StoreCarouselTitleForegroundBrush" Color="{StaticResource StoreCarouselTitleForegroundColor}" />
555+
<SolidColorBrush x:Key="StoreCarouselDescriptionForegroundBrush" Color="{StaticResource StoreCarouselDescriptionForegroundColor}" />
556+
<SolidColorBrush x:Key="StoreCarouselNavButtonForegroundBrush" Color="{StaticResource StoreCarouselNavButtonForegroundColor}" />
538557
<StaticResource x:Key="WaveProgressBarBackground" ResourceKey="ControlFillColorDefaultBrush" />
539558
<StaticResource x:Key="WaveProgressBarBorderBrush" ResourceKey="ControlElevationBorderBrush" />
540559
<StaticResource x:Key="ProgressCompletedBackgroundBrush" ResourceKey="AccentAAFillColorDefaultBrush" />
@@ -727,6 +746,15 @@ Themes\Styles\Win2D\Watermark.xaml
727746
<StaticResource x:Key="StorageRingTrackCautionBrush" ResourceKey="SystemColorWindowTextColorBrush" />
728747
<StaticResource x:Key="StorageRingTrackCriticalBrush" ResourceKey="SystemColorWindowTextColorBrush" />
729748
<StaticResource x:Key="StorageRingTrackDisabledBrush" ResourceKey="SystemColorGrayTextBrush" />
749+
<Color x:Key="StoreCarouselTitleForegroundColor">#FF0000</Color>
750+
<Color x:Key="StoreCarouselDescriptionForegroundColor">#FF0000</Color>
751+
<Color x:Key="StoreCarouselNavButtonForegroundColor">#C5FFFFFF</Color>
752+
<Thickness x:Key="StoreCarouselNavButtonBorderThickness">1</Thickness>
753+
<x:Double x:Key="StoreCarouselNavButtonBlurAmount">20</x:Double>
754+
<x:Double x:Key="StoreCarouselNavButtonRectangleOpacity">1</x:Double>
755+
<SolidColorBrush x:Key="StoreCarouselTitleForegroundBrush" Color="{StaticResource StoreCarouselTitleForegroundColor}" />
756+
<SolidColorBrush x:Key="StoreCarouselDescriptionForegroundBrush" Color="{StaticResource StoreCarouselDescriptionForegroundColor}" />
757+
<SolidColorBrush x:Key="StoreCarouselNavButtonForegroundBrush" Color="{StaticResource StoreCarouselNavButtonForegroundColor}" />
730758
<StaticResource x:Key="WaveProgressBarBackground" ResourceKey="SystemColorButtonFaceColorBrush" />
731759
<StaticResource x:Key="WaveProgressBarBorderBrush" ResourceKey="SystemColorButtonTextColorBrush" />
732760
<StaticResource x:Key="ProgressCompletedBackgroundBrush" ResourceKey="AccentAAFillColorDefaultBrush" />
@@ -10749,6 +10777,114 @@ Themes\Styles\Win2D\Watermark.xaml
1074910777
</Style>
1075010778
<Style TargetType="local:StorageBar" BasedOn="{StaticResource DefaultStorageBarStyle}" />
1075110779
<Style TargetType="local:StorageRing" BasedOn="{StaticResource DefaultStorageRingStyle}" />
10780+
<Style x:Key="DefaultStoreCarouselStyle" TargetType="local:StoreCarousel">
10781+
<Setter Property="Template">
10782+
<Setter.Value>
10783+
<ControlTemplate TargetType="local:StoreCarousel">
10784+
<Grid x:Name="PART_RootGrid" ColumnSpacing="15" RowSpacing="15">
10785+
<Grid.RowDefinitions>
10786+
<RowDefinition />
10787+
<RowDefinition Height="Auto" />
10788+
<RowDefinition Height="0" />
10789+
</Grid.RowDefinitions>
10790+
<Grid.ColumnDefinitions>
10791+
<ColumnDefinition Width="1.6*" />
10792+
<ColumnDefinition Width="*" />
10793+
</Grid.ColumnDefinitions>
10794+
<VisualStateManager.VisualStateGroups>
10795+
<VisualStateGroup>
10796+
<VisualState x:Name="LargeState">
10797+
<VisualState.StateTriggers>
10798+
<AdaptiveTrigger MinWindowWidth="1000" />
10799+
</VisualState.StateTriggers>
10800+
</VisualState>
10801+
<VisualState x:Name="SmallState">
10802+
<VisualState.StateTriggers>
10803+
<AdaptiveTrigger MinWindowWidth="0" />
10804+
</VisualState.StateTriggers>
10805+
<VisualState.Setters>
10806+
<Setter Target="PART_RootGrid.ColumnDefinitions[0].Width" Value="*" />
10807+
<Setter Target="PART_RootGrid.ColumnDefinitions[1].Width" Value="Auto" />
10808+
<Setter Target="PART_RootGrid.RowDefinitions[2].Height" Value="*" />
10809+
<Setter Target="PART_ThumbnailGrid.ColumnDefinitions[0].Width" Value="1.7*" />
10810+
<Setter Target="PART_ThumbnailGrid.(Grid.Row)" Value="2" />
10811+
<Setter Target="PART_ThumbnailGrid.(Grid.Column)" Value="0" />
10812+
<Setter Target="PART_ThumbnailGrid.(Grid.ColumnSpan)" Value="2" />
10813+
<Setter Target="PART_PrimaryCompositionShadow.(Grid.Column)" Value="0" />
10814+
<Setter Target="PART_PrimaryCompositionShadow.(Grid.ColumnSpan)" Value="1" />
10815+
<Setter Target="PART_PrimaryCompositionShadow.(Grid.RowSpan)" Value="2" />
10816+
<Setter Target="PART_SecondaryCompositionShadow.(Grid.Row)" Value="0" />
10817+
<Setter Target="PART_SecondaryCompositionShadow.(Grid.Column)" Value="1" />
10818+
<Setter Target="PART_TertiaryCompositionShadow.(Grid.Row)" Value="1" />
10819+
<Setter Target="PART_TertiaryCompositionShadow.(Grid.Column)" Value="1" />
10820+
</VisualState.Setters>
10821+
</VisualState>
10822+
</VisualStateGroup>
10823+
</VisualStateManager.VisualStateGroups>
10824+
<Grid x:Name="PART_SliderGrid" Background="Transparent">
10825+
<local:ImageFrame x:Name="PART_Image" CornerRadius="{ThemeResource OverlayCornerRadius}" DisplayShadow="True" ShadowBlurRadius="80" ShowPlaceholder="False" Stretch="Fill" TransitionMode="SlideLeft" UseAutoShadowColor="True" />
10826+
<local:OpacityMaskView VerticalAlignment="Stretch" VerticalContentAlignment="Stretch">
10827+
<local:OpacityMaskView.OpacityMask>
10828+
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
10829+
<GradientStop Offset="0.0" Color="{ThemeResource SystemBaseHighColor}" />
10830+
<GradientStop Offset="0.7" Color="{ThemeResource SystemBaseHighColor}" />
10831+
<GradientStop Offset="1.0" Color="Transparent" />
10832+
</LinearGradientBrush>
10833+
</local:OpacityMaskView.OpacityMask>
10834+
<Rectangle x:Name="PART_FadeRectangle" VerticalAlignment="Stretch" Fill="Transparent" RadiusX="8" RadiusY="8" />
10835+
</local:OpacityMaskView>
10836+
<local:CompositionShadow Width="{Binding ElementName=PART_PreviousBtn, Path=Width}" Height="{Binding ElementName=PART_PreviousBtn, Path=Height}" Margin="{Binding ElementName=PART_PreviousBtn, Path=Margin}" HorizontalAlignment="{Binding ElementName=PART_PreviousBtn, Path=HorizontalAlignment}" VerticalAlignment="{Binding ElementName=PART_PreviousBtn, Path=VerticalAlignment}" BlurRadius="{ThemeResource StoreCarouselNavButtonBlurAmount}" Visibility="{Binding ElementName=PART_PreviousBtn, Path=Visibility}">
10837+
<Rectangle x:Name="PART_PreviousBtnRectangle" Opacity="{ThemeResource StoreCarouselNavButtonRectangleOpacity}" RadiusX="16" RadiusY="16" />
10838+
</local:CompositionShadow>
10839+
<Button x:Name="PART_PreviousBtn" Width="32" Height="32" Margin="-10,0,0,0" BorderThickness="{ThemeResource StoreCarouselNavButtonBorderThickness}" CornerRadius="16" Foreground="{ThemeResource StoreCarouselNavButtonForegroundColor}" ToolTipService.ToolTip="Sroll Backward" Visibility="Collapsed">
10840+
<FontIcon FontSize="{ThemeResource FlipViewButtonFontSize}" Glyph="" />
10841+
</Button>
10842+
<local:CompositionShadow Width="{Binding ElementName=PART_NextBtn, Path=Width}" Height="{Binding ElementName=PART_NextBtn, Path=Height}" Margin="{Binding ElementName=PART_NextBtn, Path=Margin}" HorizontalAlignment="{Binding ElementName=PART_NextBtn, Path=HorizontalAlignment}" VerticalAlignment="{Binding ElementName=PART_NextBtn, Path=VerticalAlignment}" BlurRadius="{ThemeResource StoreCarouselNavButtonBlurAmount}" Visibility="{Binding ElementName=PART_NextBtn, Path=Visibility}">
10843+
<Rectangle x:Name="PART_NextBtnRectangle" Opacity="{ThemeResource StoreCarouselNavButtonRectangleOpacity}" RadiusX="16" RadiusY="16" />
10844+
</local:CompositionShadow>
10845+
<Button x:Name="PART_NextBtn" Width="32" Height="32" Margin="0,0,-10,0" HorizontalAlignment="Right" BorderThickness="{ThemeResource StoreCarouselNavButtonBorderThickness}" CornerRadius="16" Foreground="{ThemeResource StoreCarouselNavButtonForegroundColor}" ToolTipService.ToolTip="Sroll Forward" Visibility="Collapsed">
10846+
<FontIcon FontSize="{ThemeResource FlipViewButtonFontSize}" Glyph="" />
10847+
</Button>
10848+
</Grid>
10849+
<StackPanel x:Name="PART_ActionPanel" Margin="40,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" Spacing="5">
10850+
<TextBlock x:Name="PART_TitleBlock" MaxWidth="300" Foreground="{ThemeResource StoreCarouselTitleForegroundBrush}" Style="{ThemeResource TitleTextBlockStyle}" TextWrapping="Wrap" />
10851+
<TextBlock x:Name="PART_DescriptionBlock" MaxWidth="240" Foreground="{ThemeResource StoreCarouselDescriptionForegroundColor}" Opacity="0.75" Style="{ThemeResource BodyStrongTextBlockStyle}" />
10852+
<Button x:Name="PART_ActionButton" MinWidth="120" BorderThickness="0,0,0,2" CornerRadius="8" Foreground="White">
10853+
<TextBlock x:Name="PART_ActionButtonTextBlock" Style="{StaticResource BaseTextBlockStyle}" />
10854+
</Button>
10855+
</StackPanel>
10856+
<local:ArcProgress x:Name="PART_Arc" Width="20" Height="20" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Bottom" Foreground="DarkGray" Percentage="100" Visibility="{Binding AutoShuffle, RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource BoolToVisibilityConverter}}" />
10857+
<PipsPager x:Name="PART_PipsPager" Grid.Row="1" Margin="0,-10,0,0" HorizontalAlignment="Center" VerticalAlignment="Bottom" Visibility="{TemplateBinding PipsPagerVisibility}" />
10858+
<Grid x:Name="PART_ThumbnailGrid" Grid.Column="1" ColumnSpacing="15" RowSpacing="15">
10859+
<Grid.RowDefinitions>
10860+
<RowDefinition />
10861+
<RowDefinition />
10862+
</Grid.RowDefinitions>
10863+
<Grid.ColumnDefinitions>
10864+
<ColumnDefinition />
10865+
<ColumnDefinition />
10866+
</Grid.ColumnDefinitions>
10867+
<local:CompositionShadow x:Name="PART_PrimaryCompositionShadow" Grid.ColumnSpan="2" BlurRadius="35" CornerRadius="{ThemeResource OverlayCornerRadius}" ImageSourceForEdgeColor="{Binding PrimaryImageSource, RelativeSource={RelativeSource Mode=TemplatedParent}}" UseEdgeColorFromImage="True">
10868+
<Border CornerRadius="{ThemeResource OverlayCornerRadius}">
10869+
<Image Source="{Binding PrimaryImageSource, RelativeSource={RelativeSource Mode=TemplatedParent}}" Stretch="Fill" />
10870+
</Border>
10871+
</local:CompositionShadow>
10872+
<local:CompositionShadow x:Name="PART_SecondaryCompositionShadow" Grid.Row="1" BlurRadius="35" CornerRadius="{ThemeResource OverlayCornerRadius}" ImageSourceForEdgeColor="{Binding SecondaryImageSource, RelativeSource={RelativeSource Mode=TemplatedParent}}" UseEdgeColorFromImage="True">
10873+
<Border CornerRadius="{ThemeResource OverlayCornerRadius}">
10874+
<Image Source="{Binding SecondaryImageSource, RelativeSource={RelativeSource Mode=TemplatedParent}}" Stretch="Fill" />
10875+
</Border>
10876+
</local:CompositionShadow>
10877+
<local:CompositionShadow x:Name="PART_TertiaryCompositionShadow" Grid.Row="1" Grid.Column="1" BlurRadius="35" CornerRadius="{ThemeResource OverlayCornerRadius}" ImageSourceForEdgeColor="{Binding TertiaryImageSource, RelativeSource={RelativeSource Mode=TemplatedParent}}" UseEdgeColorFromImage="True">
10878+
<Border CornerRadius="{ThemeResource OverlayCornerRadius}">
10879+
<Image Source="{Binding TertiaryImageSource, RelativeSource={RelativeSource Mode=TemplatedParent}}" Stretch="Fill" />
10880+
</Border>
10881+
</local:CompositionShadow>
10882+
</Grid>
10883+
</Grid>
10884+
</ControlTemplate>
10885+
</Setter.Value>
10886+
</Setter>
10887+
</Style>
1075210888
<Style x:Key="DefaultDevWinUITextBoxStyle" TargetType="local:TextBox">
1075310889
<Setter Property="Foreground" Value="{ThemeResource TextControlForeground}" />
1075410890
<Setter Property="Background" Value="{ThemeResource TextControlBackground}" />
@@ -12078,6 +12214,7 @@ Themes\Styles\Win2D\Watermark.xaml
1207812214
<Setter Property="ItemsPanel" Value="{StaticResource StepBarHorizontalItemsPanelTemplate}" />
1207912215
<Setter Property="ShowStepIndex" Value="True" />
1208012216
</Style>
12217+
<Style TargetType="local:StoreCarousel" BasedOn="{StaticResource DefaultStoreCarouselStyle}" />
1208112218
<Style TargetType="local:TextBox" BasedOn="{StaticResource DefaultDevWinUITextBoxStyle}" />
1208212219
<Style TargetType="local:WaveProgressBar" BasedOn="{StaticResource DefaultWaveProgressBarStyle}" />
1208312220
<Style TargetType="local:AnimatedTextBlock" BasedOn="{StaticResource DefaultAnimatedTextBlockStyle}" />

‎dev/DevWinUI.Gallery/Assets/Carousel/1.jpg‎

157 KB
Loading

‎dev/DevWinUI.Gallery/Assets/Carousel/10.jpg‎

13.6 KB
Loading

‎dev/DevWinUI.Gallery/Assets/Carousel/2.jpg‎

85.6 KB
Loading

‎dev/DevWinUI.Gallery/Assets/Carousel/3.jpg‎

175 KB
Loading

‎dev/DevWinUI.Gallery/Assets/Carousel/4.jpg‎

203 KB
Loading

‎dev/DevWinUI.Gallery/Assets/Carousel/5.jpg‎

133 KB
Loading

‎dev/DevWinUI.Gallery/Assets/Carousel/6.jpg‎

170 KB
Loading

‎dev/DevWinUI.Gallery/Assets/Carousel/7.jpg‎

205 KB
Loading

0 commit comments

Comments
 (0)