How to zoom at center in scroll viewer while using ZoomToFactor to increase zoom level in button click

Question

I am using scroll viewer to zoom the image which is set as background for Grid.When, I am setting the zoom factor value on button click from code behind with scrollViewer.ZoomToFactor(zoomFactor) image is getting zoomed from Top left corner ,not from the center position.

Please get the sample from the below link or below code snippet for your reference. Link: https://github.com/ragulsv/ScrollViewer

Code Snippet[C#]:

    float count = 1;
    private void Clr_Click(object sender, RoutedEventArgs e)
    {
        count = 1;
         viewer.ZoomToFactor(count);
        viewer.RenderTransformOrigin = new Point(0.5, 0.5);
    }
    private void Btn_Click(object sender, RoutedEventArgs e)
    {
         viewer.ZoomToFactor(count);
        viewer.RenderTransformOrigin = new Point(0.5, 0.5);
        count += 1;
    }

Code Snippet[Xaml]:

   <Grid x:Name="grid1">
    <Grid.RowDefinitions>
        <RowDefinition Height="0.1*">

        </RowDefinition>
        <RowDefinition Height="0.1*">

        </RowDefinition>
        <RowDefinition Height="0.8*">

        </RowDefinition>
    </Grid.RowDefinitions>
    <Button x:Name="btn" Grid.Row="0"></Button>
    <Button x:Name="clr" Grid.Row="1"></Button>
    <ScrollViewer x:Name="viewer" Grid.Row="2" ZoomMode="Enabled">
        <Grid>
          <Image Source="Assets\EditedImage.jpg" Height="190" Width="190"/>
        </Grid>
    </ScrollViewer>
</Grid>

Answer 1

How to zoom at center in scroll viewer while using ZoomToFactor to increase zoom level in button click

For this scenario, you could set Image's parent Grid VerticalAlignment="Center" HorizontalAlignment="Center" that could make the image always fix on the center of ScrollViewer and then call ChangeView method to edit ZoomFactor.

private void Btn_Click(object sender, RoutedEventArgs e)
{
    viewer.ChangeView(0, 0, (viewer.ZoomFactor + 1f));       
}