Articles in this section
Category / Section

How to customize the zoom in and out the content of SfPulsingTile

1 min read

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:

 

C:\Users\rajkumar.ganesamoort\Music\Sp-2\ZoomIn.png

 

Figure 1: Zoom In

C:\Users\rajkumar.ganesamoort\Music\Sp-2\ZoomOut.png

Figure 2: Zoom Out

                                                               

 

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment