microsoft
/
WindowsCompositionSamples
зеркало из https://github.com/microsoft/WindowsCompositionSamples.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Embender/lineargradients (#320) 

Add Linear Gradient Sample
This commit is contained in:
Emily Bender 2019-04-22 10:48:35 -07:00 коммит произвёл Danielle Neuberger
Родитель 7b5b49b5ad
Коммит 5da7a5a8f8
5 изменённых файлов: 278 добавлений и 0 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

Двоичные данные
SampleGallery/Assets/SampleThumbnails/lineargradients.PNG Normal file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 15 KiB

15
SampleGallery/SampleGallery.csproj
Просмотреть файл

@ -39,6 +39,7 @@
<UseVSHostingProcess>false</UseVSHostingProcess>
<ErrorReport>prompt</ErrorReport>
<Prefer32Bit>true</Prefer32Bit>
<LangVersion>7.3</LangVersion>
</PropertyGroup>
<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Release|x86'">
<OutputPath>bin\x86\Release\</OutputPath>
@ -51,6 +52,7 @@
<ErrorReport>prompt</ErrorReport>
<Prefer32Bit>true</Prefer32Bit>
<UseDotNetNativeToolchain>true</UseDotNetNativeToolchain>
<LangVersion>7.3</LangVersion>
</PropertyGroup>
<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Debug|ARM'">
<DebugSymbols>true</DebugSymbols>
@ -63,6 +65,7 @@
<ErrorReport>prompt</ErrorReport>
<Prefer32Bit>true</Prefer32Bit>
<ExcludeFilesFromDeployment>*.cs</ExcludeFilesFromDeployment>
<LangVersion>7.3</LangVersion>
</PropertyGroup>
<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Release|ARM'">
<OutputPath>bin\ARM\Release\</OutputPath>
@ -75,6 +78,7 @@
<ErrorReport>prompt</ErrorReport>
<Prefer32Bit>true</Prefer32Bit>
<UseDotNetNativeToolchain>true</UseDotNetNativeToolchain>
<LangVersion>7.3</LangVersion>
</PropertyGroup>
<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Debug|x64'">
<DebugSymbols>true</DebugSymbols>
@ -86,6 +90,7 @@
<UseVSHostingProcess>false</UseVSHostingProcess>
<ErrorReport>prompt</ErrorReport>
<Prefer32Bit>true</Prefer32Bit>
<LangVersion>7.3</LangVersion>
</PropertyGroup>
<PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Release|x64'">
<OutputPath>bin\x64\Release\</OutputPath>
@ -98,6 +103,7 @@
<ErrorReport>prompt</ErrorReport>
<Prefer32Bit>true</Prefer32Bit>
<UseDotNetNativeToolchain>true</UseDotNetNativeToolchain>
<LangVersion>7.3</LangVersion>
</PropertyGroup>
<ItemGroup>
<!-- A reference to the entire .Net Framework and Windows SDK are automatically included -->
@ -132,6 +138,7 @@
<DependentUpon>HomePage.xaml</DependentUpon>
</Compile>
<Compile Include="Samples\SDK 14393\NineGridResizing\INineGridScenario.cs" />
<Compile Include="Samples\SDK 16299\LinearGradients\LinearGradients.xaml.cs" />
<Compile Include="Samples\SDK 17134\AnimationController\AnimationControl.cs" />
<Compile Include="Shared\AppTelemetryClient.cs" />
<None Include="SampleGallery_TemporaryKey.pfx" />
@ -349,6 +356,7 @@
<Content Include="Assets\SampleThumbnails\LayerVisualSample.PNG" />
<Content Include="Assets\SampleThumbnails\LightInterop.PNG" />
<Content Include="Assets\SampleThumbnails\LightSpheres.PNG" />
<Content Include="Assets\SampleThumbnails\LinearGradients.PNG" />
<Content Include="Assets\SampleThumbnails\NavigationFlow.PNG" />
<Content Include="Assets\SampleThumbnails\NineGridResizing.PNG" />
<Content Include="Assets\SampleThumbnails\NowPlaying.PNG" />
@ -481,6 +489,10 @@
<Generator>MSBuild:Compile</Generator>
<SubType>Designer</SubType>
</Page>
<Page Include="Samples\SDK 16299\LinearGradients\LinearGradients.xaml">
<Generator>MSBuild:Compile</Generator>
<SubType>Designer</SubType>
</Page>
<Page Include="Samples\SDK 16299\SpringyImage\SpringyImage.xaml" Condition="$(TargetPlatformBuild) &gt;15063">
<Generator>MSBuild:Compile</Generator>
<SubType>Designer</SubType>
@ -744,6 +756,9 @@
<PackageReference Include="Microsoft.Xaml.Behaviors.Uwp.Managed">
<Version>2.0.0</Version>
</PackageReference>
<PackageReference Include="System.ValueTuple">
<Version>4.5.0</Version>
</PackageReference>
<PackageReference Include="Win2D.uwp">
<Version>1.23.0</Version>
</PackageReference>

45
SampleGallery/Samples/SDK 16299/LinearGradients/LinearGradients.xaml Normal file
Просмотреть файл

@ -0,0 +1,45 @@
<local:SamplePage
x:Class="CompositionSampleGallery.LinearGradients"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CompositionSampleGallery"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel x:Name="TextLines" HorizontalAlignment="Center" VerticalAlignment="Center" >
<StackPanel.Resources>
<Style TargetType="Grid">
<Setter Property="HorizontalAlignment" Value="Center"/>
</Style>
<Style TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="FontWeight" Value="ExtraBold"/>
<Setter Property="FontSize" Value="70"/>
</Style>
</StackPanel.Resources>
<Grid PointerEntered="Line_PointerEntered" PointerPressed="Line_PointerPressed">
<Rectangle />
<TextBlock>About</TextBlock>
</Grid>
<Grid PointerEntered="Line_PointerEntered" PointerPressed="Line_PointerPressed">
<Rectangle />
<TextBlock>Work</TextBlock>
</Grid>
<Grid PointerEntered="Line_PointerEntered" PointerPressed="Line_PointerPressed">
<Rectangle />
<TextBlock>Partners</TextBlock>
</Grid>
<Grid PointerEntered="Line_PointerEntered" PointerPressed="Line_PointerPressed">
<Rectangle />
<TextBlock>Awards</TextBlock>
</Grid>
</StackPanel>
</Grid>
</local:SamplePage>

216
SampleGallery/Samples/SDK 16299/LinearGradients/LinearGradients.xaml.cs Normal file
Просмотреть файл

