Skip to content

Commit a8d1ae4

Browse files
committed
added more animations to campaigns page
1 parent 826530d commit a8d1ae4

File tree

3 files changed

+112
-82
lines changed

3 files changed

+112
-82
lines changed
257 KB
Loading

src/Avalonia.Desktop/Controls/AnimatedWrapPanel.cs

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -53,44 +53,50 @@ protected override Size ArrangeOverride(Size finalSize)
5353

5454
foreach (var child in Children)
5555
{
56+
if (!EnableAnimations)
57+
{
58+
continue;
59+
}
60+
5661
if (!child.IsEffectivelyVisible)
5762
{
5863
continue;
5964
}
6065

6166
var currentPosition = child.Bounds;
6267

63-
if (_previousBounds.TryGetValue(child, out var previousPosition))
68+
if (!_previousBounds.TryGetValue(child, out var previousPosition))
69+
{
70+
_previousBounds[child] = currentPosition;
71+
}
72+
else
6473
{
6574
var xDelta = previousPosition.X - currentPosition.X;
6675
var yDelta = previousPosition.Y - currentPosition.Y;
6776

68-
if (EnableAnimations && (Math.Abs(xDelta) > 0.5 || Math.Abs(yDelta) > 0.5))
77+
if (Math.Abs(xDelta) > 0.5 || Math.Abs(yDelta) > 0.5)
6978
{
70-
if (child.RenderTransform is not TranslateTransform transform)
71-
{
72-
transform = new TranslateTransform();
73-
child.RenderTransform = transform;
74-
child.RenderTransformOrigin = RelativePoint.TopLeft;
75-
}
76-
77-
transform.X = xDelta;
78-
transform.Y = yDelta;
79-
8079
_ = Animate(child, xDelta, yDelta);
8180
}
8281
}
83-
else
84-
{
85-
_previousBounds[child] = currentPosition;
86-
}
8782
}
8883

8984
return result;
9085
}
9186

