Skip to content

Commit 05456df

Browse files
ArlodotexeArlodotexe
authored
Merge pull request CommunityToolkit#491 from h82258652/opacitymaskview-experiment
[Experiment] OpacityMaskView
2 parents 80cf3d0 + 90fe13c commit 05456df

16 files changed

+386
-0
lines changed

‎components/OpacityMaskView/OpenSolution.bat

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@ECHO OFF
2+
3+
powershell ..\..\tooling\ProjectHeads\GenerateSingleSampleHeads.ps1 -componentPath %CD% %*

‎components/OpacityMaskView/samples/Assets/Owl3.jpg

60.2 KB
Loading

‎components/OpacityMaskView/samples/Assets/icon.png

2.16 KB
Loading

‎components/OpacityMaskView/samples/Dependencies.props

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!--
2+
WinUI 2 under UWP uses TargetFramework uap10.0.*
3+
WinUI 3 under WinAppSdk uses TargetFramework net6.0-windows10.*
4+
However, under Uno-powered platforms, both WinUI 2 and 3 can share the same TargetFramework.
5+
6+
MSBuild doesn't play nicely with this out of the box, so we've made it easy for you.
7+
8+
For .NET Standard packages, you can use the Nuget Package Manager in Visual Studio.
9+
For UWP / WinAppSDK / Uno packages, place the package references here.
10+
-->
11+
<Project>
12+
<!-- WinUI 2 / UWP -->
13+
<ItemGroup Condition="'$(IsUwp)' == 'true'">
14+
<!-- <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.2"/> -->
15+
</ItemGroup>
16+
17+
<!-- WinUI 2 / Uno -->
18+
<ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '2'">
19+
<!-- <PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.11"/> -->
20+
</ItemGroup>
21+
22+
<!-- WinUI 3 / WinAppSdk -->
23+
<ItemGroup Condition="'$(IsWinAppSdk)' == 'true'">
24+
<!-- <PackageReference Include="CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.2"/> -->
25+
</ItemGroup>
26+
27+
<!-- WinUI 3 / Uno -->
28+
<ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '3'">
29+
<!-- <PackageReference Include="Uno.CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.100-dev.15.g12261e2626"/> -->
30+
</ItemGroup>
31+
</Project>

‎components/OpacityMaskView/samples/OpacityMaskView.Samples.csproj

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<Project>
2+
<Import Project="$([MSBuild]::GetPathOfFileAbove(Directory.Build.props))" Condition="Exists('$([MSBuild]::GetPathOfFileAbove(Directory.Build.props))')" />
3+
4+
<PropertyGroup>
5+
<ToolkitComponentName>OpacityMaskView</ToolkitComponentName>
6+
</PropertyGroup>
7+
8+
<!-- Sets this up as a toolkit component's sample project -->
9+
<Import Project="$(ToolingDirectory)\ToolkitComponent.SampleProject.props" />
10+
<ItemGroup>
11+
<None Remove="Assets\Owl3.jpg" />
12+
</ItemGroup>
13+
<ItemGroup>
14+
<Content Include="Assets\Owl3.jpg">
15+
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
16+
</Content>
17+
</ItemGroup>
18+
</Project>

‎components/OpacityMaskView/samples/OpacityMaskView.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
title: OpacityMaskView
3+
author: h82258652
4+
description: A control that applies an opacity mask to its content.
5+
keywords: OpacityMaskView, Control, Layout
6+
dev_langs:
7+
- csharp
8+
category: Controls
9+
subcategory: Layout
10+
discussion-id: 490
11+
issue-id: 0
12+
icon: assets/icon.png
13+
---
14+
15+
The `OpacityMaskView` control applies an opacity mask to its content. The mask is defined by the `OpacityMask` property, which can contain a `Brush` object. The `OpacityMask` property is typically set to a `LinearGradientBrush` or `ImageBrush` object.
16+
17+
> [!Sample OpacityMaskViewSample]

