SWRIS-HD/Controls/RopeEquipmentControl.xaml

<UserControl x:Class="SWRIS.Controls.RopeEquipmentControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:SWRIS.Controls" 
             xmlns:cvt="clr-namespace:SWRIS.Converters"
             mc:Ignorable="d"  x:Name="Root"
             d:DesignHeight="900" d:DesignWidth="300">
    <UserControl.Resources>
        <Storyboard x:Key="RopeAnimation" RepeatBehavior="Forever">
            <RectAnimation Storyboard.TargetName="RopeRectangle" 
                           Storyboard.TargetProperty="Viewport"
                           Duration="0:0:0.5"/>
        </Storyboard>
        <cvt:LimitStateToColorConverter x:Key="LimitStateToColorConverter"/>
        <cvt:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter"/>
    </UserControl.Resources>
    <Grid Margin="0,0,30,0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0" Orientation="Vertical" Margin="{Binding PanelMargin,ElementName=Root}">
            <ItemsControl ItemsSource="{Binding Limits}" HorizontalAlignment="Right" Margin="-10,-10,0,10">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Border Visibility="{Binding IsEnable,Converter={StaticResource BoolToVisibilityConverter}}"
                                Background="{Binding State,Converter={StaticResource LimitStateToColorConverter},ConverterParameter=0.20}" 
                                MinWidth="80" Height="24" CornerRadius="11" Margin="5,0,0,0">
                            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
                                <Ellipse Height="10" Width="10" Margin="0,0,5,0" Fill="{Binding State,Converter={StaticResource LimitStateToColorConverter}}"/>
                                <TextBlock Text="{Binding Name}" Foreground="{Binding State,Converter={StaticResource LimitStateToColorConverter}}"
                                           FontSize="14" FontWeight="Regular" VerticalAlignment="Center"/>
                            </StackPanel>
                        </Border>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
            <TextBlock Text="检测位置" Foreground="#7886B2" FontSize="{Binding PanelNameFontSize,ElementName=Root}" 
                       FontWeight="Regular" HorizontalAlignment="Right" Visibility="Visible"/>
            <TextBlock FontSize="{Binding PanelValueFontSize,ElementName=Root}" FontWeight="Bold" FontFamily="{StaticResource PuHuiTiBold}"
                       Margin="-30,-3,0,0" HorizontalAlignment="Right" Visibility="Visible">
                <Run Text="{Binding AbsolutePosition,StringFormat=#0.00}"/>
                <Run Text="m"/>
            </TextBlock>
            <TextBlock Text="检测速度" Foreground="#7886B2" FontSize="{Binding PanelNameFontSize,ElementName=Root}" 
                       FontWeight="Regular" HorizontalAlignment="Right"/>
            <TextBlock FontSize="{Binding PanelValueFontSize,ElementName=Root}" FontWeight="Bold" FontFamily="{StaticResource PuHuiTiBold}"
                       Margin="-30,-3,0,0" HorizontalAlignment="Right">
                <Run Text="{Binding Speed,StringFormat=#0.00}"/>
                <Run Text="m/min"/>
                <TextBlock.Style>
                    <Style TargetType="TextBlock">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding IsSpeedStable}" Value="False">
                                <Setter Property="Foreground" >
                                    <Setter.Value>
                                        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                            <GradientStop Color="#FFFFFF" Offset="0.45"/>
                                            <GradientStop Color="#FF6C00" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </TextBlock.Style>
            </TextBlock>
        </StackPanel>
        <Canvas Grid.Column="1">
            <Rectangle Width="40" Height="{Binding RopeHeight,ElementName=Root}" Canvas.Left="30">
                <Rectangle.Fill>
                    <ImageBrush x:Name="RopeRectangle" ImageSource="{Binding RopeImageSource,ElementName=Root}" TileMode="FlipX" Viewport="0,0,40,34" 
                         ViewportUnits="Absolute"/>
                </Rectangle.Fill>
            </Rectangle>
            <Canvas Canvas.Top="{Binding EquipmentTopPosition,ElementName=Root}">
                <Image Width="90" Canvas.Left="5">
                    <Image.Style>
                        <Style TargetType="Image">
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding IsAlerting}" Value="False">
                                    <Setter Property="Source" Value="/Resources/blue_bg.png"/>
                                </DataTrigger>
                                <DataTrigger Binding="{Binding IsAlerting}" Value="True">
                                    <Setter Property="Source" Value="/Resources/red_bg.png"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Image.Style>
                </Image>
                <Image Source="{Binding EquipmentImageSource,ElementName=Root}" Width="100" Canvas.Top="70"/>
            </Canvas>
        </Canvas>
    </Grid>
</UserControl>