TheDeveloperBlog.com
C-Sharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript | SQL | PHP | Angular | HTML
WPF RenderTransform Example: TransformGroup
RenderTransform. Controls in WPF support graphical transformations. We can scale, skew, rotate and translate controls. We use the RenderTransform element. For a Button, we specify a Button.RenderTransform and a TransformGroup.
Example. To begin, please drag a Button control to the WPF window. Now, attempt to rotate the Button in Visual Studio: click on a corner and drag it in the direction you want to rotate. Visual Studio will insert a Button.RenderTransform element.
ScaleTransform: This is the first element within the TransformGroup element. It scales (makes bigger or smaller) the X and Y dimensions.
SkewTransform: Skewing an element causes it to lose its original shape. It distorts the element. We set AngleX to 30.
RotateTransform: This rotates the element. We specify a 35-degree rotation of the Button control.
TranslateTransform: This changes the location of the control. We move it 50 pixels to the right (X) and 80 pixels downward (Y).
Example markup: XAML
<Window x:Class="WpfApplication24.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>
<Button Content="Example"
HorizontalAlignment="Left"
Margin="0"
VerticalAlignment="Top"
Width="75"
Background="Salmon"
Foreground="White"
RenderTransformOrigin="0.5,0.5">
<Button.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="2" ScaleY="2"/>
<SkewTransform AngleX="30" AngleY="0"/>
<RotateTransform Angle="35"/>
<TranslateTransform X="50" Y="80"/>
</TransformGroup>
</Button.RenderTransform>
</Button>
</Grid>
</Window>
The screenshot at the top shows the output of this XAML. The button, salmon-colored with white text, is rotated and skewed and scaled. This makes it almost unusable in a real program.
Summary. Any WPF control can be transformed in this way. But in many programs, these transformations are not helpful. No one wants to read a DataGrid that is rotated or skewed. It is best to be careful and apply transformations only as needed.DataGrid
© 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