9287
private async Task Animate(Control controlToAnimate, double fromX, double fromY)
9388
{
89+
if (controlToAnimate.RenderTransform is not TranslateTransform transform)
90+
{
91+
transform = new TranslateTransform();
92+
controlToAnimate.RenderTransform = transform;
93+
controlToAnimate.RenderTransformOrigin = RelativePoint.TopLeft;
94+
}
95+
96+
transform.X = fromX;
97+
transform.Y = fromY;
98+
99+
94100
if (_runningAnimationsCtss.TryGetValue(controlToAnimate, out var existingAnimation))
95101
{
96102
existingAnimation.Cancel();

src/Avalonia.Desktop/Controls/CampaignsControl.axaml

Lines changed: 90 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -49,96 +49,120 @@
4949

5050
<ListBox.Styles>
5151

52-
<Style Selector="ListBoxItem /template/ ContentPresenter#PART_ContentPresenter">
53-
<Setter Property="RenderTransform" Value="scale(1,1)"/>
54-
<Setter Property="Transitions">
55-
<Setter.Value>
56-
<Transitions>
57-
<TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.1"/>
58-
</Transitions>
59-
</Setter.Value>
60-
</Setter>
61-
</Style>
62-
63-
<Style Selector="ListBoxItem:pointerover /template/ ContentPresenter#PART_ContentPresenter">
64-
<Setter Property="Background" Value=""/>
65-
<Setter Property="RenderTransform" Value="scale(1.05)"/>
66-
</Style>
52+
<Style Selector="ListBoxItem">
53+
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
54+
<Setter Property="Background" Value=""/>
55+
<Setter Property="RenderTransform" Value="scale(0.92)"/>
56+
<Setter Property="Transitions">
57+
<Setter.Value>
58+
<Transitions>
59+
<TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.1"/>
60+
</Transitions>
61+
</Setter.Value>
62+
</Setter>
63+
</Style>
64+
65+
<Style Selector="^ Image#HightlightOverlay">
66+
<Setter Property="Opacity" Value="0.00"/>
67+
<Setter Property="Transitions">
68+
<Setter.Value>
69+
<Transitions>
70+
<DoubleTransition Property="Opacity" Duration="0:0:0.5"/>
71+
</Transitions>
72+
</Setter.Value>
73+
</Setter>
74+
</Style>
75+
76+
<Style Selector="^:pointerover">
77+
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
78+
<Setter Property="Background" Value=""/>
79+
<Setter Property="RenderTransform" Value="scale(0.96)"/>
80+
</Style>
81+
82+
<Style Selector="^ Image#HightlightOverlay">
83+
<Setter Property="Opacity" Value="0.2"/>
84+
</Style>
85+
</Style>
86+
87+
<Style Selector="^:selected">
88+
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
89+
<Setter Property="Background" Value=""/>
90+
<Setter Property="RenderTransform" Value="scale(1.0)"/>
91+
</Style>
92+
93+
<Style Selector="^ Image#HightlightOverlay">
94+
<Setter Property="Opacity" Value="0.25"/>
95+
</Style>
96+
</Style>
6797

68-
<Style Selector="ListBoxItem:selected /template/ ContentPresenter#PART_ContentPresenter">
69-
<Setter Property="Background" Value=""/>
70-
<Setter Property="RenderTransform" Value="scale(1.1)"/>
7198
</Style>
72-
7399
</ListBox.Styles>
74100

101+
75102
<ListBox.ItemsPanel>
76103
<ItemsPanelTemplate>
77-
<ctrl:AnimatedWrapPanel Orientation="Horizontal"/>
104+
<ctrl:AnimatedWrapPanel Orientation="Horizontal" ItemSpacing="3" LineSpacing="0"/>
78105
</ItemsPanelTemplate>
79106
</ListBox.ItemsPanel>
80107

81108
<ListBox.ItemTemplate>
82109
<DataTemplate>
83110

84-
<Grid RowDefinitions="215" ColumnDefinitions="150" VerticalAlignment="Bottom">
85-
86-
<Grid.Styles>
111+
<Grid Width="140" Height="210">
87112

88-
</Grid.Styles>
113+
<Grid IsVisible="{Binding GridImage, Converter={x:Static ObjectConverters.IsNotNull}}>">
89114

115+
<Image Source="{Binding GridImage, Converter={StaticResource ImagePathToBitmapConverter}}"
116+
VerticalAlignment="Center"
117+
HorizontalAlignment="Center"/>
90118

91-
<Border Background="Black"
92-
Margin="10"
93-
IsVisible="{Binding GridImage, Converter={x:Static ObjectConverters.IsNull}}"/>
119+
<TextBlock Text="{Binding Title}"
120+
Padding="5"
121+
Background="{Binding Path=Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}"
122+
HorizontalAlignment="Stretch"
123+
Opacity="0.6"
124+
TextAlignment="Center"
125+
VerticalAlignment="Bottom"
126+
TextWrapping="Wrap"/>
94127

95-
<Image Source="{Binding GridImage, Converter={StaticResource ImagePathToBitmapConverter}}"
96-
Margin="10"
97-
VerticalAlignment="Center"
98-
HorizontalAlignment="Center"
99-
IsVisible="{Binding GridImage, Converter={x:Static ObjectConverters.IsNotNull}}"/>
128+
<TextBlock Text="{Binding Title}"
129+
Padding="5"
130+
HorizontalAlignment="Stretch"
131+
TextAlignment="Center"
132+
VerticalAlignment="Bottom"
133+
TextWrapping="WrapWithOverflow"/>
134+
</Grid>
100135

101-
<Viewbox Margin="20"
102-
IsVisible="{Binding GridImage, Converter={x:Static ObjectConverters.IsNull}}">
103-
<TextBlock Foreground="{DynamicResource SystemAccentColor}"
104-
FontSize="500"
105-
FontWeight="Bold"
106-
TextAlignment="Center"
107-
Text="{Binding TitleWithNewLines}"/>
108-
</Viewbox >
136+
<Grid IsVisible="{Binding GridImage, Converter={x:Static ObjectConverters.IsNull}}">
109137

110-
<TextBlock Text="{Binding Title}"
111-
Margin="10"
112-
Padding="5"
113-
Background="{Binding Path=Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}"
114-
HorizontalAlignment="Stretch"
115-
Opacity="0.6"
116-
TextAlignment="Center"
117-
VerticalAlignment="Bottom"
118-
TextWrapping="Wrap"
119-
IsVisible="{Binding GridImage, Converter={x:Static ObjectConverters.IsNotNull}}"/>
138+
<Border Background="Black"/>
120139

121-
<TextBlock Text="{Binding Title}"
122-
Margin="10"
123-
Padding="5"
124-
HorizontalAlignment="Stretch"
125-
TextAlignment="Center"
126-
VerticalAlignment="Bottom"
127-
TextWrapping="Wrap"
128-
IsVisible="{Binding GridImage, Converter={x:Static ObjectConverters.IsNotNull}}"/>
140+
<Viewbox>
141+
<TextBlock Foreground="{DynamicResource SystemAccentColor}"
142+
Margin="20"
143+
FontSize="500"
144+
FontWeight="Bold"
145+
TextAlignment="Center"
146+
Text="{Binding TitleWithNewLines}"/>
147+
</Viewbox >
148+
</Grid>
129149

130-
</Grid>
150+
<Image x:Name="HightlightOverlay"
151+
Source="avares://BuildLauncher/Assets/overlay.png"
152+
VerticalAlignment="Center"
153+
HorizontalAlignment="Center"/>
131154

132-
</DataTemplate>
133-
</ListBox.ItemTemplate>
155+
</Grid>
134156

135-
</ListBox>
157+
</DataTemplate>
158+
</ListBox.ItemTemplate>
136159

137-
<ctrl:PortsButtonsControl Name="BottomPanel" Grid.Row="2" Grid.Column="0"/>
160+
</ListBox>
138161

139-
<ctrl:RightPanelControl Name="RightPanel" Grid.Row="1" Grid.Column="1"/>
162+
<ctrl:PortsButtonsControl Name="BottomPanel" Grid.Row="2" Grid.Column="0"/>
140163

164+
<ctrl:RightPanelControl Name="RightPanel" Grid.Row="1" Grid.Column="1"/>
141165

142-
</Grid>
166+
</Grid>
143167

144-
</UserControl>
168+
</UserControl>

0 commit comments

Comments
 (0)