当前位置：网站首页 / WPF / 正文

【ay wpf markup】AY XAML应该这样玩-写个复杂的绘图【12/18】

时间：2016年07月22日 | 作者 : aaronyang | 分类 : WPF | 浏览: 1913次 | 评论 0 人

    <Grid Name="LayoutRoot">
        <Grid.Resources>
            <p:ResourceObject x:Key="ViewModel">
                <p:Property PropertyName="ControlPoints">
                    <p:Collection>
                        <p:Path>[] { X = 50., Y = 50. }</p:Path>
                        <p:Path>[] { X = 100., Y = 100. }</p:Path>
                        <p:Path>[] { X = 50., Y = 150. }</p:Path>
                    </p:Collection>
                </p:Property>
                <p:Property PropertyName="Segments">
                    <p:Collection>
                        <p:Path>[] { Start = @this.ControlPoints[0], End = @this.ControlPoints[1] }</p:Path>
                        <p:Path>[] { Start = @this.ControlPoints[1], End = @this.ControlPoints[2] }</p:Path>
                    </p:Collection>
                </p:Property>
            </p:ResourceObject>
        </Grid.Resources>
        <Grid.DataContext>
            <Binding Path="Value" Source="{StaticResource ViewModel}"/>
        </Grid.DataContext>
        <Grid.Background>
            <DrawingBrush x:Name="GridBrush" Viewport="0,0,10,10" ViewportUnits="Absolute" TileMode="Tile">
                <DrawingBrush.Drawing>
                    <DrawingGroup>
                        <GeometryDrawing Brush="#CCCCFF">
                            <GeometryDrawing.Geometry>
                                <RectangleGeometry Rect="0,0 10,1"/>
                            </GeometryDrawing.Geometry>
                        </GeometryDrawing>
                        <GeometryDrawing Brush="#CCCCFF">
                            <GeometryDrawing.Geometry>
                                <RectangleGeometry Rect="0,0 1,10"/>
                            </GeometryDrawing.Geometry>
                        </GeometryDrawing>
                    </DrawingGroup>
                </DrawingBrush.Drawing>
            </DrawingBrush>
        </Grid.Background>
        <ItemsControl ItemsSource="{Binding Segments}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Line X1="{Binding Start.X}" Y1="{Binding Start.Y}"
                          X2="{Binding End.X}" Y2="{Binding End.Y}"
                          Stroke="Black" StrokeThickness="2"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
        <ItemsControl ItemsSource="{Binding ControlPoints}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemContainerStyle>
                <Style TargetType="ContentPresenter">
                    <Setter Property="Canvas.Left" Value="{Binding X}"/>
                    <Setter Property="Canvas.Top" Value="{Binding Y}"/>
                </Style>
            </ItemsControl.ItemContainerStyle>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Ellipse Margin="-10,-10,0,0" Width="20" Height="20"
                             Stroke="DarkBlue" Fill="Transparent">
                        <p:Attached.Operations>
                            <p:CallHandler Path="MouseLeftButtonDown => @AssociatedObject.CaptureMouse()"/>
                            <p:CallHandler Path="MouseLeftButtonUp => @AssociatedObject.ReleaseMouseCapture()"/>
                            <p:ScriptHandler Path="MouseMove">
                                if (@EventArgs.LeftButton != [MouseButtonState].Pressed) return;
                                var $mouse = @EventArgs.GetPosition(@FindElement("LayoutRoot"));
                                X = $mouse.X; Y = $mouse.Y;
                            </p:ScriptHandler>
                        </p:Attached.Operations>
                    </Ellipse>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>

效果图：