Skip to content

Commit 93eccf2

Browse files
NotYoojunNotYoojun
authored
Merge pull request #236 from GID0317/#235
Gallery Revamp: Home Page
2 parents c41338e + f453c60 commit 93eccf2

File tree

13 files changed

+519
-152
lines changed

13 files changed

+519
-152
lines changed

‎source/iNKORE.UI.WPF.Modern.Gallery/App.xaml‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<Application
1+
<Application
22
x:Class="iNKORE.UI.WPF.Modern.Gallery.App"
33
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
44
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -215,6 +215,34 @@
215215
</Style>
216216

217217
<sys:Double x:Key="TeachingTipMinWidth">50</sys:Double>
218+
219+
<Geometry x:Key="GitHubIconPath">
220+
M12,2 C6.48,2 2,6.48 2,12
221+
c0,4.418 2.868,8.168 6.839,9.489
222+
c0.5,0.092 0.682,-0.217 0.682,-0.482
223+
c0,-0.237 -0.008,-0.868 -0.013,-1.703
224+
c-2.782,0.604 -3.369,-1.342 -3.369,-1.342
225+
c-0.455,-1.158 -1.112,-1.467 -1.112,-1.467
226+
c-0.909,-0.62 0.069,-0.608 0.069,-0.608
227+
c1.004,0.07 1.532,1.031 1.532,1.031
228+
c0.892,1.528 2.341,1.087 2.91,0.832
229+
c0.092,-0.646 0.349,-1.087 0.635,-1.337
230+
c-2.222,-0.253 -4.555,-1.111 -4.555,-4.944
231+
c0,-1.091 0.39,-1.984 1.03,-2.684
232+
c-0.103,-0.253 -0.447,-1.274 0.098,-2.65
233+
c0,0 0.84,-0.27 2.75,1.026
234+
c0.797,-0.222 1.65,-0.333 2.5,-0.337
235+
c0.85,0.004 1.703,0.115 2.5,0.337
236+
c1.908,-1.296 2.747,-1.026 2.747,-1.026
237+
c0.546,1.376 0.202,2.397 0.1,2.65
238+
c0.64,0.7 1.028,1.593 1.028,2.684
239+
c0,3.841 -2.337,4.687 -4.565,4.937
240+
c0.359,0.311 0.678,0.924 0.678,1.865
241+
c0,1.346 -0.012,2.429 -0.012,2.758
242+
c0,0.269 0.18,0.58 0.688,0.481
243+
C19.137,20.164 22,16.418 22,12
244+
C22,6.48 17.52,2 12,2z
245+
</Geometry>
218246
</ResourceDictionary>
219247
</Application.Resources>
220248
</Application>

‎source/iNKORE.UI.WPF.Modern.Gallery/Assets/HomeHeaderTiles/Header-WindowsDesign.png‎

195 KB
Loading

‎source/iNKORE.UI.WPF.Modern.Gallery/Controls/HeaderTile.xaml‎

Lines changed: 66 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,26 @@
1-
<UserControl
1+
<UserControl
22
x:Class="iNKORE.UI.WPF.Modern.Gallery.Controls.HeaderTile"
33
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
44
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
55
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
66
xmlns:local="clr-namespace:iNKORE.UI.WPF.Modern.Gallery"
77
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
88
xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern"
9-
d:DesignHeight="450"
10-
d:DesignWidth="800"
11-
DataContext="{Binding RelativeSource={RelativeSource Self}}"
12-
mc:Ignorable="d">
9+
mc:Ignorable="d"
10+
Width="230"
11+
Height="230"
12+
DataContext="{Binding RelativeSource={RelativeSource Self}}">
1313

14-
<Grid Margin="0,0,12,12">
15-
<Grid.Resources>
14+
<Border CornerRadius="8" Margin="0,0,12,12"
15+
Background="{DynamicResource AcrylicBackgroundFillColorDefaultBrush}"
16+
BorderBrush="{DynamicResource SurfaceStrokeColorFlyoutBrush}">
17+
<FrameworkElement.Resources>
1618
<ResourceDictionary>
1719
<ResourceDictionary.MergedDictionaries>
1820
<ui:ThemeResources CanBeAccessedAcrossThreads="{x:Static local:App.IsMultiThreaded}">
1921
<ui:ThemeResources.ThemeDictionaries>
2022
<ResourceDictionary x:Key="Light" ui:ThemeDictionary.Key="Light">
21-
<SolidColorBrush x:Key="HyperlinkButtonBorderBrush" Color="{DynamicResource ControlStrokeColorDefault}" />
23+
<SolidColorBrush x:Key="HyperlinkButtonBorderBrush" Color="{DynamicResource {x:Static ui:ThemeKeys.ControlStrokeColorDefaultKey}}" />
2224
<SolidColorBrush x:Key="HyperlinkButtonBorderBrushPointerOver" Color="{DynamicResource ControlStrokeColorSecondary}" />
2325
<SolidColorBrush x:Key="HyperlinkButtonBorderBrushPressed" Color="{DynamicResource ControlStrokeColorDefault}" />
2426
<SolidColorBrush x:Key="HyperlinkButtonBorderBrushDisabled" Color="{DynamicResource ControlStrokeColorDefault}" />
@@ -39,44 +41,73 @@
3941
</ui:ThemeResources>
4042
</ResourceDictionary.MergedDictionaries>
4143
</ResourceDictionary>
42-
</Grid.Resources>
44+
</FrameworkElement.Resources>
4345

