title: Fit image to page and auto hide scrollbar
body: <pre><code>&lt;ScrollViewer x:Name="imagescrollviewer" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"&gt;
      &lt;!--&lt;Viewbox&gt;--&gt;
          &lt;Image x:Name="im" Source="{Binding JpgImageSource}" RenderTransformOrigin="0.5,0.5" Stretch="Uniform"&gt;
              &lt;Image.RenderTransform&gt;
                  &lt;ScaleTransform  ScaleX="{Binding Value,ElementName=scaleslider}" ScaleY="{Binding Value,ElementName=scaleslider}"/&gt;
              &lt;/Image.RenderTransform&gt;
          &lt;/Image&gt;
          &lt;!--&lt;/Viewbox&gt;--&gt;
      &lt;/ScrollViewer&gt;
  &lt;Slider x:Name="scaleslider" Orientation="Vertical" Height="100" Margin="5" HorizontalAlignment="Center" Maximum="4" Minimum="0.2" Value="1"/&gt;
  </code></pre>
  
  <ol>
  <li><p>The scrollbar doesn't adpat to the image size properly. When the image gets bigger, the scrollbar should be shorter and vice versa. Is there some way to figure out the problem?</p></li>
  <li><p>How to know the slider value when the image is fit to the window?</p></li>
  </ol>