1

面包板是一种用于实现简单电子电路的工具,它是一组节点,用于将 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

4

2 回答 2

1

创建一个网格,其列和行等于针孔的数量。放置空列/行以说明真实设备中的空列/行。

在每个网格单元格中添加一个网格。在内部网格中创建 3x3 行/列布局。对于第一行和最后一行/列,创建 * Gridlengths 以便您可以调整缓冲区和中间单元格之间的相对大小。

在内部网格的中间单元格中,使用画笔添加一个带有椭圆的矩形(同样,它保持相对)。

这是填充了第一行的 XAML。

<Window x:Class="WpfApplication5.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="579" Width="274">
    <Window.Resources>
        <Style TargetType="{x:Type UserControl}" x:Key="PinHole">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="1*"/>
                                <ColumnDefinition Width="2*"/>
                                <ColumnDefinition Width="1*"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="1*"/>
                                <RowDefinition Height="2*"/>
                                <RowDefinition Height="1*"/>
                            </Grid.RowDefinitions>

                            <Rectangle Grid.Row="1" Grid.Column="1">
                                <Rectangle.Fill>
                                    <DrawingBrush>
                                        <DrawingBrush.Drawing>
                                            <GeometryDrawing Brush="Black">
                                                <GeometryDrawing.Geometry>
                                                    <GeometryGroup>
                                                        <EllipseGeometry Center="1,1" RadiusX="1" RadiusY="1"/>
                                                        <EllipseGeometry Center="1,1" RadiusX=".5" RadiusY=".5"/>
                                                    </GeometryGroup>
                                                </GeometryDrawing.Geometry>
                                            </GeometryDrawing>
                                        </DrawingBrush.Drawing>
                                    </DrawingBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <UserControl Grid.Column="0" Style="{StaticResource ResourceKey=PinHole}"/>
        <UserControl Grid.Column="1" Style="{StaticResource ResourceKey=PinHole}"/>
        <UserControl Grid.Column="3" Style="{StaticResource ResourceKey=PinHole}"/>
        <UserControl Grid.Column="4" Style="{StaticResource ResourceKey=PinHole}"/>
        <UserControl Grid.Column="5" Style="{StaticResource ResourceKey=PinHole}"/>
        <UserControl Grid.Column="6" Style="{StaticResource ResourceKey=PinHole}"/>
        <UserControl Grid.Column="7" Style="{StaticResource ResourceKey=PinHole}"/>
        <UserControl Grid.Column="9" Style="{StaticResource ResourceKey=PinHole}"/>
        <UserControl Grid.Column="10" Style="{StaticResource ResourceKey=PinHole}"/>
        <UserControl Grid.Column="11" Style="{StaticResource ResourceKey=PinHole}"/>
        <UserControl Grid.Column="12" Style="{StaticResource ResourceKey=PinHole}"/>
        <UserControl Grid.Column="13" Style="{StaticResource ResourceKey=PinHole}"/>
        <UserControl Grid.Column="15" Style="{StaticResource ResourceKey=PinHole}"/>
        <UserControl Grid.Column="16" Style="{StaticResource ResourceKey=PinHole}"/>
    </Grid>
</Window>

现在,当您添加 IC 时,将它们分成可视部分(左上角等),并将这些部分排列在右侧网格单元位置,作为一个单元。

在代码中,您可以拥有一个 IC 单元,将其提供给左上角的单元格,然后 IC 的各个部分会将其 Grid.Row 和 Grid.Column 设置到正确的位置。

于 2012-07-11T16:37:02.763 回答
0

将您当前在 IC XAML 中的 Viewbox 向上移动以包围面包板的根 StackPanel。一旦你这样做了,你可以在面包板内的所有东西上使用固定大小,并将 IC 上所需的相对大小也设置为固定大小,Viewbox 将为你处理所有缩放,保持控件的所有内部相对大小不变。

于 2012-07-11T17:47:54.970 回答