articles

Home / DeveloperSection / Articles / ViewBox control in WPF

ViewBox control in WPF

ViewBox control in WPF

Anonymous User 15061 04-Apr-2011

The ViewBox control is a 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 to System.Windows.Control namespace. In this demonstrate we learn 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 the read-only message, one-button control through which we browse the image and one ViewBox control.
The output of the following code snippet is as follows

ViewBox control in WPF

When a user clicks on the browse button then an open file dialog box 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;
        }

 


Updated 30-Jan-2020
I am a content writter !

Leave Comment

Comments

Liked By