ブレッドボードは、単純な電子回路を実装するために使用されるツールであり、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 を実行しています