@ -0,0 +1,216 @@
//*********************************************************
//
// Copyright (c) Microsoft. All rights reserved.
// This code is licensed under the MIT License (MIT).
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
// INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH
// THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//
//*********************************************************
using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Input;
using Windows.UI.Composition;
using Windows.UI.Xaml.Hosting;
using Windows.UI;
using System.Numerics;
using Windows.UI.Xaml.Controls;
using System.Linq;
namespace CompositionSampleGallery
{
public sealed partial class LinearGradients : SamplePage
{
public static string StaticSampleName => "Linear Gradients";
public override string SampleName => StaticSampleName;
public static string StaticSampleDescription => "Simple visual effect showing linear gradient animations. Scroll mouse over the textblocks or click on them to see the animations.";
public override string SampleDescription => StaticSampleDescription;
private static readonly (Color, Color) s_coolColors = (Colors.LightSkyBlue, Colors.Teal);
private static readonly (Color, Color) s_warmColors = (Colors.DeepPink, Colors.Honeydew);
private readonly Compositor _compositor = Window.Current.Compositor;
private readonly CompositionColorGradientStop _gradientStop1;
private readonly CompositionColorGradientStop _gradientStop2;
private ColorScheme _currentColorScheme = ColorScheme.Warm;
public LinearGradients()
{
this.InitializeComponent();
// Create the linear gradient brush with the initial color scheme.
var (stop1Color, stop2Color) = GetCurrentColors();
var linearGradientBrush = _compositor.CreateLinearGradientBrush();
_gradientStop1 = _compositor.CreateColorGradientStop();
_gradientStop1.Color = stop1Color;
_gradientStop2 = _compositor.CreateColorGradientStop();
_gradientStop2.Offset = 1;
_gradientStop2.Color = stop2Color;
linearGradientBrush.ColorStops.Add(_gradientStop1);
linearGradientBrush.ColorStops.Add(_gradientStop2);
// Create the Visuals that will be used to paint with the linear gradient brush
// behind each line of text.
foreach (Grid lineElement in TextLines.Children)
{
var visual = _compositor.CreateSpriteVisual();
visual.Brush = linearGradientBrush;
// Initially 0% scale on the X axis, so the Visual will be invisible.
visual.Scale = new Vector3(0, 1, 1);
// The Visual will be sized relative to its parent.
visual.RelativeSizeAdjustment = Vector2.One;
// Save the Visual in the Tag on the element for easy access in the event handlers.
lineElement.Tag = visual;
// Parent the Visual to the first child. The second child
// is the TextBlock that will draw on top of this Visual.
ElementCompositionPreview.SetElementChildVisual(lineElement.Children[0], visual);
}
}
private ColorKeyFrameAnimation CreateAnimationToColor(Color color)
{
var animation = _compositor.CreateColorKeyFrameAnimation();
animation.InsertKeyFrame(1, color);
animation.Duration = TimeSpan.FromSeconds(2);
return animation;
}
private void AnimateToNewColorScheme(ColorScheme colorScheme)
{
// Save the color scheme as the current one.
_currentColorScheme = colorScheme;
// Animate to the colors in the color scheme.
var (stop1Color, stop2Color) = GetCurrentColors();
_gradientStop1.StartAnimation("Color", CreateAnimationToColor(stop1Color));
_gradientStop2.StartAnimation("Color", CreateAnimationToColor(stop2Color));
}
// Animate the given Visual to sweep across the text.
private void AnimateToNewPosition(Visual visual)
{
// Scale the width from 0 to 1 to 0.
var scaleAnimation = _compositor.CreateVector3KeyFrameAnimation();
scaleAnimation.InsertKeyFrame(0, new Vector3(0, 1, 1));
scaleAnimation.InsertKeyFrame(.5f, Vector3.One);
scaleAnimation.InsertKeyFrame(1, new Vector3(0, 1, 1));
scaleAnimation.Duration = TimeSpan.FromSeconds(2);
visual.StartAnimation("Scale", scaleAnimation);
// Sweep the offset along the x axis.
var targetX =
visual.RelativeOffsetAdjustment.X == 0
? 1
: 0;
visual.AnchorPoint = new Vector2(targetX, 0);
var offsetAnimation = _compositor.CreateScalarKeyFrameAnimation();
offsetAnimation.Duration = TimeSpan.FromSeconds(1);
offsetAnimation.InsertKeyFrame(1, targetX);
visual.StartAnimation("RelativeOffsetAdjustment.X", offsetAnimation);
}
private void Line_PointerPressed(object sender, RoutedEventArgs e)
{
// Toggle the color scheme.
AnimateToNewColorScheme(GetComplementaryColorScheme(_currentColorScheme));
}
private void Line_PointerEntered(object sender, PointerRoutedEventArgs e)
{
// Get the Visual associated with the sender and animate its position and width.
AnimateToNewPosition((SpriteVisual)((FrameworkElement)sender).Tag);
if (sender == TextLines.Children.First())
{
// Pointer is over the top line.
switch (_currentColorScheme)
{
case ColorScheme.CoolReversed:
case ColorScheme.Warm:
AnimateToNewColorScheme(GetReversedColorScheme(_currentColorScheme));
break;
}
}
else if (sender == TextLines.Children.Last())
{
// Pointer is over the bottom line.
switch (_currentColorScheme)
{
case ColorScheme.Cool:
case ColorScheme.WarmReversed:
AnimateToNewColorScheme(GetReversedColorScheme(_currentColorScheme));
break;
}
}
}
private (Color, Color) GetCurrentColors()
{
switch (_currentColorScheme)
{
case ColorScheme.Warm: return s_warmColors;
case ColorScheme.WarmReversed: return Reverse(s_warmColors);
case ColorScheme.Cool: return s_coolColors;
case ColorScheme.CoolReversed: return Reverse(s_coolColors);
default:
throw new InvalidOperationException();
}
}
private static ColorScheme GetComplementaryColorScheme(ColorScheme colorScheme)
=> ApplyColorSchemeFunction(
colorScheme,
ifWarm: ColorScheme.Cool,
ifWarmReversed: ColorScheme.CoolReversed,
ifCool: ColorScheme.Warm,
ifCoolReversed: ColorScheme.WarmReversed);
private static ColorScheme GetReversedColorScheme(ColorScheme colorScheme)
=> ApplyColorSchemeFunction(
colorScheme,
ifWarm: ColorScheme.WarmReversed,
ifWarmReversed: ColorScheme.Warm,
ifCool: ColorScheme.CoolReversed,
ifCoolReversed: ColorScheme.Cool);
private static ColorScheme ApplyColorSchemeFunction(
ColorScheme input,
ColorScheme ifWarm,
ColorScheme ifWarmReversed,
ColorScheme ifCool,
ColorScheme ifCoolReversed)
{
switch (input)
{
case ColorScheme.Warm: return ifWarm;
case ColorScheme.WarmReversed: return ifWarmReversed;
case ColorScheme.Cool: return ifCool;
case ColorScheme.CoolReversed: return ifCoolReversed;
default:
throw new InvalidOperationException();
}
}
private static (T, T) Reverse<T>((T, T) pair) => (pair.Item2, pair.Item1);
private enum ColorScheme
{
Warm,
WarmReversed,
Cool,
CoolReversed,
}
}
}

2
SampleGallery/Shared/SampleDefinition.cs
Просмотреть файл

@ -180,6 +180,8 @@ namespace CompositionSampleGallery
#if SDKVERSION_16299
new SampleDefinition(SpringyImage.StaticSampleName, typeof(SpringyImage), SampleType.Reference, SampleCategory.Motion, false, false, "ms-appx:///Assets/SampleThumbnails/SpringyImage.PNG", description: SpringyImage.StaticSampleDescription, sdkVersion: RuntimeSupportedSDKs.SDKVERSION._16299, dateAdded: new DateTime(2017,08,7), tags: new string[1]{"ExpressionBuilder"}),
new SampleDefinition(LinearGradients.StaticSampleName, typeof(LinearGradients), SampleType.Reference, SampleCategory.Motion, false, false, "ms-appx:///Assets/SampleThumbnails/LinearGradients.PNG", description: LinearGradients.StaticSampleDescription, sdkVersion: RuntimeSupportedSDKs.SDKVERSION._16299, dateAdded: new DateTime(2019,02,27)),
#endif
#if SDKVERSION_17134