Pulsing Tile Control in WPF Hub Tile (SfHubTile)
SfPulsingTile control allows to create a tile similar to Music and Video hub tile in Windows Phone. The content zooms in/out randomly with random translation in X and Y axis.
Setting Title, Header and Image on Pulsing Tile
You can set the title, header and image on SfPulsingTile by setting Title, Header and ImageSource properties.
<!--Pulsing Tile-->
<syncfusion:SfPulsingTile x:Name="pulsingTile" Header="Pulsing Tile" Title="This is title area." Background="DeepSkyBlue">
<Image Source="Assets\PulsingTile.jpg" HorizontalAlignment="Center" VerticalAlignment="Center" />
</syncfusion:SfPulsingTile>
Customizing Animation
You can change pulsing tile animation by using pulsing scale, pulsing duration, RadiusX and RadiusY properties.
PulseScale
The PulseScale property specifies the range of translation in the x- and y-axis while pulsing the content.
<!-- SfPulsingTile Control -->
<syncfusion:SfPulsingTile x:Name="pulsingTile" Width="200" Height="200" PulseScale="2" Header="PulsingTile" >
<Image Source="Assets/PulsingTile.jpg" Stretch="UniformToFill" VerticalAlignment="Center" HorizontalAlignment="Center" Height="200" />
</syncfusion:SfPulsingTile>PulseDuration
The PulseDuration property specifies the time taken for a single scaling animation to complete in pulsing tile.
<!-- SfPulsingTile Control -->
<syncfusion:SfPulsingTile x:Name="pulsingTile" Width="200" Height="200" PulseDuration="00:00:00.5" Header="PulsingTile" >
<Image Source="Assets/PulsingTile.jpg" Stretch="UniformToFill" VerticalAlignment="Center" HorizontalAlignment="Center" Height="200" />
</syncfusion:SfPulsingTile>RadiusX
The RadiusX property specifies the range of the translation in the pulsing tile along the x-axis.
<!-- SfPulsingTile Control -->
<syncfusion:SfPulsingTile x:Name="pulsingTile" Width="200" Height="200" RadiusX="100" Header="PulsingTile" >
<Image Source="Assets/PulsingTile.jpg" Stretch="UniformToFill" VerticalAlignment="Center" HorizontalAlignment="Center" Height="200" />
</syncfusion:SfPulsingTile>RadiusY
The RadiusY property specifies the range of the translation in the pulsing tile along y-axis.
<!-- SfPulsingTile Control -->
<syncfusion:SfPulsingTile x:Name="pulsingTile" Width="200" Height="200" RadiusY="100" Header="PulsingTile" >
<Image Source="Assets/PulsingTile.jpg" Stretch="UniformToFill" VerticalAlignment="Center" HorizontalAlignment="Center" Height="200" />
</syncfusion:SfPulsingTile>