Skip to content

Commit

Permalink
improve title bar game icon
Browse files Browse the repository at this point in the history
  • Loading branch information
Scighost committed Jan 2, 2024
1 parent e745ab0 commit 8e4c7b9
Show file tree
Hide file tree
Showing 8 changed files with 215 additions and 409 deletions.
25 changes: 12 additions & 13 deletions src/Starward/Controls/TitleBarGameIcon/TitleBarGameIconBH3.xaml
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
<UserControl x:Class="Starward.Controls.TitleBarGameIcon.TitleBarGameIconBH3"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:Starward.Controls"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:sc="using:Starward.Core"
x:DefaultBindMode="OneWay"
mc:Ignorable="d">
<local:TitleBarGameIconBase x:Class="Starward.Controls.TitleBarGameIcon.TitleBarGameIconBH3"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:Starward.Controls.TitleBarGameIcon"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:sc="using:Starward.Core"
x:DefaultBindMode="OneWay"
mc:Ignorable="d">

<Button Padding="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
BorderThickness="0"
Command="{x:Bind ClickCommand}"
CommandParameter="{x:Bind GameBiz}"
Click="Button_Click"
CornerRadius="8"
DoubleTapped="Button_DoubleTapped"
PointerEntered="Button_PointerEntered"
Expand All @@ -22,7 +21,7 @@
Style="{ThemeResource DateTimePickerFlyoutButtonStyle}">
<Grid>
<Image Source="ms-appx:///Assets/Image/icon_bh3.jpg" />
<Border Name="Border_Mask" Background="#60000000">
<Border Background="#60000000" Opacity="{x:Bind BorderMaskOpacity}">
<Border.OpacityTransition>
<ScalarTransition />
</Border.OpacityTransition>
Expand Down Expand Up @@ -52,4 +51,4 @@
</Button.ContextFlyout>
</Button>

</UserControl>
</local:TitleBarGameIconBase>
123 changes: 2 additions & 121 deletions src/Starward/Controls/TitleBarGameIcon/TitleBarGameIconBH3.xaml.cs
Original file line number Diff line number Diff line change
@@ -1,139 +1,20 @@
using CommunityToolkit.Mvvm.Input;
using Microsoft.UI.Composition;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Hosting;
using Microsoft.UI.Xaml.Input;
using Starward.Core;
using System;
using System.Numerics;
using System.Windows.Input;

// To learn more about WinUI, the WinUI project structure,
// and more about our project templates, see: http://aka.ms/winui-project-info.

namespace Starward.Controls.TitleBarGameIcon;

