Skip to content

Commit d63112c

Browse files
aborziak-msaborziak-ms
authored
Lottie Viewer | Added scale slider. Added repeating pattern background and checkbox for hiding/showing solid color bg. (#456)
1 parent df4131e commit d63112c

File tree

8 files changed

+134
-13
lines changed

8 files changed

+134
-13
lines changed

‎LottieViewer/Assets/BackgroundPattern.png‎

126 Bytes
Loading

‎LottieViewer/LottieViewer.csproj‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -177,6 +177,7 @@
177177
<Content Include="Assets\BadgeLogo.scale-150.png" />
178178
<Content Include="Assets\BadgeLogo.scale-200.png" />
179179
<Content Include="Assets\BadgeLogo.scale-400.png" />
180+
<Content Include="Assets\BackgroundPattern.png" />
180181
<Content Include="Assets\SplashScreen.scale-200.png" />
181182
<Content Include="Properties\Default.rd.xml" />
182183
</ItemGroup>

‎LottieViewer/MainPage.xaml‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,40 @@
184184
<TextBlock Grid.Column="1" Margin="10,0,0,0">x <Run Text="{x:Bind _stage.Player.PlaybackRate, Mode=OneWay, Converter={StaticResource floatFormatter}}"/></TextBlock>
185185
</Grid>
186186
</StackPanel>
187+
188+
<StackPanel>
189+
<TextBlock FontWeight="Bold" >Canvas size</TextBlock>
190+
<Grid Margin="20,14,20,20">
191+
<Grid.ColumnDefinitions>
192+
<ColumnDefinition/>
193+
<ColumnDefinition Width="50"/>
194+
</Grid.ColumnDefinitions>
195+
<Slider
196+
Padding="10, 0, 10, 0"
197+
HorizontalAlignment="Stretch"
198+
Maximum="1024"
199+
Minimum="8"
200+
LargeChange="16"
201+
SmallChange="1"
202+
StepFrequency="1"
203+
TickFrequency="16"
204+
TickPlacement="TopLeft"
205+
Value="{x:Bind _stage.PlayerContainer.MaxHeight, Mode=TwoWay}">
206+
<Slider.Resources>
207+
<!--
208+
Override the themed slider resources so that control ignores the accent colors.
209+
This is desirable because the accent colors may make the control hard to see
210+
on the gray background.
211+
-->
212+
<StaticResource x:Key="SliderThumbBackground" ResourceKey="LottieBasicBrush" />
213+
<StaticResource x:Key="SliderThumbBackgroundPointerOver" ResourceKey="LottieBasicBrush" />
214+
<StaticResource x:Key="SliderThumbBackgroundPressed" ResourceKey="LottieBasicBrush" />
215+
<StaticResource x:Key="SliderThumbBackgroundDisabled" ResourceKey="LottieBasicBrush" />
216+
</Slider.Resources>
217+
</Slider>
218+
<TextBlock Grid.Column="1" Margin="10,0,0,0"><Run Text="{x:Bind _stage.PlayerContainer.MaxHeight, Mode=OneWay, Converter={StaticResource floatFormatter}}"/>px</TextBlock>
219+
</Grid>
220+
</StackPanel>
187221

188222
<!-- Separator -->
189223
<Border Style="{StaticResource SeparatorStyle}"/>

‎LottieViewer/MainPage.xaml.cs‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,10 @@ public MainPage()
5151
// Add the background to the color picker so that it can be modified by the user.
5252
_paletteColorPicker.PaletteEntries.Add(BackgroundColor);
5353

54+
// Update background visibility after checkbox clicked.
55+
_paletteColorPicker.ShowSolidBackground.Click +=
56+
(object sender, RoutedEventArgs e) => _stage.ShowSolidBackground = _paletteColorPicker.ShowSolidBackground.IsChecked ?? false;
57+
5458
// Get notified when info about the loaded Lottie changes.
5559
_stage.DiagnosticsViewModel.PropertyChanged += DiagnosticsViewModel_PropertyChanged;
5660

‎LottieViewer/PaletteColorPicker.xaml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@
2929
Background="Transparent"
3030
ItemsSource="{x:Bind PaletteEntries}"
3131
SelectionMode="Single"
32-
SelectionChanged="PaletteListBox_SelectionChanged" DoubleTapped="PaletteListBox_DoubleTapped">
32+
SelectionChanged="PaletteListBox_SelectionChanged" DoubleTapped="PaletteListBox_DoubleTapped"
33+
Margin="0,-15,0,0">
3334
<muxc:ListBox.Resources>
3435
<Style TargetType="ListBoxItem">
3536
<Setter Property="Template">
@@ -234,6 +235,7 @@
234235
<Border Style="{StaticResource SeparatorStyle}"/>
235236

236237
<TextBlock FontWeight="Bold">Colors</TextBlock>
238+
<CheckBox x:Name="_showSolidBackground">Show solid background</CheckBox>
237239
</StackPanel>
238240
</StackPanel>
239241
</Grid>

‎LottieViewer/PaletteColorPicker.xaml.cs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ public sealed partial class PaletteColorPicker : UserControl
3131
// try to set each others values.
3232
bool m_isColorPickerChanging = false;
3333

34+
internal CheckBox ShowSolidBackground => _showSolidBackground;
35+
3436
public PaletteColorPicker()
3537
{
3638
this.InitializeComponent();

‎LottieViewer/Stage.xaml‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,11 @@
2626
<ColumnDefinition Width="1*" />
2727
<ColumnDefinition Width="0.4*" />
2828
</Grid.ColumnDefinitions>
29+
<!--
30+
Background canvas. Initialized from code.
31+
-->
32+
<Canvas x:Name="_canvas" Grid.ColumnSpan="3" Grid.RowSpan="3" Visibility="Collapsed">
33+
</Canvas>
2934
<local:FeedbackLottie x:Name="_feedbackLottie"
3035
Grid.Row="1"
3136
Grid.Column="1" />
@@ -43,25 +48,28 @@
4348
<ColumnDefinition Width="1*" />
4449
<ColumnDefinition Width="0.1*" />
4550
</Grid.ColumnDefinitions>
51+
4652
<!--
4753
Viewbox is necessary for stretching because we want to keep the Lottie unstretched so that
4854
the background has the same aspect ratio as the Lottie. This allows the user to see the
4955
shape of the Lottie's bounding rectangle.
5056
-->
5157
<Viewbox Grid.Row="1"
5258
Grid.Column="1"
53-
Stretch="Uniform">
59+
Stretch="Uniform"
60+
MaxHeight="512"
61+
x:Name="_playerContainer">
5462
<Border>
5563
<Border.Background>
56-
<SolidColorBrush Color="{x:Bind ArtboardColor, Mode=OneWay}" />
64+
<SolidColorBrush Color="{x:Bind ArtboardColor, Mode=OneWay}" x:Name="_backgroundColorBrush"/>
5765
</Border.Background>
5866
<!-- Stretch="None" so that the Border will have the same shape as the Lottie. -->
5967
<muxc:AnimatedVisualPlayer x:Name="_player"
60-
AutomationProperties.Name="Current animation"
61-
AutoPlay="False"
62-
Stretch="None">
68+
AutomationProperties.Name="Current animation"
69+
AutoPlay="False"
70+
Stretch="None">
6371
<lottie:LottieVisualSource x:Name="_playerSource"
64-
Options="All" />
72+
Options="All" />
6573
</muxc:AnimatedVisualPlayer>
6674
</Border>
6775
</Viewbox>

‎LottieViewer/Stage.xaml.cs‎

Lines changed: 76 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,22 @@
33
// See the LICENSE file in the project root for more information.
44

55
using System;
6+
using System.Numerics;
67
using System.Threading.Tasks;
78
using LottieViewer.ViewModel;
9+
using Microsoft.Graphics.Canvas;
10+
using Microsoft.Graphics.Canvas.Effects;
11+
using Microsoft.Graphics.Canvas.UI.Composition;
812
using Microsoft.UI.Xaml.Controls;
13+
using Windows.Graphics.DirectX;
914
using Windows.Storage;
15+
using Windows.Storage.Streams;
1016
using Windows.UI;
17+
using Windows.UI.Composition;
1118
using Windows.UI.Xaml;
1219
using Windows.UI.Xaml.Controls;
20+
using Windows.UI.Xaml.Hosting;
21+
using Windows.UI.Xaml.Media.Imaging;
1322

1423
namespace LottieViewer
1524
{
@@ -31,7 +40,54 @@ public Stage()
3140
{
3241
this.InitializeComponent();
3342

34-
Reset();
43+
// Do not show solid background by default.
44+
ShowSolidBackground = false;
45+
46+
// Do not show checkerboard pattern until lottie file is loaded.
47+
_canvas.Visibility = Visibility.Collapsed;
48+
49+
_feedbackLottie.PlayInitialStateAnimation();
50+
}
51+
52+
// Draw repeating pattern texture on backgound canvas.
53+
public async Task SetupBackgroundPatternAsync()
54+
{
55+
var compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
56+
var canvasDevice = CanvasDevice.GetSharedDevice();
57+
var graphicsDevice = CanvasComposition.CreateCompositionGraphicsDevice(compositor, canvasDevice);
58+
59+
var bitmap = await CanvasBitmap.LoadAsync(canvasDevice, @"Assets\BackgroundPattern.png");
60+
61+
var drawingSurface = graphicsDevice.CreateDrawingSurface(
62+
bitmap.Size,
63+
DirectXPixelFormat.B8G8R8A8UIntNormalized,
64+
DirectXAlphaMode.Premultiplied);
65+
66+
using (var ds = CanvasComposition.CreateDrawingSession(drawingSurface))
67+
{
68+
ds.Clear(Colors.Transparent);
69+
ds.DrawImage(bitmap);
70+
}
71+
72+
var surfaceBrush = compositor.CreateSurfaceBrush(drawingSurface);
73+
surfaceBrush.Stretch = CompositionStretch.None;
74+
75+
var border = new BorderEffect
76+
{
77+
ExtendX = CanvasEdgeBehavior.Wrap,
78+
ExtendY = CanvasEdgeBehavior.Wrap,
79+
Source = new CompositionEffectSourceParameter("source"),
80+
};
81+
82+
var fxFactory = compositor.CreateEffectFactory(border);
83+
var fxBrush = fxFactory.CreateBrush();
84+
fxBrush.SetSourceParameter("source", surfaceBrush);
85+
86+
var sprite = compositor.CreateSpriteVisual();
87+
sprite.Size = new Vector2(4096);
88+
sprite.Brush = fxBrush;
89+
90+
ElementCompositionPreview.SetElementChildVisual(_canvas, sprite);
3591
}
3692

3793
// The DiagnosticsViewModel contains information about the currently playing
@@ -41,6 +97,21 @@ public Stage()
4197

4298
internal AnimatedVisualPlayer Player => _player;
4399

100+
internal Viewbox PlayerContainer => _playerContainer;
101+
102+
private bool showSolidBackground = false;
103+
104+
internal bool ShowSolidBackground
105+
{
106+
get => showSolidBackground;
107+
108+
set
109+
{
110+
_backgroundColorBrush.Opacity = value ? 1.0 : 0.0;
111+
showSolidBackground = value;
112+
}
113+
}
114+
44115
public Color ArtboardColor
45116
{
46117
get { return (Color)GetValue(ArtboardColorProperty); }
@@ -56,6 +127,10 @@ internal async Task<bool> TryLoadFileAsync(StorageFile file)
56127
{
57128
// Load the Lottie composition.
58129
await _playerSource.SetSourceAsync(file);
130+
131+
await SetupBackgroundPatternAsync();
132+
133+
_canvas.Visibility = Visibility.Visible;
59134
}
60135
catch (Exception)
61136
{
@@ -89,10 +164,5 @@ internal void DoDragLeave()
89164
{
90165
_feedbackLottie.PlayDragLeaveAnimation();
91166
}
92-
93-
internal void Reset()
94-
{
95-
_feedbackLottie.PlayInitialStateAnimation();
96-
}
97167
}
98168
}

0 commit comments

Comments
 (0)