WPF Graphics and Animations

2 D and 3 D Graphics and Animations ,[object Object],[object Object],[object Object],[object Object],[object Object],WPF Graphics and Animations

Table of Contents (2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Introduction to WPF Graphics ,[object Object],[object Object],[object Object],[object Object]

WPF Graphics – Example <DockPanel> <StackPanel DockPanel.Dock="Top" Orientation="Horizontal"> <TextBlock Text="Mix text, " /> <Ellipse Fill="red" Width="40" /> <TextBlock Text=" and " /> <Button>Controls</Button> </StackPanel> <Ellipse DockPanel.Dock="Left" Fill="Yellow" Width="100" /> <Button DockPanel.Dock="Left">z</Button> <TextBlock FontSize="24" TextWrapping="Wrap"> And of course you can put graphics into your text: <Ellipse Fill="Cyan" Width="50" Height="20" /> </TextBlock> </DockPanel>

Introduction to WPF Graphics Live Demo

WPF Drawing Model ,[object Object],[object Object],[object Object],[object Object],[object Object]

WPF Drawing Model –Example <Canvas x:Name="MainCanvas" MouseLeftButtonDown= "mainCanvas_MouseLeftButtonDown"> <Rectangle Canvas.Left="10" Canvas.Top="30" Fill="Indigo" Width="40" Height="20" /> <Rectangle Canvas.Left="20" Canvas.Top="40" Fill="Yellow" Width="40" Height="20" /> <Rectangle Canvas.Left="30" Canvas.Top="50" Fill="Orange" Width="40" Height="20" /> </Canvas> private void MainCanvas_MouseLeftButtonDown (object sender, RoutedEventArgs e) { Rectangle r = e.Source as Rectangle; if (r != null) { r.Width += 10; } }

Resolution Independence, Scaling and Rotation

Resolution Independence ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Resolution Independence (2) ,[object Object],[object Object],[object Object],[object Object],[object Object]

Scaling and Rotation ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Scaling and Rotation (2) ,[object Object],[object Object],[object Object],<Button> <Button.LayoutTransform> <ScaleTransform ScaleX="2" ScaleY="2" /> </Button.LayoutTransform> ...  </Button>

Shapes, Brushes, and Pens ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Shapes, Brushes, and Pens (2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Shapes, Brushes, and Pens (3) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Base Shape Class Properties ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Rectangle ,[object Object],[object Object],[object Object],<Canvas> <Rectangle Fill="Yellow" Stroke="Black" Canvas.Left="30" Canvas.Top="10" Width="100" Height="20" /> </Canvas>

Rectangle (2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Ellipse ,[object Object],[object Object],<Ellipse Width="100" Height="50" Fill="Yellow" Stroke="Black" />

Line ,[object Object],[object Object],[object Object],<StackPanel Orientation="Vertical"> <TextBlock Background="LightGray">Foo</TextBlock> <Line Stroke="Green" X1="20" Y1="10" X2="100" Y2="40" /> <TextBlock Background="LightGray">Bar</TextBlock> <Line Stroke="Green" X1="0" Y1="10" X2="100" Y2="0" /> </StackPanel>

Polyline ,[object Object],[object Object],[object Object],<Polyline Stroke="Blue" Points="0,30 10,30 15,0 18,60 23,30 35,30 40,0 43,60 48,30 160,30" />

Polygon ,[object Object],[object Object],[object Object],<Polyline Fill="Orange" Stroke="Blue" StrokeThickness="2" Points="40,10 70,50 10,50" /> <Polygon Fill="Orange" Stroke="Blue" StrokeThickness="2" Points="40,10 70,50 10,50" />

Polygon (2) ,[object Object],[object Object],[object Object],[object Object],<Polygon Fill="Orange" Stroke="Blue" StrokeThickness="2" FillRule="Nonzero" Points="10,10 60,10 60,25 20,25 20,40 40,40 40,18 50,18 50,50 10,50" />

Path ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Path (2) ,[object Object],[object Object],<Canvas> <Path Fill="Cyan" Stroke="Black"> <Path.Data> <GeometryGroup> <EllipseGeometry Center="20, 40" RadiusX="20" RadiusY="40" /> <EllipseGeometry Center="20, 40" RadiusX="10" RadiusY="30" /> </GeometryGroup> </Path.Data>  </Path> </Canvas>

Path (3) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Arc Segment – Example <Path Fill="Cyan" Stroke="Black"> <Path.Data> <PathGeometry> <PathFigure StartPoint="0,11" IsClosed="True"> <ArcSegment Point="50,61" Size="70,30" SweepDirection="Counterclockwise" /> </PathFigure> <PathFigure StartPoint="30,11" IsClosed="True"> <ArcSegment Point="80,61" Size="70,30" SweepDirection="Clockwise" IsLargeArc="True" /> </PathFigure> </PathGeometry>  </Path.Data> </Path>

Image ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<Image Source="http://www.interact-sw.co.uk/images/M3/BackOfM3.jpeg" /> <Image Source="/MyFunnyImage.jpeg" />

Image (2) ,[object Object],[object Object],[object Object],[object Object],[object Object],<Image Source="/MyFunnyImage.jpeg" Stretch="Fill" Opacity="0.5" />

ImageSource ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Creating Bitmaps ,[object Object],[object Object],RenderTargetBitmap bmp = new RenderTargetBitmap(300,150,300,300, PixelFormats.Pbgra32); Ellipse e = new Ellipse(); e.Fill = Brushes.Green; e.Measure(new Size(96, 48)); e.Arrange(new Rect(0, 0, 96, 48)); bmp.Render(e);

Creating Bitmaps (2) ,[object Object],[object Object],[object Object]

Bitmap Effects ,[object Object],[object Object],[object Object],<StackPanel Orientation="Horizontal"> <StackPanel Orientation="Vertical"> <TextBlock Text="Normal Text" TextAlignment="Center" FontWeight="Bold" /> <RadioButton Content="Better in position 1?" GroupName="r" /> </StackPanel>

Bitmap Effects (2) ,[object Object],[object Object],[object Object],[object Object],[object Object],<StackPanel Orientation="Vertical" Margin="10,0"> <StackPanel.BitmapEffect> <BlurBitmapEffect Radius="3" /> </StackPanel.BitmapEffect> <TextBlock Text="Blurred Text" TextAlignment="Center" FontWeight="Bold" /> <RadioButton Content="Or position 2?" GroupName="r" /> </StackPanel> </StackPanel>

SolidColorBrush ,[object Object],[object Object],[object Object],[object Object],[object Object],<Rectangle Fill="Yellow" Width="100" Height="20" />

LinearGradientBrush ,[object Object],[object Object],[object Object],[object Object]

LinearGradientBrush (2) ,[object Object],[object Object],<Rectangle Width="80" Height="60"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="Blue" Offset="0" /> <GradientStop Color="White" Offset="1" /> </LinearGradientBrush>  </Rectangle.Fill> </Rectangle>

ImageBrush ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

ImageBrush (2) ,[object Object],[object Object],[object Object],[object Object],[object Object]

Pen ,[object Object],[object Object],[object Object],[object Object],[object Object],<Rectangle Stroke="Black" StrokeThickness="5" StrokeDashArray="10 1 3 1" /> <Rectangle Stroke="Black" StrokeThickness="5" StrokeDashArray="6 1 6" />

Transform Classes ,[object Object],[object Object],[object Object],<Button Width="180" Height="60" Canvas.Left="100" Canvas.Top="100">I'm rotated 35 degrees <Button.RenderTransform> <RotateTransform Angle="35" CenterX="45" CenterY="5" /> </Button.RenderTransform> </Button>

Transform Classes ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

A nimation ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Animation – Example <Canvas> <Ellipse Width="200" Height="150" Fill="Orange" x:Name="AnimatedEllipse"> <Ellipse.Triggers> <EventTrigger RoutedEvent="Ellipse.Loaded"> <BeginStoryboard><Storyboard> <DoubleAnimation Storyboard.TargetName="AnimatedEllipse" Storyboard.TargetProperty="(Canvas.Left)" From="-50" To="300" Duration="00:00:0.88" AutoReverse="True" RepeatBehavior="Forever" /> </Storyboard></BeginStoryboard> </EventTrigger> </Ellipse.Triggers> </Ellipse> </Canvas>

WPF Graphics and Animations ,[object Object]

Exercises ,[object Object],[object Object],[object Object],[object Object],[object Object]

Exercises (2) ,[object Object],[object Object],[object Object]

Exercises (3) ,[object Object],[object Object],[object Object]

Exercises (3) ,[object Object],[object Object]

WPF Graphics and Animations

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a WPF Graphics and Animations

Semelhante a WPF Graphics and Animations (20)

Mais de Doncho Minkov

Mais de Doncho Minkov (20)

Último

Último (20)

WPF Graphics and Animations

Notas do Editor