-
Notifications
You must be signed in to change notification settings - Fork 78
/
MainPage.xaml
418 lines (386 loc) · 25 KB
/
MainPage.xaml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
<Page x:Class="LottieViewer.MainPage"
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:LottieViewer"
xmlns:lottie="using:CommunityToolkit.WinUI.Lottie"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:viewmodel="using:LottieViewer.ViewModel"
Visibility="Visible"
mc:Ignorable="d"
RequestedTheme="Dark"
PointerPressed="Page_PointerPressed" >
<Page.Resources>
<local:VisibilityConverter x:Key="VisibilityConverter" />
<local:FloatFormatter x:Key="floatFormatter" />
<SolidColorBrush x:Name="ArtboardBrush"
Color="{x:Bind BackgroundColor.Color, Mode=OneWay}" />
<!--
Color for Hyperlink. Use this to override the default Foreground
color on Hyperlink so that it is visible on the gray background
(otherwise the Hyperlink color will be themed and may become
unreadable).
-->
<StaticResource x:Key="LottieHyperlinkForegroundBrush"
ResourceKey="LottieBasicBrush" />
</Page.Resources>
<RelativePanel AllowDrop="True"
Background="{StaticResource StageBackgroundBrush}"
DragEnter="LottieDragEnterHandler"
DragLeave="LottieDragLeaveHandler"
Drop="LottieDropHandler">
<Grid x:Name="TopControls"
Height="60"
Background="{StaticResource BackgroundBrush}"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.AlignTopWithPanel="True">
<StackPanel HorizontalAlignment="Left"
Orientation="Horizontal">
<!-- Open file (alternative: 0xe8e5) -->
<ToggleButton Click="PickFile_Click"
x:Name="PickFile"
AutomationProperties.Name="Pick a Lottie file"
Style="{StaticResource ControlsToggleButtonStyle}"
ToolTipService.ToolTip="Pick a Lottie file">

</ToggleButton>
</StackPanel>
<StackPanel HorizontalAlignment="Right"
Orientation="Horizontal">
<!-- Paint palette -->
<ToggleButton
Checked="ControlPanelButtonChecked"
Unchecked="ControlPanelButtonUnchecked"
x:Name="PaletteButton"
AutomationProperties.Name="Pick colors"
ToolTipService.ToolTip="Color palette"
Style="{StaticResource ControlsToggleButtonStyle}">

