TheDeveloperBlog.com
C-Sharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript | SQL | PHP | Angular | HTML
WPF Viewbox Example
Use the WPF Viewbox control to stretch an internal control. Set the Stretch XAML attribute.Viewbox. A Viewbox resizes the control nested within it. With its Stretch attribute, we resize the element to fill the entire Viewbox. This is an easy way to provide a resizable, scalable interface.
First, drag a Viewbox to your Window—it will be nested within the default Grid. Now adjust its properties. Add a Stretch attribute. Visual Studio will suggest some options here.
Fill: This means that the internal element within the Viewbox should be expanded as far as possible in both directions. Ratios are ignored.
Uniform: The element is expanded so that its ratios are preserved, as far as possible. The control is not cropped.
UniformToFill: This expands the control until it fills the entire Viewbox. Cropping may occur.
In the screenshot, the Stretch attribute is set to "Fill." So the text in the TextBox becomes distorted. Often, using "Fill" will not look good: it may also lead to blurring or other pixel artifacts.TextBox
Tip: When using a Viewbox, I recommend trying all the Stretch options to find the best one for your purpose.
Example markup: XAML
<Window x:Class="WpfApplication10.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Viewbox HorizontalAlignment="Left" Height="299"
Margin="10,10,0,0" VerticalAlignment="Top" Width="497"
Stretch="Fill">
<TextBox Height="23" TextWrapping="Wrap" Text="TextBox" Width="120"/>
</Viewbox>
</Grid>
</Window>
RenderTransform. A Viewbox is not the only way to scale and transform a control. You can add a RenderTransform element inside your control to specify how it is rendered. This element can apply skew, scale, rotate and translate transformations.RenderTransform
For complex transformations, a RenderTransform will work better. But the Viewbox is great for simple stuff. A DoubleAnimation element (along with a Storyboard) can be used for animating things.DoubleAnimation
Some notes. A Viewbox is preferable in certain situations. It makes it easier to replace the inner element in a dynamic way. If you nest an Image within a Viewbox, you can replace that image in C# code and achieve the same stretching effect.Image
Summary. A key benefit to WPF is its graphical capabilities. It has strong support for transforming how elements, including controls, pictures and text, are rendered. And Viewbox is another way we exploit these capabilities.
© TheDeveloperBlog.com
The Dev Codes
Related Links:
- WPF Controls
- WPF Rectangle: Fill and Stroke
- WPF TabControl Example: TabItem
- WPF HorizontalAlignment and VerticalAlignment
- WPF Grid Use: Margin and Background
- WPF GridSplitter Example
- WPF StackPanel: Arrange Controls
- WPF DataGrid Examples
- WPF DatePicker Example: SelectedDate
- WPF Border Example
- WPF CheckBox Example
- WPF ComboBox Example (ItemsSource)
- WPF Ellipse: Stroke, Fill and MouseEnter
- WPF DockPanel Example
- WPF Expander Control
- WPF DoubleAnimation
- WPF ProgressBar: Value and Maximum
- WPF Button Control Example
- Top 35 WPF Interview Questions (2021)
- WPF Viewbox Example
- WPF WebBrowser Control
- WPF PasswordBox Control: PasswordChanged
- WPF IsEnabled Property (Button Example)
- WPF RadioButton Example (Checked)
- WPF Image Example: PNG, JPG Files
- WPF ToolBar Example: Uses ToolBarTray
- WPF ToolTip Example
- WPF TextBlock Example
- WPF TextBox Example
- WPF TreeView Example: TreeViewItem
- WPF Menu, MenuItem and Separator
- WPF Label Example
- WPF Name Property: Get Controls
- WPF KeyDown Event Handler
- WPF RenderTransform Example: TransformGroup
- WPF ListView Control: Add Items to GridView
- WPF ScrollViewer Control
- WPF GroupBox Example
- WPF WindowsFormsHost Example
- WPF WrapPanel Example
- WPF Slider Example (ValueChanged)
- WPF Calendar Example: SelectedDate
- WPF Canvas Example: SetLeft, SetTop