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
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;
}
Leave Comment