</ToggleButton>
<!-- Info -->
<ToggleButton
x:Name="InfoButton"
Checked="ControlPanelButtonChecked"
Unchecked="ControlPanelButtonUnchecked"
AutomationProperties.Name="View Lottie file info"
ToolTipService.ToolTip="Lottie file info"
Style="{StaticResource ControlsToggleButtonStyle}">
<Grid>
<!-- Switch icon based on whether or not the Lottie file has any issues. -->
<TextBlock Text="" Visibility="{x:Bind _stage.DiagnosticsViewModel.HasIssues, Converter={StaticResource VisibilityConverter}, ConverterParameter=not, Mode=OneWay}" AutomationProperties.AccessibilityView="Raw"/>
<!-- Different color if there are issues. -->
<TextBlock Text="" Visibility="{x:Bind _stage.DiagnosticsViewModel.HasIssues, Converter={StaticResource VisibilityConverter}, Mode=OneWay}" Foreground="Orange" AutomationProperties.AccessibilityView="Raw"/>
</Grid>
</ToggleButton>
</StackPanel>
</Grid>
<Grid Background="{StaticResource StageBackgroundBrush}"
RelativePanel.Above="Controls"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.Below="TopControls"
RelativePanel.RightOf="PlayerControls">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.Resources>
<x:Double x:Key="ControlPanelWidth">400</x:Double>
</Grid.Resources>
<!-- The stage. This is where the Lotties are displayed. -->
<local:Stage x:Name="_stage" ArtboardColor="{x:Bind ArtboardBrush.Color, Mode=OneWay}" />
<!-- Control panel. This shows to the right of the stage. Only one panel is allowed to be
open at a time. This is ensured through code behind. -->
<Grid x:Name="ControlPanel" Grid.Column="1" Background="{StaticResource DropTargetBrush}">
<Grid.ChildrenTransitions>
<TransitionCollection>
<PaneThemeTransition Edge="Right"/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="White" />
</Style>
</Grid.Resources>
<!-- Color palette panel -->
<ScrollViewer
x:Name="ColorPanel"
Width="{StaticResource ControlPanelWidth}">
<local:PaletteColorPicker
Height="{x:Bind ColorPanel.ViewportHeight, Mode=OneWay}"
MinHeight="500"
x:Name="_paletteColorPicker"
Grid.Column="1"
DiagnosticsViewModel="{x:Bind _stage.DiagnosticsViewModel}"/>
</ScrollViewer>
<!-- Info panel -->
<ScrollViewer
x:Name="InfoPanel"
Width="{StaticResource ControlPanelWidth}">
<StackPanel Padding="20,10,20,0">
<!-- Issues. Collapsed if there are no issues. -->
<StackPanel Visibility="{x:Bind _stage.DiagnosticsViewModel.HasIssues, Converter={StaticResource VisibilityConverter}, Mode=OneWay}">
<TextBlock Visibility="{x:Bind _stage.DiagnosticsViewModel.HasIssues, Converter={StaticResource VisibilityConverter}, Mode=OneWay}"
FontWeight="Bold" Foreground="White" >
This Lottie has some issues ...
</TextBlock>
<ItemsControl Margin="0, 12, 12,12"
ItemsSource="{x:Bind _stage.DiagnosticsViewModel.Issues, Mode=OneWay}">
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="lottie:Issue">
<StackPanel Orientation="Horizontal">
<TextBlock MinWidth="60">
<Hyperlink Foreground="{StaticResource LottieHyperlinkForegroundBrush}" NavigateUri="{x:Bind Url}"><Run FontWeight="Bold"
Text="{x:Bind Code}" Foreground="Orange" /></Hyperlink>
</TextBlock>
<TextBlock Text="{x:Bind Description}" TextWrapping="Wrap" MaxWidth="240" Foreground="White"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
<!-- Separator -->
<Border Style="{StaticResource SeparatorStyle}" Visibility="{x:Bind _stage.DiagnosticsViewModel.HasIssues, Converter={StaticResource VisibilityConverter}, Mode=OneWay}"/>
<!-- Play speed controller. -->
<StackPanel>
<TextBlock FontWeight="Bold" >Play speed</TextBlock>
<Grid Margin="20,14,20,20">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Slider
Padding="10, 0, 10, 0"
HorizontalAlignment="Stretch"
LargeChange="1"
Maximum="2.0"
Minimum="-2.0"
SmallChange="0.1"
StepFrequency="0.1"
TickFrequency="0.5"
TickPlacement="TopLeft"
Value="{x:Bind _stage.Player.PlaybackRate, Mode=TwoWay}">
<Slider.Resources>
<!--
Override the themed slider resources so that control ignores the accent colors.
This is desirable because the accent colors may make the control hard to see
on the gray background.
-->
<StaticResource x:Key="SliderThumbBackground" ResourceKey="LottieBasicBrush" />
<StaticResource x:Key="SliderThumbBackgroundPointerOver" ResourceKey="LottieBasicBrush" />
<StaticResource x:Key="SliderThumbBackgroundPressed" ResourceKey="LottieBasicBrush" />
<StaticResource x:Key="SliderThumbBackgroundDisabled" ResourceKey="LottieBasicBrush" />
</Slider.Resources>
</Slider>
<TextBlock Grid.Column="1" Margin="10,0,0,0">x <Run Text="{x:Bind _stage.Player.PlaybackRate, Mode=OneWay, Converter={StaticResource floatFormatter}}"/></TextBlock>
</Grid>
</StackPanel>
<!-- Canvas size slider. -->
<StackPanel>
<TextBlock FontWeight="Bold" >Canvas size</TextBlock>
<Grid Margin="20,14,20,20">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Slider
Padding="10, 0, 10, 0"
HorizontalAlignment="Stretch"
Maximum="1024"
Minimum="8"
LargeChange="16"
SmallChange="1"
StepFrequency="1"
TickFrequency="16"
TickPlacement="TopLeft"
Value="{x:Bind _stage.PlayerContainer.MaxHeight, Mode=TwoWay}">
<Slider.Resources>
<!--
Override the themed slider resources so that control ignores the accent colors.
This is desirable because the accent colors may make the control hard to see
on the gray background.
-->
<StaticResource x:Key="SliderThumbBackground" ResourceKey="LottieBasicBrush" />
<StaticResource x:Key="SliderThumbBackgroundPointerOver" ResourceKey="LottieBasicBrush" />
<StaticResource x:Key="SliderThumbBackgroundPressed" ResourceKey="LottieBasicBrush" />
<StaticResource x:Key="SliderThumbBackgroundDisabled" ResourceKey="LottieBasicBrush" />
</Slider.Resources>
</Slider>
<TextBlock Grid.Column="1" Margin="10,0,0,0"><Run Text="{x:Bind _stage.PlayerContainer.MaxHeight, Mode=OneWay, Converter={StaticResource floatFormatter}}"/>px</TextBlock>
</Grid>
</StackPanel>
<!-- Separator -->
<Border Style="{StaticResource SeparatorStyle}"/>
<TextBlock FontWeight="Bold" Margin="0,0,0,10">Pixel view</TextBlock>
<!-- Pixel View. -->
<local:PixelViewElement x:Name="_pixelView">
<Rectangle PointerMoved="{x:Bind _pixelView.OnMouseMove}" Height="auto" Width="auto" Fill="White"></Rectangle>
</local:PixelViewElement>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="10,0,0,0">
<TextBlock Margin="5,0">Position: <Run Text="{x:Bind _pixelView.CurrentPosition, Mode=OneWay}"/></TextBlock>
<TextBlock>Color: <Run Text="{x:Bind _pixelView.CurrentColorString, Mode=OneWay}"/></TextBlock>
<Rectangle Width="10" Height="10" Margin="5" Fill="{x:Bind _pixelView.CurrentColorString, Mode=OneWay}"></Rectangle>
</StackPanel>
<!-- Separator -->
<Border Style="{StaticResource SeparatorStyle}"/>
<!-- Properties list. Only visible if there is a Diagnostics object. -->
<Grid Visibility="{x:Bind _stage.DiagnosticsViewModel.DiagnosticsObject, Converter={StaticResource VisibilityConverter}, Mode=OneWay}">
<Grid.RowDefinitions>
<RowDefinition Height="26"/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.Resources>
<DataTemplate x:Key="NormalTemplate" x:DataType="viewmodel:PairOfStrings">
<StackPanel Orientation="Horizontal" Margin="0,0,0,2">
<TextBlock Foreground="LightGray" MinWidth="60" Text="{x:Bind Item1}"/>
<TextBlock Foreground="White" Text="{x:Bind Item2}" TextWrapping="Wrap" MaxWidth="250" />
</StackPanel>
</DataTemplate>
<local:PropertiesTemplateSelector
x:Key="PropertiesTemplateSelector"
Normal="{StaticResource NormalTemplate}" />
</Grid.Resources>
<TextBlock FontWeight="Bold" >Lottie properties</TextBlock>
<!-- The list of Lottie properties. -->
<ItemsControl Grid.Row="1" ItemsSource="{x:Bind PropertiesList}" ItemTemplateSelector="{StaticResource PropertiesTemplateSelector}"/>
<!-- Markers list. -->
<Grid Grid.Row="2" Visibility="{x:Bind MarkersList.Count, Converter={StaticResource VisibilityConverter}, Mode=OneWay}">
<Grid.Resources>
<DataTemplate x:Key="MarkerTemplate" x:DataType="viewmodel:Marker">
<StackPanel Orientation="Horizontal" Margin="0,0,0,2" MaxWidth="310">
<TextBlock Foreground="White" TextAlignment="Right" TextWrapping="Wrap" MaxWidth="250" MinWidth="60" Padding="0,0,12,0">
<Hyperlink Foreground="{StaticResource LottieHyperlinkForegroundBrush}" Click="MarkerClick"><Run Text="{x:Bind InFrame}"/></Hyperlink>
</TextBlock>
<TextBlock Foreground="White" TextAlignment="Right" TextWrapping="Wrap" Text="{x:Bind Name}"/>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="MarkerWithDurationTemplate" x:DataType="viewmodel:MarkerWithDuration">
<StackPanel Orientation="Horizontal" Margin="0,0,0,2" MaxWidth="310">
<TextBlock Foreground="White" TextAlignment="Right" TextWrapping="Wrap" MaxWidth="250" MinWidth="60" Padding="0,0,12,0">
<Hyperlink Foreground="{StaticResource LottieHyperlinkForegroundBrush}" Click="MarkerClick"><Run Text="{x:Bind InFrame}"/></Hyperlink> -
<Hyperlink Foreground="{StaticResource LottieHyperlinkForegroundBrush}" Click="MarkerEndClick"><Run Text="{x:Bind OutFrame}"/></Hyperlink>
</TextBlock>
<TextBlock Foreground="White" TextWrapping="Wrap" Text="{x:Bind Name}"/>
</StackPanel>
</DataTemplate>
<local:PropertiesTemplateSelector
x:Key="PropertiesTemplateSelector"
Marker="{StaticResource MarkerTemplate}"
MarkerWithDuration="{StaticResource MarkerWithDurationTemplate}"/>
</Grid.Resources>
<StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,0,0,2">
<TextBlock Foreground="LightGray" MinWidth="60" Text="Markers"/>
<TextBlock Foreground="White" TextWrapping="Wrap" MaxWidth="250" />
</StackPanel>
<!--<StackPanel Orientation="Horizontal" Margin="0,0,0,2">
<TextBlock Foreground="DimGray" MinWidth="60" Text="Frame" TextAlignment="Right"/>
<TextBlock Foreground="DimGray" Text="Name" Margin="10,0,0,0"/>
</StackPanel>-->
<ItemsControl ItemsSource="{x:Bind MarkersList}" ItemTemplateSelector="{StaticResource PropertiesTemplateSelector}"/>
</StackPanel>
</Grid>
</Grid>
<!-- Separator -->
<Border Style="{StaticResource SeparatorStyle}"
Visibility="{x:Bind _stage.DiagnosticsViewModel.DiagnosticsObject, Converter={StaticResource VisibilityConverter}, Mode=OneWay}"/>
<!-- App version info. -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="26"/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock FontWeight="Bold">Lottie Viewer version</TextBlock>
<StackPanel Grid.Row="1" Orientation="Horizontal" Margin="0,0,0,2">
<TextBlock Foreground="LightGray" MinWidth="60">App</TextBlock>
<TextBlock Foreground="White" Text="{x:Bind AppVersion}" MaxWidth="250" />
</StackPanel>
<StackPanel Grid.Row="2" Orientation="Horizontal" Margin="0,0,0,2">
<TextBlock Foreground="LightGray" MinWidth="60">UAP</TextBlock>
<TextBlock Foreground="White" Text="{x:Bind UapVersion}" MaxWidth="250" />
</StackPanel>
</Grid>
</StackPanel>
</ScrollViewer>
</Grid>
</Grid>
<StackPanel x:Name="PlayerControls"
Width="340"
Padding="5"
VerticalAlignment="Bottom"
Background="{StaticResource ToolsBackgroundBrush}"
RelativePanel.Above="Controls"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignTopWithPanel="True"
Visibility="Collapsed">
<StackPanel.Resources>
<Style TargetType="Button">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="Background" Value="LightGray" />
</Style>
<Style TargetType="ToggleSwitch">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="Background" Value="LightGray" />
</Style>
<Style TargetType="ToggleButton">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="Background" Value="LightGray" />
</Style>
<Style TargetType="Slider">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="Background" Value="LightGray" />
</Style>
</StackPanel.Resources>
</StackPanel>
<!-- Controls at the bottom of the window -->
<Grid x:Name="Controls"
Height="64"
Background="{Binding Source={StaticResource BackgroundBrush}}"
RelativePanel.AlignBottomWithPanel="True"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True">
<Grid.ColumnDefinitions>
<!-- Buttons for opening a file, selecting background . -->
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="3*"
MinWidth="200" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!-- Filler so that when a tool (e.g. color picker) is showing, the play controls move to the left. -->
<Grid Grid.Column="3" Width="360" Visibility="{x:Bind IsControlPanelVisible, Converter={StaticResource VisibilityConverter}, Mode=OneWay}"/>
<RelativePanel Grid.Column="1">
<!-- Play/stop button -->
<local:PlayStopButton
x:Name="_playStopButton"
Margin="0,4,0,0"
IsEnabled="{x:Bind _stage.Player.IsAnimatedVisualLoaded, Mode=OneWay}"
Toggled="_playControl_Toggled"
VerticalAlignment="Center"
RelativePanel.AlignBottomWithPanel="True"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignTopWithPanel="True"
AutomationProperties.Name="Toggle play/stop"
/>
<!-- Scrubber -->
<local:Scrubber
x:Name="_scrubber"
AutomationProperties.Name="Animation progress"
Margin="0,5,0,0"
VerticalAlignment="Center"
IsEnabled="{x:Bind _stage.Player.IsAnimatedVisualLoaded, Mode=OneWay}"
RelativePanel.AlignBottomWithPanel="True"
RelativePanel.AlignTopWithPanel="True"
RelativePanel.RightOf="_playStopButton"
RelativePanel.AlignRightWithPanel="True"
ValueChanged="ProgressSliderChanged"
DiagnosticsViewModel="{x:Bind _stage.DiagnosticsViewModel, Mode=OneWay}" />
</RelativePanel>
</Grid>
</RelativePanel>
</Page>