‎components/OpacityMaskView/samples/OpacityMaskViewSample.xaml

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
2+
<Page x:Class="OpacityMaskViewExperiment.Samples.OpacityMaskViewSample"
3+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5+
xmlns:controls="using:CommunityToolkit.WinUI.Controls"
6+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
7+
xmlns:local="using:OpacityMaskViewExperiment.Samples"
8+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
9+
xmlns:media="using:Microsoft.UI.Xaml.Media"
10+
mc:Ignorable="d">
11+
12+
<StackPanel Spacing="12">
13+
<controls:OpacityMaskView>
14+
<controls:OpacityMaskView.OpacityMask>
15+
<Rectangle>
16+
<Rectangle.Fill>
17+
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
18+
<GradientStop Offset="0" Color="White" />
19+
<GradientStop Offset="1" Color="Transparent" />
20+
</LinearGradientBrush>
21+
</Rectangle.Fill>
22+
</Rectangle>
23+
</controls:OpacityMaskView.OpacityMask>
24+
<Button Content="Hello Windows Community Toolkit" />
25+
</controls:OpacityMaskView>
26+
<controls:OpacityMaskView>
27+
<controls:OpacityMaskView.OpacityMask>
28+
<Rectangle>
29+
<Rectangle.Fill>
30+
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
31+
<GradientStop Offset="0" Color="White" />
32+
<GradientStop Offset="0.6" Color="Transparent" />
33+
</LinearGradientBrush>
34+
</Rectangle.Fill>
35+
</Rectangle>
36+
</controls:OpacityMaskView.OpacityMask>
37+
<Border Width="96"
38+
Height="96"
39+
BorderBrush="Red"
40+
BorderThickness="1"
41+
CornerRadius="12">
42+
<Image Source="ms-appx:///Assets/Owl3.jpg" />
43+
</Border>
44+
</controls:OpacityMaskView>
45+
<controls:OpacityMaskView>
46+
<controls:OpacityMaskView.OpacityMask>
47+
<Rectangle>
48+
<Rectangle.Fill>
49+
<media:RadialGradientBrush>
50+
<GradientStop Offset="0.2" Color="Transparent" />
51+
<GradientStop Offset="0.8" Color="White" />
52+
<GradientStop Offset="0.8" Color="Transparent" />
53+
<GradientStop Offset="0.9" Color="Transparent" />
54+
<GradientStop Offset="0.9" Color="White" />
55+
</media:RadialGradientBrush>
56+
</Rectangle.Fill>
57+
</Rectangle>
58+
</controls:OpacityMaskView.OpacityMask>
59+
<Border Width="96"
60+
Height="96"
61+
BorderBrush="Green"
62+
BorderThickness="1"
63+
CornerRadius="12">
64+
<Image Source="ms-appx:///Assets/Owl3.jpg" />
65+
</Border>
66+
</controls:OpacityMaskView>
67+
</StackPanel>
68+
</Page>

‎components/OpacityMaskView/samples/OpacityMaskViewSample.xaml.cs

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
using CommunityToolkit.WinUI.Controls;
6+
7+
namespace OpacityMaskViewExperiment.Samples;
8+
9+
/// <summary>
10+
/// An example sample page of a custom control inheriting from Panel.
11+
/// </summary>
12+
[ToolkitSample(id: nameof(OpacityMaskViewSample), "OpacityMaskView sample", description: $"A sample for showing how to create and use a {nameof(OpacityMaskView)} control.")]
13+
public sealed partial class OpacityMaskViewSample : Page
14+
{
15+
public OpacityMaskViewSample()
16+
{
17+
this.InitializeComponent();
18+
}
19+
}

‎components/OpacityMaskView/src/CommunityToolkit.WinUI.Controls.OpacityMaskView.csproj

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<Project>
2+
<Import Project="$([MSBuild]::GetPathOfFileAbove(Directory.Build.props))" Condition="Exists('$([MSBuild]::GetPathOfFileAbove(Directory.Build.props))')" />
3+
4+
<PropertyGroup>
5+
<ToolkitComponentName>OpacityMaskView</ToolkitComponentName>
6+
<Description>This package contains OpacityMaskView.</Description>
7+
8+
<!-- Rns suffix is required for namespaces shared across projects. See https://github.com/CommunityToolkit/Labs-Windows/issues/152 -->
9+
<RootNamespace>CommunityToolkit.WinUI.Controls.OpacityMaskViewRns</RootNamespace>
10+
</PropertyGroup>
11+
12+
<!-- Sets this up as a toolkit component's source project -->
13+
<Import Project="$(ToolingDirectory)\ToolkitComponent.SourceProject.props" />
14+
</Project>

‎components/OpacityMaskView/src/Dependencies.props

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!--
2+
WinUI 2 under UWP uses TargetFramework uap10.0.*
3+
WinUI 3 under WinAppSdk uses TargetFramework net6.0-windows10.*
4+
However, under Uno-powered platforms, both WinUI 2 and 3 can share the same TargetFramework.
5+
6+
MSBuild doesn't play nicely with this out of the box, so we've made it easy for you.
7+
8+
For .NET Standard packages, you can use the Nuget Package Manager in Visual Studio.
9+
For UWP / WinAppSDK / Uno packages, place the package references here.
10+
-->
11+
<Project>
12+
<!-- WinUI 2 / UWP -->
13+
<ItemGroup Condition="'$(IsUwp)' == 'true'">
14+
<!-- <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.2"/> -->
15+
</ItemGroup>
16+
17+
<!-- WinUI 2 / Uno -->
18+
<ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '2'">
19+
<!-- <PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.11"/> -->
20+
</ItemGroup>
21+
22+
<!-- WinUI 3 / WinAppSdk -->
23+
<ItemGroup Condition="'$(IsWinAppSdk)' == 'true'">
24+
<!-- <PackageReference Include="CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.2"/> -->
25+
</ItemGroup>
26+
27+
<!-- WinUI 3 / Uno -->
28+
<ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '3'">
29+
<!-- <PackageReference Include="Uno.CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.100-dev.15.g12261e2626"/> -->
30+
</ItemGroup>
31+
</Project>

0 commit comments

Comments
 (0)