Databases
StackOverflow2013
Postsdbo
POHow to create a custom control to resemble an electronic breadboard using WPF?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to create a custom control to resemble an electronic breadboard using WPF?
    text
    copied!<p>A breadboard is a tool that is used to implement simple electronic circuits, it is a set of nodes used to put ICs on them and connect between them using wires to build the circuit. <a href="http://en.wikipedia.org/wiki/Breadboard" rel="nofollow">Wikipedia</a></p> <p>What I want to do is to make a user control in WPF to be used in a larger application that simulates electronic circuits.</p> <p>The user has to place ICs on that breadboard.</p> <p>The first approach I used is to make the user control with a background image of a breadboard, inside it is a layout container ex: StackPanel (To stack ICs horizontally) with height that covers the central part of the image.</p> <p>and then I made another user control that resembles an IC to be added to the former container, I drew the pins and a black rectangle.</p> <p>Specifically what I want to do now is to make the size of the IC relative to that of the breadboard. meaning that when the size of the breadboard expands or shrinks the IC will remain in the same points it was.</p> <p>This is the XAML code of the Breadboard:</p> <pre><code>&lt;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"&gt; &lt;UserControl.Background&gt; &lt;ImageBrush ImageSource="Images/breadboard.png" Stretch="Uniform"/&gt; &lt;/UserControl.Background&gt; &lt;StackPanel x:Name="LayoutRoot" Orientation="Horizontal" VerticalAlignment="Center" Margin="0" Height="8.835"&gt; &lt;StackPanel.Background&gt; &lt;ImageBrush/&gt; &lt;/StackPanel.Background&gt; &lt;local:IC Margin="0" Width="Auto"/&gt; &lt;/StackPanel&gt; </code></pre> <p></p> <p>This is the XAML code of the IC: </p> <pre><code>&lt;Viewbox Stretch="Fill"&gt; &lt;StackPanel x:Name="LayoutRoot" Height="40" Width="52.833"&gt; &lt;StackPanel x:Name="UpperPins" HorizontalAlignment="Left" Orientation="Horizontal"&gt; &lt;Image Source="Images/pin.png" Stretch="Fill" Width="7" Margin="3,0,0,0"/&gt; &lt;Image Source="Images/pin.png" Stretch="Fill" Width="7" Margin="6,0,0,0"/&gt; &lt;Image Source="Images/pin.png" Stretch="Fill" Width="7" Margin="6,0,0,0"/&gt; &lt;Image Source="Images/pin.png" Stretch="Fill" Width="7" Margin="6,0,3,0"/&gt; &lt;/StackPanel&gt; &lt;Rectangle Fill="Black" Height="36"/&gt; &lt;StackPanel x:Name="LowerPins" HorizontalAlignment="Left" Orientation="Horizontal" RenderTransformOrigin="0.5,0.5"&gt; &lt;StackPanel.RenderTransform&gt; &lt;TransformGroup&gt; &lt;ScaleTransform/&gt; &lt;SkewTransform/&gt; &lt;RotateTransform Angle="180"/&gt; &lt;TranslateTransform/&gt; &lt;/TransformGroup&gt; &lt;/StackPanel.RenderTransform&gt; &lt;Image Source="Images/pin.png" Stretch="Fill" Width="7" Margin="3,0,0,0"/&gt; &lt;Image Source="Images/pin.png" Stretch="Fill" Width="7" Margin="6,0,0,0"/&gt; &lt;Image Source="Images/pin.png" Stretch="Fill" Width="7" Margin="6,0,0,0"/&gt; &lt;Image Source="Images/pin.png" Stretch="Fill" Width="7" Margin="6,0,3,0"/&gt; &lt;/StackPanel&gt; &lt;/StackPanel&gt; &lt;/Viewbox&gt; </code></pre> <p></p> <p>This is the C# code of the IC (The Constructor):</p> <pre><code>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 &lt; (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 } } } </code></pre> <p>I'm using Expression Blend to do the XAML</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload