World War I Windows 10 (71) and World War I 71

World War I Windows 10 (71) and World War I 71

[Download source code]

Backwater world war I Windows 10 (71)-Controls (control base class): UIElement-RenderTransform (2D transformation), Clip (tailoring)

Author: webabcd


Introduction
Controls for Windows 10 (controls-UIElement)

• RenderTransform (2D transformation)
• Clip (cropping)

Example
1. demonstrate the application of 2D transformation of UIElement
Controls/BaseControl/UIElementDemo/RenderTransformDemo. xaml

<Page x: Class = "Windows10.Controls. BaseControl. UIElementDemo. RenderTransformDemo" xmlns =" http://schemas.microsoft.com/winfx/2006/xaml /Presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "Xmlns: local =" using: Windows10.Controls. BaseControl. UIElementDemo "xmlns: d =" http://schemas.microsoft.com/expression/blend/2008 "Xmlns: mc =" http://schemas.openxmlformats.org/markup-compatibility/2006 "Mc: Ignorable =" d "> <Grid Background =" Transparent "> <Grid Margin =" 10 0 10 "> <! -- RenderTransform-2D Transformation (displacement, rotation, scaling, distortion, etc) --> <Grid HorizontalAlignment = "Left" verticalignment = "Top"> <Rectangle Width = "200" Height = "100" StrokeDashArray = "" Stroke = "Blue" StrokeThickness =" 3 "/> <Rectangle Width =" 200 "Height =" 100 "Fill =" Yellow "Stroke =" Red "StrokeThickness =" 3 "Opacity =" 0.3 "> <Rectangle. renderTransform> <! -- RotateTransform-rotation (clockwise) --> <! -- Angle-rotation Angle. The default value is 0 CenterX-the X axis coordinate of the rotation center. The default value is 0 CenterY-Y axis coordinate of the rotation center. The default value is 0 --> <RotateTransform Angle = "15" CenterX = "100" CenterY = "50"/> </Rectangle. renderTransform> </Rectangle> </Grid> <Grid Margin = "400 0 0 0" HorizontalAlignment = "Left" verticalignment = "Top"> <Rectangle Width = "200" Height = ""100" StrokeDashArray = "" Stroke = "Blue" StrokeThickness = "3"/> <! -- RenderTransformOrigin-the center Point of the location transformation (this is a relative value, the upper left corner of the element is 0, 0, and the lower right corner of the element is. Values smaller than 0 or greater than 1 are supported). This value is of the Point type, in xaml, separate them with commas (,) or spaces --> <Rectangle Width = "200" Height = "100" Fill = "Yellow" Stroke = "Red" StrokeThickness = "3" Opacity = "0.3" RenderTransformOrigin = "0.5, 0.5 "> <Rectangle. renderTransform> <RotateTransform Angle = "15"/> </Rectangle. renderTransform> </Rectangle> </Grid> <Grid Margin = "800 0 0 0" HorizontalAlignme Nt = "Left" VerticalAlignment = "Top"> <Rectangle Width = "200" Height = "100" StrokeDashArray = "" Stroke = "Blue" StrokeThickness = "3"/> <Rectangle Width = "200" Height = "100" Fill = "Yellow" Stroke = "Red" StrokeThickness = "3" Opacity = "0.3"> <Rectangle. renderTransform> <! -- TranslateTransform-translation transformation --> <! -- X-the moving distance in the horizontal direction. The default value is 0. The default value is 0 --> <TranslateTransform X = "100" Y = "10"/> </Rectangle. renderTransform> </Rectangle> </Grid> <Grid Margin = "0 200 0 0" HorizontalAlignment = "Left" verticalignment = "Top"> <Rectangle Width = "200" Height = ""100" StrokeDashArray = "200" Stroke = "Blue" StrokeThickness = "3"/> <Rectangle Width = "100" Height = "" Fill = "Yellow" Stroke =" red "StrokeThickness =" 3 "Opacity =" 0.3 "> <Rectangle. renderTransform> <! -- ScaleTransform-scaling and transformation --> <! -- ScaleX-a multiple of zooming in the direction of the X axis. The default value is a multiple of scaling in the ScaleY-Y axis. The default value is 1 CenterX-the X axis coordinate of the zoom center. The default value is 0 CenterY-Y axis coordinate of the zoom center. The default value is 0 --> <ScaleTransform ScaleX = "1.1" ScaleY = "1.3" CenterX = "100" CenterY = "50"/> </Rectangle. renderTransform> </Rectangle> </Grid> <Grid Margin = "400 200 0 0" HorizontalAlignment = "Left" verticalignment = "Top"> <Rectangle Width = "200" Height = ""100" StrokeDashArray = "200" Stroke = "Blue" StrokeThickness = "3"/> <Rectangle Width = "100" Height = "" Fill = "Yellow" Stroke =" red "StrokeThickness =" 3 "Opacity =" 0.3 "> <Rectangle. RenderTransform> <! -- SkewTransform-distortion Transformation (typical application: Simulate 3D depth in two-dimensional objects) --> <! -- CenterX-X axis coordinate of the twist center. The default value is 0 CenterY-Y axis coordinate of the twist center. The default value is 0 AngleX-X axis distortion angle, and Y axis rotates around the origin (counterclockwise ). CenterX does not affect the rendering result of this value. The default value is 0 AngleY-Y axis distortion angle, and the X axis rotates around the origin (clockwise ). CenterY does not affect the rendering result of this value. The default value is 0 --> <SkewTransform AngleX = "30" AngleY = "5" CenterX = "0" CenterY = "0"/> </Rectangle. renderTransform> </Rectangle> </Grid> <Grid Margin = "800 200 0 0" HorizontalAlignment = "Left" verticalignment = "Top"> <Rectangle Width = "200" Height = ""100" StrokeDashArray = "200" Stroke = "Blue" StrokeThickness = "3"/> <Rectangle Width = "100" Height = "" Fill = "Yellow" Stroke =" red "StrokeThickness =" 3 "Opacity =" 0.3 "> <Rec Tangle. RenderTransform> <! -- TransformGroup-composite transformation composed of multiple Transforms --> <TransformGroup> <TranslateTransform X = "100" Y = "10"/> <RotateTransform Angle = "15" CenterX = "100 "CenterY =" 50 "/> </TransformGroup> </Rectangle. renderTransform> </Rectangle> </Grid> <! -- CompositeTransform-combines multiple transformation modes into one CenterX-X coordinate of the center point CenterY-Y coordinate of the center point Rotation-clockwise Rotation angle ScaleX-scaling scale along the X axis-edge zooming ratio on the Y axis SkewX-X axis Twist Angle SkewY-Y axis Twist Angle TranslateX-translation distance along the X axis direction TranslateY-translation distance along the Y axis --> <Grid Margin = "0 400 0 0" HorizontalAlignment = "Left" verticalignment = "Top"> <Rectangle Width = "200" Height = "100" StrokeDashArray = "" Stroke = "Blue" StrokeThickness =" 3 "/> <Rectangle Width =" 200 "Height =" 100 "Fill =" Yellow "Stroke =" Red "StrokeThickness =" 3 "Opacity =" 0.3 "> <Rectangle. renderTransform> <CompositeTransform SkewX = "30" Rotation = "60" ScaleX = "0.6" ScaleY = "0.3"/> </Rectangle. renderTransform> </Rectangle> </Grid> <! -- MatrixTransform- ry matrix transformation | X | M11 (default value: 1) M21 (default value: 0) 0 | Y | = | x y 1 | * | M12 (default value: 0) m22 (default value: 1) 0 | 1 | OffsetX (default value: 0) OffsetY (default value: 0) 1 | X = x * M11 + y * M12 + OffsetX Y = x * M21 + y * M22 + OffsetY Demo of using MatrixTransform for translation, rotation, scaling, and distortion http://www.cnblogs.com/webabcd/archive/2008/11/03/1325150.html --> <Grid Margin = "400 400 0 0" HorizontalAlignment = "Left" verticalignment = "Top"> <Rectangle Width = "200" Height = "100" StrokeDashArray =" stroke = "Blue" StrokeThickness = "3"/> <Rectangle Width = "200" Height = "100" Fill = "Yellow" Stroke = "Red" StrokeThickness = "3" Opacity = "0.3"> <Rectangle. renderTransform> <! -- M11, m12, m21, m22, offsetX, offsetY --> <MatrixTransform Matrix = "1, 0.5, 0, 1, 30, 10"/> </Rectangle. renderTransform> </Rectangle> </Grid> </Page>

