第二行内容--组态

换热站：组件位置拼接

这个相对简单，场景单一

三列

        <Grid Grid.Row="1" HorizontalAlignment="Center">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto"/>
                <ColumnDefinition/>
                <ColumnDefinition Width="auto"/>
            </Grid.ColumnDefinitions>
        </Grid>

 

 一、货架

 

5行2列的形式展示，均分，用UniformGrid展示

10个Border设置统一的样式，颜色、粗细、宽、高

                <UniformGrid.Resources>
                    <Style TargetType="Border">
                        <Setter Property="BorderBrush" Value="#BA9C5A"/>
                        <Setter Property="BorderThickness" Value="2"/>
                        <Setter Property="Width" Value="20"/>
                        <Setter Property="Height" Value="60"/>
                    </Style>
                </UniformGrid.Resources>

画线X

统一处理Background，可以画一个颜色，也可以画一个对象

背景色：<SolidColorBrush Color="#E7E7E7"/>

对象：画线填充

                        <Setter Property="Background">
                            <Setter.Value>
                                <VisualBrush>
                                    <VisualBrush.Visual>
                                        <Path Data="M0,0 10,10M10 0 0 10" Stroke="#BA9C5A" StrokeThickness="2"/>
                                    </VisualBrush.Visual>
                                </VisualBrush>
                            </Setter.Value>
                        </Setter>

 

右侧货架同样

设置为：Grid.Column="2"

 

 

中间组态

中间列又分为三行

 

二、导轨

 

图片不如渲染的线好

 背景填充

VisualBrush：可视画刷

先画一个

正方形中间是一个圆，压扁了

                <!--机器人导轨-->
                <Border Width="720" Height="26" Grid.Row="1">
                    <Border.Background>
                        <VisualBrush>
                            <VisualBrush.Visual>
                                <Border Width="20" Height="20" Background="#AA646464" BorderThickness="1" BorderBrush="White">
                                    <Ellipse Width="18" Height="18" Fill="#E7E7E7"/>
                                </Border>
                            </VisualBrush.Visual>
                        </VisualBrush>
                    </Border.Background>
                </Border>

对象填充的模式是什么

自动填充，

从0，1开始，大小为30,13

本来20*20，按照30来显示，上下10高度

绝对尺寸来处理

还有相对的，%百分比来处理

VisualBrush设置

<VisualBrush TileMode="Tile" Viewport="0,0,30,13" ViewportUnits="Absolute">

 

三、设备

一行5个设备均分

添加图片

<Image Source="../Assets/Images/m.png" Width="85"/>

设置属性--生成操作---资源 

 上面标题

三部分，左尖角、中border 、右尖角

Border文字

下面图片

StackPanel默认就是自上而下

                    <StackPanel Margin="10,0">
                        <Grid Margin="0,10">
                            <Path Data="M10 0 0 10 10 20" Fill="White" HorizontalAlignment="Left"/>
                            <Path Data="M0 0 10 10 0 20" Fill="White" HorizontalAlignment="Right"/>
                            <Border Background="White" Margin="10,0" Height="20"/>
                            <TextBlock Text="设备1 - 4001000121" Margin="15,0" VerticalAlignment="Center" FontSize="10"/>
                        </Grid>
                        <Image Source="../Assets/Images/m.png" Width="85"/>
                    </StackPanel>

第三行

图片在上、标题在下

 

四、机械臂

一层层嵌套，联动的，一共4个图片，放到文件夹../Assets/Images/arm/a4.png 两点是向上一层目录，属性设置为资源生成

动外层的时候，里面的跟着联动

 

底座

<Canvas Grid.Row="1" VerticalAlignment="Bottom" HorizontalAlignment="Right">

　　<Image Source="../Assets/Images/arm/a4.png" Width="50" Canvas.Right="0" Canvas.Bottom="0" />

图片设置为右下角

设置元素距Canvas左边界的距离 Canvas.Right="0"

设置元素距Canvas下边界的距离 Canvas.Bottom="0"

 

第一节位置

因为后面的元素都要跟着一起动，所以不能只调整图片，要调整Canvas

                <Canvas Grid.Row="1" VerticalAlignment="Bottom" HorizontalAlignment="Right">
                    <Canvas.RenderTransform>
                        <TranslateTransform X="0" x:Name="tt"/>
                    </Canvas.RenderTransform>
                    <Image Source="../Assets/Images/arm/a4.png" Width="50" Canvas.Right="0" Canvas.Bottom="0" /><!--底座-->
                    <Canvas Canvas.Left="-32" Canvas.Bottom="60">
                        <Canvas.RenderTransform>
                            <RotateTransform Angle="-30" CenterX="10.9" CenterY="15.2" x:Name="rt1"/>
                        </Canvas.RenderTransform>

                        <Canvas Canvas.Left="70.1" Canvas.Top="12.9">
                            <Canvas.RenderTransform>
                                <RotateTransform Angle="80" CenterX="0" CenterY="7" x:Name="rt2"/>
                            </Canvas.RenderTransform>

                            <Image Source="../Assets/Images/arm/a2.png" Height="17"/><!--第三节-->
                            <Canvas Canvas.Left="64" Canvas.Top="3">
                                <Canvas.RenderTransform>
                                    <RotateTransform Angle="30" CenterX="4.2" CenterY="4.5" x:Name="rt3"/>
                                </Canvas.RenderTransform>
                                <Image Source="../Assets/Images/arm/a1.png" Height="10"/><!--第二节-->
                            </Canvas>
                        </Canvas>
                        <Image Source="../Assets/Images/arm/a3.png" Height="30"/><!--第一节-->
                    </Canvas>
                </Canvas>

 底座

通过变形来处理

Canvas.RenderTransform

TranslateTransform  左右位移 只能X轴动，水平方向，-100向左移动100

第二节

RotateTransform 的 CenterX 和 CenterY 属性指定对象旋转的点。 此中心点以转换的元素的坐标空间表示。 默认情况下，将围绕着要转换的对象的左上角 (0,0) 进行旋转。

-45，逆时针选转45度，左上角方向

旋转中心确定：CenterX="10.9" CenterY="15.2"

中心确定之后，Angle移动会跟着移动，0为与父对象平行同一方向，顺时针增加，90垂直，180反向，270与90反向,360一圈

第三节、四，同样

只不过旋转中心不一样

 

 

关键点安排动画，固定路线运行