---
title: "ViewBox control in WPF"  
description: "View box is a very useful to control in WPF. It does not resize the content but it transforms it. This means that all text sizes and line width are al"  
author: "Anonymous User"  
published: 2011-04-04  
updated: 2020-01-30  
canonical: https://www.mindstick.com/articles/534/viewbox-control-in-wpf  
category: "wpf"  
tags: ["wpf"]  
reading_time: 3 minutes  

---

# ViewBox control in WPF

The ViewBox control is a very [useful](https://www.mindstick.com/articles/12694/how-dolomite-mineral-is-useful-in-human-life) control in WPF. It does not resize the [content](https://www.mindstick.com/articles/12369/cms-extension-for-magento-2-advanced-content-manager-2) but it [transforms](https://www.mindstick.com/forum/33814/how-to-use-transforms-in-css) it. This means that all text sizes and line width are also scaled. The Viewbox control in WPF belongs to **System.Windows.Control** [namespace](https://www.mindstick.com/articles/28/namespace-in-dot-net). In this demonstrate we learn how to use ViewBox control in WPF. In XAML <Viewbox /> element is used to [create a ViewBox control](https://www.mindstick.com/articles/23567/a-brief-definition-of-mvc-technology).\

##### XAML code snippet which represents ViewBox control demo

```
<Grid>        <Grid.RowDefinitions>            <RowDefinition />            <RowDefinition Height="10*" />        </Grid.RowDefinitions>        <Grid.ColumnDefinitions>            <ColumnDefinition Width="5*" />            <ColumnDefinition />        </Grid.ColumnDefinitions>        <TextBlock x:Name="txbChooseUrl" Grid.Column="0" Text="Browse Image Url" />        <Button x:Name="btnBrowseImage" Grid.Column="1" Content="Browse Button" Click="btnBrowseImage_Click" />        <Viewbox Grid.Row="1" x:Name="viewBox1" MouseDown="viewBox1_MouseDown">            <Image x:Name="img1" />        </Viewbox></Grid>
```

In the following code snippet, I had taken one TextBlock control which shows the read-only [message](https://www.mindstick.com/interview/682/which-are-the-various-message-map-macros), one-[button control](https://www.mindstick.com/articles/290/button-control-in-vb-dot-net) through which [we browse the image](https://www.mindstick.com/articles/23249/rdlc-report-in-mvc-application) and one ViewBox control.\
The output of the following code snippet is as follows

![ViewBox control in WPF](https://www.mindstick.com/mindstickarticle/8cb5ac3f-af93-485e-a9e5-9e6c28e3cf67/images/419add1d-d23e-4bd2-ad43-9e2eae5a2eca.png)

When a [user clicks](https://answers.mindstick.com/qa/34556/if-a-user-clicks-all-the-google-ads-on-my-site-is-it-foul) on the browse button then an open file [dialog box](https://www.mindstick.com/blog/157/dialog-box-in-dot-net) opens from where the user can browse appropriate action.

##### Code to implement the following task

```
/// <summary>        /// This event is called whenever mouse left click or right click button is clicked        /// on view box control. When mouse left button is clicked on view box control then        /// image is zoome in by 5 pixel and when mouse right button is clicked then image        /// is zoome out by 5 pixel.        /// </summary>        /// <param name="sender"></param>        /// <param name="e"></param>        private void viewBox1_MouseDown(object sender, MouseButtonEventArgs e)        {            if (e.LeftButton == MouseButtonState.Pressed && viewBox1.Width < 500)            {                viewBox1.Height += 5;                viewBox1.Width += 5;            }            if (e.RightButton == MouseButtonState.Pressed && viewBox1.Width > 10)            {                viewBox1.Width -= 5;                viewBox1.Height -= 5;            }        }          /// <summary>        /// When user click on Browse button then an open file dialog box is open        /// from where we choose the desire image.        /// Note-- Dont forget to import Microsoft.Win32 namespace at beginning.        /// </summary>        /// <param name="sender"></param>        /// <param name="e"></param>          private void btnBrowseImage_Click(object sender, RoutedEventArgs e)        {            OpenFileDialog ofd = new OpenFileDialog();            if (ofd.ShowDialog().Value)            {                BitmapImage bmp = new BitmapImage();                bmp.BeginInit();                bmp.UriSource = new Uri(ofd.FileName);                bmp.EndInit();                img1.Source = bmp;            }        }          /// <summary>        /// At the load event of Window we set certain properties of        /// View Box control such as Stretch property or Width property        /// or Height property.        /// </summary>        /// <param name="sender"></param>        /// <param name="e"></param>        private void Window_Loaded(object sender, RoutedEventArgs e)        {            viewBox1.Stretch = Stretch.Fill;            viewBox1.Width = 20;            viewBox1.Height = 20;        }
```

---

Original Source: https://www.mindstick.com/articles/534/viewbox-control-in-wpf

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.