How to customize the zoom in and out the content of SfPulsingTile
This control resembles the Music and Video hub tiles in Windows Phone. The content will zoom in and out randomly and show a translation movement in the x- and y- axis randomly. The following properties are used to customize SfPulsingTile control.
PulseScale:
The PulseScale property specifies the range of translation in the x- and y-axis while pulsing the content.
PulseDuration:
The PulseDuration property specifies the interval for the translation done in the pulsing tile.
Radius X:
The RadiusX property specifies the range of the translation in the pulsing tile along the x-axis.
Radius Y:
The Radius Y property specifies the range of the translation in the pulsing tile along the y-axis.
Example:
XAML
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<syncfusion:SfPulsingTile x:Name="sfPulsingTile" Grid.Column="0" Title="Pulsing Tile Demo" Height="150" Width="150" Header="Demo" PulseDuration="0:0:6">
<Image Source="Assets/emp1.png" Stretch="UniformToFill" />
</syncfusion:SfPulsingTile>
<StackPanel Grid.Column="1" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Pulsing Duration" Height="50" Width="200" />
<input:SfNumericUpDown x:Name="interval" FormatString="0 seconds" Maximum="8" Minimum="0" Value="2" Height="50" Width="200" ValueChanged="intreval_ValueChanged"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Radius X" Height="50" Width="200" />
<TextBox Text="0.0" x:Name="RadiusX" TextChanged="RadiusX_TextChanged" Height="50" Width="200"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Radius Y" Height="50" Width="200" />
<TextBox Text="0.0" x:Name="RadiusY" TextChanged="RadiusY_TextChanged" Height="50" Width="200"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Pulse Scale" Height="50" Width="200" />
<TextBox Text="0.0" x:Name="Scale" TextChanged="Scale_TextChanged" Height="50" Width="200"/>
</StackPanel>
</StackPanel>
</Grid>
C#
public MainPage()
{
this.InitializeComponent();
sfPulsingTile.Loaded += new RoutedEventHandler(PulsingTile_Loaded);
}
private void PulsingTile_Loaded(object sender, RoutedEventArgs e)
{
sfPulsingTile.PulseDuration = TimeSpan.FromSeconds(Double.Parse(interval.Value.ToString()));
sfPulsingTile.RadiusX = Double.Parse(RadiusX.Text);
sfPulsingTile.RadiusY = Double.Parse(RadiusY.Text);
sfPulsingTile.PulseScale = Double.Parse(Scale.Text);
}
private void intreval_ValueChanged(object sender, Syncfusion.UI.Xaml.Controls.Input.ValueChangedEventArgs e)
{
if (sfPulsingTile != null)
sfPulsingTile.PulseDuration = TimeSpan.FromSeconds(Double.Parse(interval.Value.ToString()));
}
private void RadiusX_TextChanged(object sender, TextChangedEventArgs e)
{
if (sfPulsingTile != null && RadiusX.Text != "")
sfPulsingTile.RadiusX = Double.Parse(RadiusX.Text);
}
private void RadiusY_TextChanged(object sender, TextChangedEventArgs e)
{
if (sfPulsingTile != null && RadiusY.Text != "")
sfPulsingTile.RadiusY = Double.Parse(RadiusY.Text);
}
private void Scale_TextChanged(object sender, TextChangedEventArgs e)
{
if (sfPulsingTile != null && Scale.Text!= "")
sfPulsingTile.PulseScale = Double.Parse(Scale.Text);
}
The following screenshots are the output of the code above:
Figure 1: Zoom In
Figure 2: Zoom Out