Skip to content

Commit

Permalink
Revert to the old Sponsor button design for more natural looking.
Browse files Browse the repository at this point in the history
  • Loading branch information
@MouriNaruto
MouriNaruto committed Aug 14, 2024
1 parent 6a40d63 commit 3204bd8
Show file tree
Hide file tree
Showing 2 changed files with 0 additions and 184 deletions.
154 changes: 0 additions & 154 deletions NanaZip.UI.Modern/MainWindowToolBarPage.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,163 +158,9 @@ namespace winrt::NanaZip::Modern::implementation
UNREFERENCED_PARAMETER(sender);
UNREFERENCED_PARAMETER(e);

// Create the necessary shadows.
this->CreateSponsorButtonShadow();

this->RefreshSponsorButtonContent();
}

const float MaxBlurRadius = 72;
const float BlurRadius = 24;

void MainWindowToolBarPage::CreateSponsorButtonShadow()
{
const float CornerRadius = 5;

auto Compositor = Window::Current().Compositor();

// If the resource for OpacityMaskShapeVisualSurfaceBrushResourceKey exists it means this.InnerContentClipMode == CompositionVisualSurface,
// which means we need to take some steps to set up an opacity mask.

// Create a CompositionVisualSurface, and use the SpriteVisual containing the shadow as the source.
this->m_sponsorButtonShadowVisualSurface = Compositor.CreateVisualSurface();
this->m_sponsorButtonShadowVisualSurface.SourceVisual(this->m_sponsorButtonShadowSpriteVisual = Compositor.CreateSpriteVisual());

this->m_sponsorButtonShadowSpriteVisual.Clip(this->GetShadowClip(Compositor, CornerRadius));
this->m_sponsorButtonShadowSpriteVisual.RelativeSizeAdjustment(float2::zero());
this->m_sponsorButtonShadowSpriteVisual.Size(this->SponsorButton().ActualSize());

Windows::UI::Composition::DropShadow dropShadow = nullptr;
this->m_sponsorButtonShadowSpriteVisual.Shadow(dropShadow = Compositor.CreateDropShadow());
dropShadow.Mask(this->GetShadowMask(Compositor, CornerRadius));
dropShadow.BlurRadius(14);
dropShadow.Opacity(0.3f);
dropShadow.Color(Windows::UI::Colors::Black());

// Adjust the offset and size of the CompositionVisualSurface to accommodate the thick outline of the shape created in UpdateVisualOpacityMask().
this->m_sponsorButtonShadowVisualSurface.SourceOffset(float2(-72));
this->m_sponsorButtonShadowVisualSurface.SourceSize(this->SponsorButton().ActualSize() + float2(MaxBlurRadius * 2));

// Create a CompositionSurfaceBrush from the CompositionVisualSurface. This allows us to render the shadow in a brush.
Windows::UI::Composition::CompositionSurfaceBrush shadowSurfaceBrush = Compositor.CreateSurfaceBrush();
shadowSurfaceBrush.Surface(this->m_sponsorButtonShadowVisualSurface);
shadowSurfaceBrush.Stretch(Windows::UI::Composition::CompositionStretch::None);

// Create a CompositionMaskBrush, using the CompositionSurfaceBrush of the shadow as the source,
// and the CompositionSurfaceBrush created in UpdateVisualOpacityMask() as the mask.
// This creates a brush that renders the shadow with its inner portion clipped out.
Windows::UI::Composition::CompositionMaskBrush maskBrush = Compositor.CreateMaskBrush();
maskBrush.Source(shadowSurfaceBrush);
maskBrush.Mask(this->CreateVisualOpacityMask(Compositor, CornerRadius));

// Create a SpriteVisual and set its brush to the CompositionMaskBrush created in the previous step,
// then set it as the child of the element in the context.
SpriteVisual visual = Compositor.CreateSpriteVisual();
visual.RelativeSizeAdjustment(float2::one());
visual.Offset(Windows::Foundation::Numerics::float3(-72, -72, 0));
visual.Size(float2(MaxBlurRadius * 2));
visual.Brush(maskBrush);

Windows::UI::Xaml::Hosting::ElementCompositionPreview::SetElementChildVisual(this->SponsorButton(), visual);

this->SponsorButton().SizeChanged([this, CornerRadius](const auto&, const SizeChangedEventArgs& e) {
float2 Size = e.NewSize();
this->m_sponsorButtonVisualMaskGeometry.Size(Size + float2(MaxBlurRadius));
auto sharedSize = Size + float2(MaxBlurRadius * 2);
this->m_sponsorButtonVisualMaskShapeVisual.Size(sharedSize);
this->m_sponsorButtonVisualMaskVisualSurface.SourceSize(sharedSize);
this->m_sponsorButtonShadowMaskGeometry.Size(Size);
this->m_sponsorButtonShadowMaskVisualSurface.SourceSize(Size);
this->m_sponsorButtonShadowMaskShapeVisual.Size(Size);
this->m_sponsorButtonShadowSpriteVisual.Size(Size);
this->m_sponsorButtonShadowVisualSurface.SourceSize(Size + float2(MaxBlurRadius * 2));
this->m_sponsorButtonShadowClipGeometry.Size(
float2(
Size.x + CornerRadius * 2,
Size.y + CornerRadius * 2
)
);
});
}