4446
<ui:HyperlinkButton
45-
Height="150"
46-
Padding="-1"
47+
HorizontalAlignment="Stretch"
48+
VerticalAlignment="Stretch"
49+
HorizontalContentAlignment="Stretch"
50+
VerticalContentAlignment="Stretch"
4751
NavigateUri="{Binding Link, Mode=OneWay}">
4852
<Grid>
4953
<Grid.RowDefinitions>
50-
<RowDefinition Height="102" />
54+
<RowDefinition Height="75" />
5155
<RowDefinition Height="*" />
5256
</Grid.RowDefinitions>
53-
<Image
54-
HorizontalAlignment="Center"
55-
Source="{Binding Source, Mode=OneWay}"
56-
Stretch="UniformToFill" />
5757

58-
<Grid
58+
<ContentControl
59+
Grid.Row="0"
60+
HorizontalAlignment="Left"
61+
VerticalAlignment="Top"
62+
Margin="14,20,0,0">
63+
<ContentControl.Style>
64+
<Style TargetType="ContentControl">
65+
<Setter Property="Content" Value="{Binding Icon, RelativeSource={RelativeSource AncestorType=UserControl}}" />
66+
<Style.Triggers>
67+
<DataTrigger Binding="{Binding Icon, RelativeSource={RelativeSource AncestorType=UserControl}}" Value="{x:Null}">
68+
<Setter Property="ContentTemplate">
69+
<Setter.Value>
70+
<DataTemplate>
71+
<Viewbox Stretch="Uniform" Width="56" Height="56">
72+
<Image Source="{Binding Source, RelativeSource={RelativeSource AncestorType=UserControl}}"
73+
Stretch="Uniform"/>
74+
</Viewbox>
75+
</DataTemplate>
76+
</Setter.Value>
77+
</Setter>
78+
<Setter Property="Content" Value="{Binding Source, RelativeSource={RelativeSource AncestorType=UserControl}}" />
79+
</DataTrigger>
80+
</Style.Triggers>
81+
</Style>
82+
</ContentControl.Style>
83+
</ContentControl>
84+
85+
<StackPanel
5986
Grid.Row="1"
60-
Height="48"
61-
HorizontalAlignment="Stretch"
62-
Background="{DynamicResource CardBackgroundFillColorDefaultBrush}"
63-
Opacity="1">
87+
Orientation="Vertical"
88+
Margin="14,15,20,0">
6489
<TextBlock
65-
Margin="16,0"
66-
VerticalAlignment="Center"
90+
x:Name="TitleText"
91+
FontSize="18"
6792
Foreground="{DynamicResource TextFillColorPrimaryBrush}"
68-
Style="{DynamicResource BodyStrongTextBlockStyle}"
69-
Text="{Binding Title, Mode=OneWay}"
70-
TextWrapping="Wrap" />
71-
<ui:FontIcon
72-
Margin="12"
73-
HorizontalAlignment="Right"
74-
VerticalAlignment="Center"
75-
FontFamily="{DynamicResource SymbolThemeFontFamily}"
76-
FontSize="16"
77-
Glyph="&#xE8A7;" />
78-
</Grid>
93+
Style="{DynamicResource BodyTextBlockStyle}"
94+
Text="{Binding Title, Mode=OneWay}" />
95+
<TextBlock
96+
Margin="0,5,0,0"
97+
Foreground="{DynamicResource TextFillColorSecondaryBrush}"
98+
Style="{DynamicResource CaptionTextBlockStyle}"
99+
Text="{Binding Description, Mode=OneWay}" />
100+
</StackPanel>
101+
102+
<ui:FontIcon
103+
Grid.RowSpan="2"
104+
Margin="0,0,0,5"
105+
HorizontalAlignment="Right"
106+
VerticalAlignment="Bottom"
107+
FontSize="16"
108+
Foreground="{DynamicResource TextFillColorPrimaryBrush}"
109+
Glyph="&#xE8A7;" />
79110
</Grid>
80111
</ui:HyperlinkButton>
81-
</Grid>
112+
</Border>
82113
</UserControl>