public sealed partial class TitleBarGameIconBH3 : UserControl
public sealed partial class TitleBarGameIconBH3 : TitleBarGameIconBase
{


private readonly Compositor compositor;

public GameBiz GameBiz { get; set; } = GameBiz.Honkai3rd;
public override GameBiz GameBiz { get; protected init; } = GameBiz.Honkai3rd;


public TitleBarGameIconBH3()
{
this.InitializeComponent();
compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
this.Loaded += (_, _) => UpdateCornerRadius(false);
}



public ICommand Command
{
get { return (ICommand)GetValue(CommandProperty); }
set { SetValue(CommandProperty, value); }
}

public static readonly DependencyProperty CommandProperty =
DependencyProperty.Register("Command", typeof(ICommand), typeof(TitleBarGameIconBH3), new PropertyMetadata(default));


public void Select(GameBiz biz)
{
IsSelected = biz.ToGame() == GameBiz;
}


private bool isSelected;
public bool IsSelected
{
get => isSelected;
set
{
isSelected = value;
UpdateCornerRadius(value);
Border_Mask.Opacity = value ? 0 : 1;
}
}



private bool isTapped;




[RelayCommand]
private void Click(GameBiz biz)
{
IsSelected = true;
Command?.Execute(biz);
}


private void Button_DoubleTapped(object sender, DoubleTappedRoutedEventArgs e)
{
Click(GameBiz);
}

private void Button_PointerEntered(object sender, PointerRoutedEventArgs e)
{
UpdateCornerRadius(true);
}

private void Button_PointerExited(object sender, PointerRoutedEventArgs e)
{
if (!isTapped)
{
UpdateCornerRadius(isSelected);
}
}

private void Button_RightTapped(object sender, RightTappedRoutedEventArgs e)
{
isTapped = true;
}

private void MenuFlyout_Closed(object sender, object e)
{
isTapped = false;
UpdateCornerRadius(isSelected);
}



private void UpdateCornerRadius(bool isSelect)
{
var visual = ElementCompositionPreview.GetElementVisual(this);
CompositionRoundedRectangleGeometry geometry;
if (visual.Clip is CompositionGeometricClip clip && clip.Geometry is CompositionRoundedRectangleGeometry geo)
{
geometry = geo;
geometry.Size = new Vector2((float)ActualWidth, (float)ActualHeight);
}
else
{
geometry = compositor.CreateRoundedRectangleGeometry();
geometry.Size = new Vector2((float)ActualWidth, (float)ActualHeight);
geometry.CornerRadius = Vector2.Zero;
clip = compositor.CreateGeometricClip(geometry);
visual.Clip = clip;
}
var animation = compositor.CreateVector2KeyFrameAnimation();
animation.Duration = TimeSpan.FromSeconds(0.3);
if (isSelect)
{
animation.InsertKeyFrame(1, new Vector2(8, 8));
}
else
{
animation.InsertKeyFrame(1, new Vector2((float)ActualWidth / 2, (float)ActualHeight / 2));
}
geometry.StartAnimation(nameof(CompositionRoundedRectangleGeometry.CornerRadius), animation);
}


Expand Down
154 changes: 154 additions & 0 deletions src/Starward/Controls/TitleBarGameIcon/TitleBarGameIconBase.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using Microsoft.UI.Composition;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Hosting;
using Microsoft.UI.Xaml.Input;
using Starward.Core;
using System;
using System.Numerics;
using System.Windows.Input;

namespace Starward.Controls.TitleBarGameIcon;

[INotifyPropertyChanged]
public abstract partial class TitleBarGameIconBase : UserControl
{



protected readonly Compositor compositor;


public abstract GameBiz GameBiz { get; protected init; }


public TitleBarGameIconBase()
{
compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
this.Loaded += (_, _) => UpdateCornerRadius(false);
}



public ICommand Command
{
get { return (ICommand)GetValue(CommandProperty); }
set { SetValue(CommandProperty, value); }
}

public static readonly DependencyProperty CommandProperty =
DependencyProperty.Register("Command", typeof(ICommand), typeof(TitleBarGameIconBase), new PropertyMetadata(default));


public void Select(GameBiz biz)
{
IsSelected = biz.ToGame() == GameBiz;
}


protected bool isSelected;
public bool IsSelected
{
get => isSelected;
set
{
isSelected = value;
UpdateCornerRadius(value);
BorderMaskOpacity = value ? 0 : 1;
}
}


[ObservableProperty]
protected double borderMaskOpacity = 1;


protected bool isTapped;




[RelayCommand]
protected void Click(GameBiz biz)
{
IsSelected = true;
Command?.Execute(biz);
}


protected void Button_Click(object sender, RoutedEventArgs e)
{
if (!IsSelected)
{
Click(GameBiz);
}
}


protected void Button_DoubleTapped(object sender, DoubleTappedRoutedEventArgs e)
{
Click(GameBiz);
}

protected void Button_PointerEntered(object sender, PointerRoutedEventArgs e)
{
UpdateCornerRadius(true);
}

protected void Button_PointerExited(object sender, PointerRoutedEventArgs e)
{
if (!isTapped)
{
UpdateCornerRadius(isSelected);
}
}

protected void Button_RightTapped(object sender, RightTappedRoutedEventArgs e)
{
isTapped = true;
}

protected void MenuFlyout_Closed(object sender, object e)
{
isTapped = false;
UpdateCornerRadius(isSelected);
}



protected void UpdateCornerRadius(bool isSelect)
{
var visual = ElementCompositionPreview.GetElementVisual(this);
CompositionRoundedRectangleGeometry geometry;
if (visual.Clip is CompositionGeometricClip clip && clip.Geometry is CompositionRoundedRectangleGeometry geo)
{
geometry = geo;
geometry.Size = new Vector2((float)ActualWidth, (float)ActualHeight);
}
else
{
geometry = compositor.CreateRoundedRectangleGeometry();
geometry.Size = new Vector2((float)ActualWidth, (float)ActualHeight);
geometry.CornerRadius = Vector2.Zero;
clip = compositor.CreateGeometricClip(geometry);
visual.Clip = clip;
}
var animation = compositor.CreateVector2KeyFrameAnimation();
animation.Duration = TimeSpan.FromSeconds(0.3);
if (isSelect)
{
animation.InsertKeyFrame(1, new Vector2(8, 8));
}
else
{
animation.InsertKeyFrame(1, new Vector2((float)ActualWidth / 2, (float)ActualHeight / 2));
}
geometry.StartAnimation(nameof(CompositionRoundedRectangleGeometry.CornerRadius), animation);
}




}
25 changes: 12 additions & 13 deletions src/Starward/Controls/TitleBarGameIcon/TitleBarGameIconSR.xaml
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
<UserControl x:Class="Starward.Controls.TitleBarGameIcon.TitleBarGameIconSR"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:Starward.Controls"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:sc="using:Starward.Core"
x:DefaultBindMode="OneWay"
mc:Ignorable="d">
<local:TitleBarGameIconBase x:Class="Starward.Controls.TitleBarGameIcon.TitleBarGameIconSR"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:Starward.Controls.TitleBarGameIcon"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:sc="using:Starward.Core"
x:DefaultBindMode="OneWay"
mc:Ignorable="d">

<Button Padding="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
BorderThickness="0"
Command="{x:Bind ClickCommand}"
CommandParameter="{x:Bind GameBiz}"
Click="Button_Click"
CornerRadius="8"
DoubleTapped="Button_DoubleTapped"
PointerEntered="Button_PointerEntered"
Expand All @@ -22,7 +21,7 @@
Style="{ThemeResource DateTimePickerFlyoutButtonStyle}">
<Grid>
<Image Source="ms-appx:///Assets/Image/icon_sr.jpg" />
<Border Name="Border_Mask" Background="#60000000">
<Border Background="#60000000" Opacity="{x:Bind BorderMaskOpacity}">
<Border.OpacityTransition>
<ScalarTransition />
</Border.OpacityTransition>
Expand All @@ -40,4 +39,4 @@
</Button.ContextFlyout>
</Button>

</UserControl>
</local:TitleBarGameIconBase>
Loading

0 comments on commit 8e4c7b9

Please sign in to comment.