Home > DeveloperSection > Articles > ViewBox control in WPF

ViewBox control in WPF


WPF WPF 
Ratings:
0 Comment(s)
 8176  View(s)
Rate this:

Viewbox control in WPF

View box is very useful control in WPF. It does not resize the content but it transforms it. This means that all text sizes and line width are also scaled. The Viewbox control in WPF belongs with System.Windows.Control namespace. In this demonstrate we learn that how to use ViewBox control in WPF. In XAML <Viewbox /> element is used to create a viewbox control.

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 read only message, one button control through which we browse the image and one ViewBox control.

Output of the following code snippet is as follows

Viewbox control in WPF

When user click on browse button then an open file dialog box opens from where user can browse appropriate action.

Code to implement 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;

        }

 


Don't want to miss updates? Please click the below button!

Follow MindStick