‎source/iNKORE.UI.WPF.Modern.Gallery/Controls/HeaderTile.xaml.cs‎

Lines changed: 27 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,5 @@
1-
using System;
2-
using System.Collections.Generic;
3-
using System.Linq;
4-
using System.Text;
5-
using System.Threading.Tasks;
61
using System.Windows;
72
using System.Windows.Controls;
8-
using System.Windows.Data;
9-
using System.Windows.Documents;
10-
using System.Windows.Input;
11-
using System.Windows.Media;
12-
using System.Windows.Media.Imaging;
13-
using System.Windows.Navigation;
14-
using System.Windows.Shapes;
153

164
namespace iNKORE.UI.WPF.Modern.Gallery.Controls
175
{
@@ -22,30 +10,48 @@ public partial class HeaderTile : UserControl
2210
{
2311
public string Title
2412
{
25-
get { return (string)GetValue(TitleProperty); }
26-
set { SetValue(TitleProperty, value); }
13+
get => (string)GetValue(TitleProperty);
14+
set => SetValue(TitleProperty, value);
2715
}
2816

2917
public static readonly DependencyProperty TitleProperty =
3018
DependencyProperty.Register("Title", typeof(string), typeof(HeaderTile), new PropertyMetadata(null));
3119

32-
public string Source
20+
public string Description
3321
{
34-
get { return (string)GetValue(SourceProperty); }
35-
set { SetValue(SourceProperty, value); }
22+
get => (string)GetValue(DescriptionProperty);
23+
set => SetValue(DescriptionProperty, value);
24+
}
25+
26+
public static readonly DependencyProperty DescriptionProperty =
27+
DependencyProperty.Register("Description", typeof(string), typeof(HeaderTile), new PropertyMetadata(null));
28+
29+
public object Source
30+
{
31+
get => GetValue(SourceProperty);
32+
set => SetValue(SourceProperty, value);
3633
}
3734

3835
public static readonly DependencyProperty SourceProperty =
39-
DependencyProperty.Register("Source", typeof(string), typeof(HeaderTile), new PropertyMetadata("/Assets/blank.png"));
36+
DependencyProperty.Register("Source", typeof(object), typeof(HeaderTile), new PropertyMetadata(null));
4037

4138
public string Link
4239
{
43-
get { return (string)GetValue(LinkProperty); }
44-
set { SetValue(LinkProperty, value); }
40+
get => (string)GetValue(LinkProperty);
41+
set => SetValue(LinkProperty, value);
4542
}
4643

4744
public static readonly DependencyProperty LinkProperty =
48-
DependencyProperty.Register("Link", typeof(string), typeof(HeaderTile), new PropertyMetadata("http://www.bing.com"));
45+
DependencyProperty.Register("Link", typeof(string), typeof(HeaderTile), new PropertyMetadata(null));
46+
47+
public object Icon
48+
{
49+
get => GetValue(IconProperty);
50+
set => SetValue(IconProperty, value);
51+
}
52+
53+
public static readonly DependencyProperty IconProperty =
54+
DependencyProperty.Register(nameof(Icon), typeof(object), typeof(HeaderTile), new PropertyMetadata(null));
4955

5056
public HeaderTile()
5157
{

‎source/iNKORE.UI.WPF.Modern.Gallery/Controls/HomePageHeaderImage.xaml‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<UserControl
2+
x:Class="iNKORE.UI.WPF.Modern.Gallery.Controls.HomePageHeaderImage"
3+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6+
xmlns:local="clr-namespace:iNKORE.UI.WPF.Modern.Gallery.Controls"
7+
xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern"
8+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
9+
xmlns:System="clr-namespace:System;assembly=mscorlib"
10+
Loaded="OnLoaded"
11+
Unloaded="OnUnloaded"
12+
Height="356" Width="Auto">
13+
14+
<UserControl.Resources>
15+
<LinearGradientBrush x:Key="BackgroundGradientLight" StartPoint="0.5,0" EndPoint="0.5,1">
16+
<GradientStop Offset="0" Color="#CED8E4"/>
17+
<GradientStop Offset="1" Color="#D5DBE3"/>
18+
</LinearGradientBrush>
19+
<System:Double x:Key="ImageOpacityLight">0.9</System:Double>
20+
21+
<SolidColorBrush x:Key="BackgroundGradientDark" Color="#020B20"/>
22+
<System:Double x:Key="ImageOpacityDark">0.8</System:Double>
23+
24+
<SolidColorBrush x:Key="BackgroundGradientHighContrast" Color="Black"/>
25+
<System:Double x:Key="ImageOpacityHighContrast">0.8</System:Double>
26+
27+
<StaticResourceExtension x:Key="BackgroundGradient" ResourceKey="BackgroundGradientLight"/>
28+
<StaticResourceExtension x:Key="ImageOpacity" ResourceKey="ImageOpacityLight"/>
29+
</UserControl.Resources>
30+
31+
<Grid Margin="0,-100,0,0">
32+
<Grid x:Name="ImageGrid"
33+
Background="{DynamicResource BackgroundGradient}"
34+
Opacity="1"
35+
SizeChanged="ImageGrid_SizeChanged">
36+
37+
<Grid.OpacityMask>
38+
<LinearGradientBrush x:Name="GradientMask"
39+
MappingMode="Absolute"
40+
StartPoint="0,0"
41+
EndPoint="0,0">
42+
</LinearGradientBrush>
43+
</Grid.OpacityMask>
44+
45+
<Image x:Name="HeroImage"
46+
ui:ClipHelper.CornerRadius="{DynamicResource ControlCornerRadius}"
47+
Source="/Assets/MainPage_Banner.png"
48+
Stretch="UniformToFill"
49+
Opacity="{StaticResource ImageOpacity}"
50+
RenderTransformOrigin="0.5,0.5">
51+
<Image.RenderTransform>
52+
<ScaleTransform ScaleX="1" ScaleY="1"/>
53+
</Image.RenderTransform>
54+
</Image>
55+
56+
<Image x:Name="HeroOverlayImage"
57+
ui:ClipHelper.CornerRadius="{DynamicResource ControlCornerRadius}"
58+
Source="/Assets/MainPage_Banner.png"
59+
Stretch="UniformToFill"
60+
Opacity="{StaticResource ImageOpacity}"
61+
RenderTransformOrigin="0.5,0.5">
62+
<Image.RenderTransform>
63+
<ScaleTransform ScaleX="1" ScaleY="1"/>
64+
</Image.RenderTransform>
65+
</Image>
66+
</Grid>
67+
68+
<Rectangle x:Name="ImageGridSurfaceRec" Fill="Transparent"/>
69+
</Grid>
70+
</UserControl>

‎source/iNKORE.UI.WPF.Modern.Gallery/Controls/HomePageHeaderImage.xaml.cs‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
using System;
2+
using System.Windows;
3+
using System.Windows.Media;
4+
using System.Windows.Media.Animation;
5+
using System.Windows.Controls;
6+
using Microsoft.UI;
7+
using iNKORE.UI.WPF.Modern;
8+
9+
namespace iNKORE.UI.WPF.Modern.Gallery.Controls
10+
{
11+
public partial class HomePageHeaderImage : UserControl
12+
{
13+
const double GradientHeight = 180;
14+
const double AnimationDuration = 300;
15+
16+
public HomePageHeaderImage()
17+
{
18+
InitializeComponent();
19+
ApplyTheme(ElementTheme.Light);
20+
}
21+
22+
private void OnLoaded(object sender, RoutedEventArgs e)
23+
{
24+
}
25+
26+
private void OnUnloaded(object sender, RoutedEventArgs e)
27+
{
28+
}
29+
30+
private void ApplyTheme(ElementTheme theme)
31+
{
32+
string bgKey, opacityKey;
33+
switch (theme)
34+
{
35+
case ElementTheme.Dark:
36+
bgKey = "BackgroundGradientDark";
37+
opacityKey = "ImageOpacityDark";
38+
break;
39+
default:
40+
bgKey = "BackgroundGradientLight";
41+
opacityKey = "ImageOpacityLight";
42+
break;
43+
}
44+
Resources["BackgroundGradient"] = Resources[bgKey];
45+
Resources["ImageOpacity"] = Resources[opacityKey];
46+
}
47+
48+
private void ImageGrid_SizeChanged(object sender, SizeChangedEventArgs e)
49+
{
50+
var h = ImageGrid.ActualHeight;
51+
GradientMask.StartPoint = new Point(0, h - GradientHeight);
52+
GradientMask.EndPoint = new Point(0, h);
53+
54+
GradientMask.GradientStops.Clear();
55+
56+
for (double t = 0; t <= 1.0; t += 0.05)
57+
{
58+
double eased = new SineEase { EasingMode = EasingMode.EaseInOut }.Ease(1 - t);
59+
byte alpha = (byte)(255 * eased);
60+
GradientMask.GradientStops.Add(new GradientStop(Color.FromArgb(alpha, 0, 0, 0), t));
61+
}
62+
GradientMask.GradientStops.Add(new GradientStop(Colors.Transparent, 1.0));
63+
}
64+
}
65+
}

0 commit comments

Comments
 (0)