Controls/BaseControl/UIElementDemo/RenderTransformDemo. xaml. cs

/** UIElement-UIElement (inherited from DependencyObject, see/Controls/BaseControl/DependencyObjectDemo/) * RenderTransform-2D Transformation (displacement, rotation, scaling, distortion, etc) * RenderTransformOrigin-2D transformation origin (this is a relative value. The upper left corner of the element is 0, 0, and the lower right corner is. Values smaller than 0 or greater than 1 are supported) * ** this example is used to demonstrate the application of 2D transformation of UIElement */using Windows. UI. xaml. controls; namespace Windows10.Controls. baseControl. UIElementDemo {public sealed partial class RenderTransformDemo: Page {public RenderTransformDemo () {this. initializeComponent ();}}}

2. demonstrate the application of Clip of UIElement
Controls/BaseControl/UIElementDemo/ClipDemo. xaml

<Page x: Class = "Windows10.Controls. BaseControl. UIElementDemo. ClipDemo" xmlns =" http://schemas.microsoft.com/winfx/2006/xaml /Presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "Xmlns: local =" using: Windows10.Controls. BaseControl. UIElementDemo "xmlns: d =" http://schemas.microsoft.com/expression/blend/2008 "Xmlns: mc =" http://schemas.openxmlformats.org/markup-compatibility/2006 "Mc: ignorable = "d"> <Grid Background = "Transparent"> <StackPanel Margin = "10 0 10"> <Grid HorizontalAlignment = "Left" verticalignment = "Top"> <Rectangle width = "200" Height = "100" Fill = "Red"/> <Rectangle Width = "200" Height = "100" Fill = "Green"> <! -- Clip-crop the specified area of the UIElement (that is, to make the specified area of the UIElement transparent) Note: currently, you can only crop the UIElement through RectangleGeometry --> <Rectangle. clip> <RectangleGeometry Rect = "10 10 50 50"/> </Rectangle. clip> </Rectangle> </Grid> </StackPanel> </Grid> </Page>

Controls/BaseControl/UIElementDemo/ClipDemo. xaml. cs

/** UIElement-UIElement (inherited from DependencyObject, see/Controls/BaseControl/DependencyObjectDemo/) * Clip-crop the specified area of the UIElement (currently only the UIElement can be cropped through RectangleGeometry) * ** this example is used to demonstrate the Clip application of UIElement */using Windows. UI. xaml. controls; namespace Windows10.Controls. baseControl. UIElementDemo {public sealed partial class ClipDemo: Page {public ClipDemo () {this. initializeComponent ();}}}

OK
[Download source code]