如何使用WPF创建类似电子面包板的自定义控件？

时间：2012-07-11 16:20:06

标签： wpf expression-blend electronics

面包板是一种用于实现简单电子电路的工具，它是一组节点，用于将IC放在它们上面，并使用导线连接它们来构建电路。 Wikipedia

我想要做的是让WPF中的用户控件用于模拟电子电路的大型应用程序。

用户必须在该面包板上放置IC。

我使用的第一种方法是使用面包板的背景图像进行用户控制，其中是布局容器ex：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

2 个答案:

答案 0 :(得分：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设置为正确的位置。

答案 1 :(得分：0)

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

相关问题
最新问题