Skip to content

Commit 3cbc35a

Browse files
NotYoojunNotYoojun
authored
Merge pull request #219 from GID0317/#218
Gallery Revamp: AcrylicBrush Page
2 parents ec77e9a + a02cd4d commit 3cbc35a

File tree

3 files changed

+86
-25
lines changed

3 files changed

+86
-25
lines changed

‎source/iNKORE.UI.WPF.Modern.Gallery/Pages/Controls/Windows/AcrylicPage.xaml‎

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<ui:Page
1+
<ui:Page
22
x:Class="iNKORE.UI.WPF.Modern.Gallery.Pages.Controls.Windows.AcrylicPage"
33
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
44
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -24,10 +24,21 @@
2424
</ResourceDictionary>
2525
</Page.Resources>
2626
<StackPanel>
27-
<TextBlock>
28-
Acrylic Brush might fall back to SolidColorbrush in certain scenarios.
29-
If you can't see the Acrylic effect, please refer to<Hyperlink NavigateUri="https://docs.microsoft.com/windows/apps/design/style/acrylic#usability-and-adaptability">Acrylic brush adaptability documentation</Hyperlink>
30-
.</TextBlock>
27+
<TextBlock TextWrapping="Wrap" FontSize="{DynamicResource {x:Static ui:ThemeKeys.BodyTextBlockFontSizeKey}}">
28+
<!--FontSize is a workaround to force Hyperlinks to use the correct font size.-->
29+
30+
Acrylic Brush might fall back to SolidColorBrush in certain scenarios.
31+
If you can't see the Acrylic effect, please refer to
32+
<Hyperlink NavigateUri="https://learn.microsoft.com/windows/apps/design/style/acrylic#usability-and-adaptability"
33+
RequestNavigate="Hyperlink_RequestNavigate">
34+
Acrylic brush adaptability documentation
35+
</Hyperlink>.
36+
Acrylic Brush uses in-app acrylic. See
37+
<Hyperlink Click="SystemBackdropLink_Click">
38+
SystemBackdrops (Mica/Acrylic)
39+
</Hyperlink>
40+
for background acrylic.
41+
</TextBlock>
3142
<local:ControlExample x:Name="Example1" HeaderText="Default in-app acrylic brush.">
3243
<local:ControlExample.Example>
3344
<Grid
@@ -101,9 +112,9 @@
101112
</local:ControlExample.Example>
102113
<local:ControlExample.Options>
103114
<StackPanel>
104-
<TextBlock Margin="0,0,0,12" Text="Tint Opacity :" />
105115
<Slider
106116
x:Name="OpacitySliderInApp"
117+
ui:ControlHelper.Header="Tint Opacity"
107118
Width="200"
108119
HorizontalAlignment="Left"
109120
AutomationProperties.Name="tint opacity"
@@ -159,31 +170,36 @@
159170
Margin="12"
160171
Target="{Binding ElementName=Acrylic4Grid}"
161172
TintColor="SkyBlue"
162-
TintOpacity="0.8" />
173+
TintOpacity="0.8"
174+
Amount="80" />
163175
</Grid>
164176
</local:ControlExample.Example>
165177
<local:ControlExample.Options>
166178
<StackPanel>
167-
<TextBlock Margin="0,0,0,12" Text="Tint Opacity :" />
168179
<Slider
169180
x:Name="OpacitySliderLumin"
181+
ui:ControlHelper.Header="Tint Opacity"
170182
Width="200"
171183
HorizontalAlignment="Left"
172184
AutomationProperties.Name="tint opacity"
173185
Maximum="1"
174186
Minimum="0"
175187
SmallChange="0.001"
176188
TickFrequency="0.001"
177-
Value="{Binding TintOpacity, ElementName=CustomAcrylicShapeLumin, Mode=TwoWay}" />
178-
<TextBlock Margin="0,0,0,12" Text="Tint Luminosity Opacity :" />
179-
<ui:NumberBox
189+
Value="{Binding TintOpacity, ElementName=CustomAcrylicShapeLumin, Mode=TwoWay}"
190+
ValueChanged="OpacitySliderLumin_ValueChanged" />
191+
<Slider
180192
x:Name="LuminositySlider"
193+
ui:ControlHelper.Header="Tint Luminosity Opacity"
181194
Width="200"
182195
HorizontalAlignment="Left"
183196
AutomationProperties.Name="tint luminosity"
197+
Maximum="100"
184198
Minimum="0"
185-
SpinButtonPlacementMode="Inline"
186-
Value="{Binding Amount, ElementName=CustomAcrylicShapeLumin, Mode=TwoWay}" />
199+
SmallChange="0.001"
200+
TickFrequency="0.001"
201+
Value="{Binding Amount, ElementName=CustomAcrylicShapeLumin, Mode=TwoWay}"
202+
ValueChanged="LuminositySlider_ValueChanged" />
187203
</StackPanel>
188204
</local:ControlExample.Options>
189205
</local:ControlExample>

‎source/iNKORE.UI.WPF.Modern.Gallery/Pages/Controls/Windows/AcrylicPage.xaml.cs‎