CompositionBrush MainWindowToolBarPage::CreateVisualOpacityMask(Compositor Compositor, float CornerRadius)
{
this->m_sponsorButtonVisualMaskShapeVisual = Compositor.CreateShapeVisual();

this->m_sponsorButtonVisualMaskGeometry = Compositor.CreateRoundedRectangleGeometry();
Windows::UI::Composition::CompositionSpriteShape shape = Compositor.CreateSpriteShape(this->m_sponsorButtonVisualMaskGeometry);

// Set the attributes of the geometry, and add the CompositionSpriteShape to the ShapeVisual.
// The geometry will have a thick outline and no fill, meaning that when used as a mask,
// the shadow will only be rendered on the outer area covered by the outline, clipping out its inner portion.
this->m_sponsorButtonVisualMaskGeometry.Offset(float2(MaxBlurRadius / 2));
this->m_sponsorButtonVisualMaskGeometry.CornerRadius(float2(MaxBlurRadius / 2 + CornerRadius));
shape.StrokeThickness(72);
shape.StrokeBrush(Compositor.CreateColorBrush(Windows::UI::Colors::Black()));

this->m_sponsorButtonVisualMaskShapeVisual.Shapes().Append(shape);

// Create CompositionVisualSurface using the ShapeVisual as the source visual.
this->m_sponsorButtonVisualMaskVisualSurface = Compositor.CreateVisualSurface();
this->m_sponsorButtonVisualMaskVisualSurface.SourceVisual(this->m_sponsorButtonVisualMaskShapeVisual);

this->m_sponsorButtonVisualMaskGeometry.Size(SponsorButton().ActualSize() + float2(MaxBlurRadius));
auto sharedSize = SponsorButton().ActualSize() + float2(MaxBlurRadius * 2);
this->m_sponsorButtonVisualMaskShapeVisual.Size(sharedSize);
this->m_sponsorButtonVisualMaskVisualSurface.SourceSize(sharedSize);

// Create a CompositionSurfaceBrush using the CompositionVisualSurface as the source, this essentially converts the ShapeVisual into a brush.
// This brush can then be used as a mask.
Windows::UI::Composition::CompositionSurfaceBrush opacityMask = Compositor.CreateSurfaceBrush();
opacityMask.Surface(this->m_sponsorButtonVisualMaskVisualSurface);
return opacityMask;
}

CompositionBrush MainWindowToolBarPage::GetShadowMask(Compositor Compositor, float CornerRadius)
{
// Create rounded rectangle geometry and add it to a shape
this->m_sponsorButtonShadowMaskGeometry = Compositor.CreateRoundedRectangleGeometry();
this->m_sponsorButtonShadowMaskGeometry.CornerRadius(float2(CornerRadius));
auto shape = Compositor.CreateSpriteShape(m_sponsorButtonShadowMaskGeometry);
shape.FillBrush(Compositor.CreateColorBrush(Windows::UI::Colors::Black()));
// Create a ShapeVisual so that our geometry can be rendered to a visual
this->m_sponsorButtonShadowMaskShapeVisual = Compositor.CreateShapeVisual();
this->m_sponsorButtonShadowMaskShapeVisual.Shapes().Append(shape);
// Create a CompositionVisualSurface, which renders our ShapeVisual to a texture
this->m_sponsorButtonShadowMaskVisualSurface = Compositor.CreateVisualSurface();
this->m_sponsorButtonShadowMaskVisualSurface.SourceVisual(this->m_sponsorButtonShadowMaskShapeVisual);

// Create a CompositionSurfaceBrush to render our CompositionVisualSurface to a brush.
// Now we have a rounded rectangle brush that can be used on as the mask for our shadow.
auto surfaceBrush = Compositor.CreateSurfaceBrush(this->m_sponsorButtonShadowMaskVisualSurface);
this->m_sponsorButtonShadowMaskGeometry.Size(SponsorButton().RenderSize());
this->m_sponsorButtonShadowMaskVisualSurface.SourceSize(SponsorButton().RenderSize());
this->m_sponsorButtonShadowMaskShapeVisual.Size(SponsorButton().RenderSize());
return surfaceBrush;
}

