一 引入
在设计设备界面时,经常会有一种需求,展示一个阀门,阀门有通断两种状态:
二 CommonValveControl
考虑实现一个自定义控件,CommonValveControl。
使用自定义控件比用户控件更灵活,更具扩展性,可以使用不同的样式和模板。
CommonValveControl定义两个依赖属性,Orientation表示安装展示的方向,Status表示阀门的通断状态。
public class CommonValveControl : Control
{
static CommonValveControl()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(CommonValveControl), new FrameworkPropertyMetadata(typeof(CommonValveControl)));
}
public bool Status
{
get => (bool)GetValue(StatusProperty);
set => SetValue(StatusProperty, value);
}
public static readonly DependencyProperty StatusProperty = DependencyProperty.Register(
"Status",
typeof(bool),
typeof(CommonValveControl));
public Orientation ValveOrientation
{
get => (Orientation)GetValue(CommonValveOrientationProperty);
set => SetValue(CommonValveOrientationProperty, value);
}
public static readonly DependencyProperty CommonValveOrientationProperty = DependencyProperty.Register(
"ValveOrientation",
typeof(Orientation),
typeof(CommonValveControl));
}
设计CommonValveControl的样式模板,可通过设计不同的模板,以呈现出不同的效果。
通过ValveOrientation属性触发切换阀门的竖直状态和水平状态。
<Style TargetType="{x:Type local:CommonValveControl}">
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:CommonValveControl}">
<Viewbox Stretch="Fill">
<Grid>
<Canvas Width="40" Height="40" >
<Ellipse Height="40" Width="40" Fill="Gray"/>
<Ellipse x:Name="InnerEllipse" Height="30" Width="30" Canvas.Left="5" Canvas.Top="5"
<Rectangle x:Name="Rectangle" Fill="White" RadiusX="2" RadiusY="2"/>
</Canvas>
</Grid>
</Viewbox>
<ControlTemplate.Triggers>
<Trigger Property="Status" Value="false">
<Setter TargetName="InnerEllipse" Property="Fill" Value="Red"/>
</Trigger>
<Trigger Property="Status" Value="true">
<Setter TargetName="InnerEllipse" Property="Fill" Value="Green"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="ValveOrientation" Value="Horizontal"/>
<Condition Property="Status" Value="false"/>
</MultiTrigger.Conditions>
<Setter TargetName="Rectangle" Property="Width" Value="6"/>
<Setter TargetName="Rectangle" Property="Height" Value="30"/>
<Setter TargetName="Rectangle" Property="Canvas.Left" Value="17"/>
<Setter TargetName="Rectangle" Property="Canvas.Top" Value="5"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="ValveOrientation" Value="Horizontal"/>
<Condition Property="Status" Value="true"/>
</MultiTrigger.Conditions>
<Setter TargetName="Rectangle" Property="Width" Value="30"/>
<Setter TargetName="Rectangle" Property="Height" Value="6"/>
<Setter TargetName="Rectangle" Property="Canvas.Left" Value="5"/>
<Setter TargetName="Rectangle" Property="Canvas.Top" Value="17"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="ValveOrientation" Value="Vertical"/>
<Condition Property="Status" Value="false"/>
</MultiTrigger.Conditions>
<Setter TargetName="Rectangle" Property="Width" Value="30"/>
<Setter TargetName="Rectangle" Property="Height" Value="6"/>
<Setter TargetName="Rectangle" Property="Canvas.Left" Value="5"/>
<Setter TargetName="Rectangle" Property="Canvas.Top" Value="17"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="ValveOrientation" Value="Vertical"/>
<Condition Property="Status" Value="true"/>
</MultiTrigger.Conditions>
<Setter TargetName="Rectangle" Property="Width" Value="6"/>
<Setter TargetName="Rectangle" Property="Height" Value="30"/>
<Setter TargetName="Rectangle" Property="Canvas.Left" Value="17"/>
<Setter TargetName="Rectangle" Property="Canvas.Top" Value="5"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
三 效果演示
Xaml代码:
<Canvas>
<local:PipeControl Width="106" Height="14" Canvas.Left="26" Canvas.Top="53"/>
<local:PipeControl Width="14" Height="80" Canvas.Left="185" Canvas.Top="22" Orientation="Vertical"/>
<local:CommonValveControl x:Name="valve1" Status="False" ValveOrientation="Horizontal" Width="40" Height="40" Canvas.Left="60" Canvas.Top="41"/>
<local:CommonValveControl x:Name="valve2" Status="False" ValveOrientation="Vertical" Width="40" Height="40" Canvas.Left="172" Canvas.Top="41"/>
<Button Content="Open" Click="OpenButton_Click" Canvas.Left="272" Canvas.Top="15" Width="66" Height="35"/>
<Button Content="Close" Click="CloseButton_Click" Canvas.Left="272" Canvas.Top="71" Width="66" Height="35"/>
</Canvas>
后台代码:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void OpenButton_Click(object sender, RoutedEventArgs e)
{
valve1.Status = true;
valve2.Status = true;
}
private void CloseButton_Click(object sender, RoutedEventArgs e)
{
valve1.Status = false;
valve2.Status = false;
}
}