面包板是一种用于实现简单电子电路的工具,它是一组节点,用于将 IC 放在它们上面并使用电线在它们之间连接以构建电路。 维基百科
我想要做的是在 WPF 中制作一个用户控件,以便在模拟电子电路的更大应用程序中使用。
用户必须在该面包板上放置 IC。
我使用的第一种方法是使用面包板的背景图像进行用户控制,其中包含一个布局容器,例如:StackPanel(水平堆叠 IC),高度覆盖图像的中心部分。
然后我制作了另一个类似于 IC 的用户控件,将其添加到前一个容器中,我画了引脚和一个黑色矩形。
具体来说,我现在要做的是使 IC 的尺寸相对于面包板的尺寸。这意味着当面包板的尺寸扩大或缩小时,IC 将保持在原来的位置。
这是面包板的 XAML 代码:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Breadboard"
mc:Ignorable="d"
x:Class="Breadboard.MainControl"
x:Name="UserControl" d:DesignWidth="91.583" Width="Auto" d:DesignHeight="26.501" Padding="0">
<UserControl.Background>
<ImageBrush ImageSource="Images/breadboard.png" Stretch="Uniform"/>
</UserControl.Background>
<StackPanel x:Name="LayoutRoot" Orientation="Horizontal" VerticalAlignment="Center" Margin="0" Height="8.835">
<StackPanel.Background>
<ImageBrush/>
</StackPanel.Background>
<local:IC Margin="0" Width="Auto"/>
</StackPanel>
这是 IC 的 XAML 代码:
<Viewbox Stretch="Fill">
<StackPanel x:Name="LayoutRoot" Height="40" Width="52.833">
<StackPanel x:Name="UpperPins" HorizontalAlignment="Left" Orientation="Horizontal">
<Image Source="Images/pin.png" Stretch="Fill" Width="7" Margin="3,0,0,0"/>
<Image Source="Images/pin.png" Stretch="Fill" Width="7" Margin="6,0,0,0"/>
<Image Source="Images/pin.png" Stretch="Fill" Width="7" Margin="6,0,0,0"/>
<Image Source="Images/pin.png" Stretch="Fill" Width="7" Margin="6,0,3,0"/>
</StackPanel>
<Rectangle Fill="Black" Height="36"/>
<StackPanel x:Name="LowerPins" HorizontalAlignment="Left" Orientation="Horizontal" RenderTransformOrigin="0.5,0.5">
<StackPanel.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="180"/>
<TranslateTransform/>
</TransformGroup>
</StackPanel.RenderTransform>
<Image Source="Images/pin.png" Stretch="Fill" Width="7" Margin="3,0,0,0"/>
<Image Source="Images/pin.png" Stretch="Fill" Width="7" Margin="6,0,0,0"/>
<Image Source="Images/pin.png" Stretch="Fill" Width="7" Margin="6,0,0,0"/>
<Image Source="Images/pin.png" Stretch="Fill" Width="7" Margin="6,0,3,0"/>
</StackPanel>
</StackPanel>
</Viewbox>
这是 IC(构造函数)的 C# 代码:
namespace Breadboard{
public partial class IC : UserControl
{
public IC(int pins)
{
if (pins % 2 != 0) throw new OddNumberOfPins();
this.InitializeComponent();
Width = (pins/2)*(6 + 7);
UpperPins.Children.Clear();
LowerPins.Children.Clear();
UpperPins.Children.Add(new Image() { Source = new BitmapImage(new Uri(@"Images/pin.png",UriKind.Relative)), Stretch = Stretch.Fill, Width = 7, Margin = new Thickness(3, 0, 0, 0) });
LowerPins.Children.Add(new Image() { Source = new BitmapImage(new Uri(@"Images/pin.png", UriKind.Relative)), Stretch = Stretch.Fill, Width = 7, Margin = new Thickness(3, 0, 0, 0) });
for (int i = 0; i < (pins/2)-2; i++)
{
UpperPins.Children.Add(new Image() { Source = new BitmapImage(new Uri(@"Images/pin.png", UriKind.Relative)), Stretch = Stretch.Fill, Width = 7, Margin = new Thickness(6, 0, 0, 0) });
LowerPins.Children.Add(new Image() { Source = new BitmapImage(new Uri(@"Images/pin.png", UriKind.Relative)), Stretch = Stretch.Fill, Width = 7, Margin = new Thickness(6, 0, 0, 0) });
}
UpperPins.Children.Add(new Image() { Source = new BitmapImage(new Uri(@"Images/pin.png", UriKind.Relative)), Stretch = Stretch.Fill, Width = 7, Margin = new Thickness(6, 0, 3, 0) });
LowerPins.Children.Add(new Image() { Source = new BitmapImage(new Uri(@"Images/pin.png", UriKind.Relative)), Stretch = Stretch.Fill, Width = 7, Margin = new Thickness(6, 0, 3, 0) });
}
public IC():this(6)
{
}
}
public class OddNumberOfPins : Exception
{
public OddNumberOfPins()
{
//TODO
}
}
}
我正在使用 Expression Blend 来执行 XAML