Lines changed: 56 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
using iNKORE.UI.WPF.Modern.Controls;
1+
using iNKORE.UI.WPF.Modern.Controls;
22
using iNKORE.UI.WPF.Modern.Media;
33
using System;
44
using System.Collections.Generic;
@@ -14,6 +14,8 @@
1414
using System.Windows.Media.Imaging;
1515
using System.Windows.Navigation;
1616
using System.Windows.Shapes;
17+
using System.Diagnostics;
18+
using iNKORE.UI.WPF.Modern.Gallery.DataModel;
1719
using Page = iNKORE.UI.WPF.Modern.Controls.Page;
1820

1921
namespace iNKORE.UI.WPF.Modern.Gallery.Pages.Controls.Windows
@@ -48,11 +50,39 @@ private void OpacitySliderInApp_ValueChanged(object sender, RoutedPropertyChange
4850
UpdateExampleCode();
4951
}
5052

53+
private void Hyperlink_RequestNavigate(object sender, RequestNavigateEventArgs e)
54+
{
55+
Process.Start(new ProcessStartInfo(e.Uri.AbsoluteUri) { UseShellExecute = true });
56+
e.Handled = true;
57+
}
58+
59+
private async void SystemBackdropLink_Click(object sender, RoutedEventArgs e)
60+
{
61+
var realms = await ControlInfoDataSource.Instance.GetRealmsAsync();
62+
var item = realms
63+
.SelectMany(r => r.Groups)
64+
.SelectMany(g => g.Items)
65+
.FirstOrDefault(ci => ci.UniqueId == "SystemBackdrops");
66+
if (item == null) return;
67+
68+
NavigationRootPage.RootFrame.Navigate(ItemPage.Create(item));
69+
}
70+
71+
private void OpacitySliderLumin_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
72+
{
73+
UpdateExampleCode();
74+
}
75+
76+
private void LuminositySlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
77+
{
78+
UpdateExampleCode();
79+
}
5180

5281
private void UpdateExampleCode()
5382
{
5483
Example1.Xaml = Example1Xaml;
5584
Example3.Xaml = Example3Xaml;
85+
Example4.Xaml = Example4Xaml;
5686
}
5787

5888
string Example1Xaml => @"
@@ -79,12 +109,29 @@ private void UpdateExampleCode()
79109
";
80110

81111
string Example3Xaml => $@"
82-
<Grid
83-
x:Name=""Example3Grid""
84-
Width=""320""
85-
Height=""200""
112+
<Grid x:Name=""Example3Grid""
113+
Width=""320"" Height=""200""
86114
HorizontalAlignment=""Left"">
87115
<Grid x:Name=""Acrylic3Grid""
116+
Background=""{{DynamicResource {{x:Static ui:ThemeKeys.SolidBackgroundFillColorBaseBrushKey}}}}"">
117+
<Rectangle Width=""100"" Height=""200"" Fill=""Aqua""
118+
HorizontalAlignment=""Left"" VerticalAlignment=""Top"" />
119+
<Ellipse Width=""152"" Height=""152"" Fill=""Magenta""
120+
HorizontalAlignment=""Center"" VerticalAlignment=""Center"" />
121+
<Rectangle Width=""80"" Height=""100"" Fill=""Yellow""
122+
HorizontalAlignment=""Right"" VerticalAlignment=""Bottom"" />
123+
</Grid>
124+
<ui:AcrylicPanel x:Name=""CustomAcrylicShapeInApp""
125+
Margin=""12"" Target=""{{Binding ElementName=Acrylic3Grid}}""
126+
TintColor=""{CustomAcrylicShapeInApp.TintColor.ToHEX()}"" TintOpacity=""{CustomAcrylicShapeInApp.TintOpacity.ToString()}"" />
127+
</Grid>
128+
";
129+
130+
string Example4Xaml => $@"
131+
<Grid x:Name=""Example4Grid""
132+
Width=""320"" Height=""200""
133+
HorizontalAlignment=""Left"">
134+
<Grid x:Name=""Acrylic4Grid""
88135
Background=""{{DynamicResource {{x:Static ui:ThemeKeys.SolidBackgroundFillColorBaseBrushKey}}}}"">
89136
<Rectangle
90137
Width=""100""
@@ -105,12 +152,10 @@ private void UpdateExampleCode()
105152
VerticalAlignment=""Bottom""
106153
Fill=""Yellow"" />
107154
</Grid>
108-
<ui:AcrylicPanel
109-
x:Name=""CustomAcrylicShapeInApp""
110-
Margin=""12""
111-
Target=""{{Binding ElementName=Acrylic3Grid}}""
112-
TintColor=""${CustomAcrylicShapeInApp.TintColor.ToHEX()}""
113-
TintOpacity=""${CustomAcrylicShapeInApp.TintOpacity.ToString()}"" />
155+
<ui:AcrylicPanel x:Name=""CustomAcrylicShapeLumin""
156+
Margin=""12"" TintColor=""SkyBlue""
157+
Target=""{{Binding ElementName=Acrylic4Grid}}""
158+
TintOpacity=""{CustomAcrylicShapeLumin.TintOpacity.ToString()}"" Amount=""{CustomAcrylicShapeLumin.Amount.ToString()}"" />
114159
</Grid>
115160
";
116161

‎source/iNKORE.UI.WPF.Modern.Gallery/Pages/Controls/Windows/IconElementPage.xaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<ui:Page
1+
<ui:Page
22
x:Class="iNKORE.UI.WPF.Modern.Gallery.Pages.Controls.Windows.IconElementPage"
33
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
44
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

0 commit comments

Comments
 (0)