文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何使用WPF创建一个类似于电子工作板的自定义控件？

问如何使用WPF创建一个类似于电子工作板的自定义控件？
EN

Stack Overflow用户
提问于 2012-07-12 00:20:06
回答 2查看 375关注 0票数 1

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

我想做的是在WPF中制作一个用户控件，用于模拟电子电路的更大的应用程序。

用户必须将IC放置在该电路板上。

我使用的第一种方法是让用户控件带有一个面包板的背景图像，里面是一个布局容器ex: StackPanel (用于水平堆叠is )，高度覆盖了图像的中心部分。

然后我制作了另一个用户控件，它类似于要添加到以前的容器中的IC，我绘制了引脚和一个黑色矩形。

具体地说，我现在想要做的是使IC的大小相对于电路板的大小。这意味着，当路板的尺寸扩大或缩小时，IC将保持在原来的位置。

下面是Breadboard的XAML代码：

代码语言：javascript
复制
<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代码：

代码语言：javascript
复制
<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#代码：

代码语言：javascript
复制
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

wpf
expression-blend
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-07-12 00:37:03

创建栅格，其列数和行数等于销孔数。放置空列/行以说明实际设备中的空列/行。

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

在内部网格的中间单元格中，使用画笔添加一个带椭圆的矩形(因此，它仍然是相对的)。

这是填充了第一行的XAML。

代码语言：javascript
复制
<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
EN

Stack Overflow用户

发布于 2012-07-12 01:47:55

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/11437029

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档