CompositionClip MainWindowToolBarPage::GetShadowClip(Compositor Compositor, float CornerRadius)
{
// The way this shadow works without the need to project on another element is because
// we're clipping the inner part of the shadow which would be cast on the element
// itself away. This method is creating an outline so that we are only showing the
// parts of the shadow that are outside the element's context.
// Note: This does cause an issue if the element does clip itself to its bounds, as then
// the shadowed area is clipped as well.
this->m_sponsorButtonShadowClipGeometry = Compositor.CreateRoundedRectangleGeometry();

this->m_sponsorButtonShadowClipGeometry.Offset(float2(-CornerRadius));
this->m_sponsorButtonShadowClipGeometry.Size(
float2(
SponsorButton().ActualSize().x + CornerRadius * 2,
SponsorButton().ActualSize().y + CornerRadius * 2
)
);
this->m_sponsorButtonShadowClipGeometry.CornerRadius(float2(CornerRadius));

return Compositor.CreateGeometricClip(this->m_sponsorButtonShadowClipGeometry);
}

void MainWindowToolBarPage::AddButtonClick(
winrt::IInspectable const& sender,
winrt::RoutedEventArgs const& e)
Expand Down
30 changes: 0 additions & 30 deletions NanaZip.UI.Modern/MainWindowToolBarPage.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,13 @@

#include <winrt/Windows.System.h>
#include <winrt/Windows.Services.Store.h>
#include <winrt/Windows.UI.Composition.h>
#include <winrt/Windows.UI.Xaml.Hosting.h>
#include <winrt/Windows.Foundation.Numerics.h>

namespace winrt
{
using Windows::Foundation::IInspectable;
using Windows::Services::Store::StoreContext;
using Windows::System::DispatcherQueue;
using Windows::UI::Xaml::RoutedEventArgs;
using Windows::UI::Composition::Compositor;
using Windows::UI::Composition::CompositionClip;
using Windows::UI::Composition::CompositionRoundedRectangleGeometry;
using Windows::UI::Composition::SpriteVisual;
using Windows::UI::Composition::ShapeVisual;
using Windows::UI::Composition::CompositionVisualSurface;
using Windows::UI::Composition::CompositionBrush;
using Windows::UI::Composition::Compositor;
using Windows::Foundation::Numerics::float2;
}
namespace winrt::NanaZip::Modern::implementation
{
Expand Down Expand Up @@ -95,27 +83,9 @@ namespace winrt::NanaZip::Modern::implementation
winrt::DispatcherQueue m_DispatcherQueue = nullptr;
winrt::StoreContext m_StoreContext = nullptr;

winrt::CompositionRoundedRectangleGeometry m_sponsorButtonShadowClipGeometry = nullptr;
winrt::CompositionRoundedRectangleGeometry m_sponsorButtonShadowMaskGeometry = nullptr;
winrt::CompositionRoundedRectangleGeometry m_sponsorButtonVisualMaskGeometry = nullptr;
winrt::ShapeVisual m_sponsorButtonVisualMaskShapeVisual = nullptr;
winrt::ShapeVisual m_sponsorButtonShadowMaskShapeVisual = nullptr;
winrt::SpriteVisual m_sponsorButtonShadowSpriteVisual = nullptr;
winrt::CompositionVisualSurface m_sponsorButtonVisualMaskVisualSurface = nullptr;
winrt::CompositionVisualSurface m_sponsorButtonShadowMaskVisualSurface = nullptr;
winrt::CompositionVisualSurface m_sponsorButtonShadowVisualSurface = nullptr;

bool CheckSponsorEditionLicense();

void RefreshSponsorButtonContent();

void CreateSponsorButtonShadow();

winrt::CompositionClip GetShadowClip(winrt::Compositor compositor, float CornerRadius);

winrt::CompositionBrush CreateVisualOpacityMask(winrt::Compositor compositor, float CornerRadius);

winrt::CompositionBrush GetShadowMask(winrt::Compositor compositor, float CornerRadius);
};
}

Expand Down

0 comments on commit 3204bd8

Please sign in to comment.