如何使用 XAML 和 Visual Basic 设计这种类型的形状? [英] How to design this type of shape using XAML and Visual Basic?

问题描述

[

我想在 XAML Visual Studio 中创建那些白色表单.
有什么想法吗?

解决方案

要绘制这些 Vector，在 XAML 中可以使用

1) 将该位图转换为矢量:路径、光栅化位图、...
2) 编辑它，...
3) 文件、另存为、Microsoft XAML
4) 打开生成文件并粘贴到Visual Studio 2017编辑器中；

<网格><网格.背景><LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"><GradientStop Color="#FFE6AC59" Offset="0"/><GradientStop Color="#FFFF1E1E" Offset="1"/></LinearGradientBrush></Grid.Background><Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 宽度="100" 高度="100"><画布名称="svg3822" 宽​​度="210" 高度="297"><Canvas.RenderTransform><TranslateTransform X="0" Y="0"/></Canvas.RenderTransform><Canvas.Resources/><!--Unknown tag: sodipodi:namedview--><!--未知标签:元数据--><画布名称="layer1"><Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path4025" Fill="#FFFCFEFF" StrokeThickness="0.26458335"><路径.数据><图的PathGeometry =M 42.061778 123.33022Ç38.576679 122.35853 32.038253 118.75737 27.071139 115.07385 23.718761 112.58778 16.822095 105.65681 14.257335 102.1963 6.5571152 91.806787 1.7592052 78.411137 1.9254052 67.765887Ç0.0272 -1.74409 -0.0611 -2.380282 -0.37389 -2.69308 -0.51193 -0.51193 -0.51117 -0.6481 0.007  -1.165736 0.258 -0.257995 0.35748 -0.649222 0.26192 -1.029986 -0.0924 -0.368065 0.12586 -1.313312 0.5449 -2.360052 -2.799784 1.12083 3.84057 -5.415661 6.49394 -6.245939 1.3518498 -0.423016 4.4187098 -0.452398 5.7392198 -0.05499 3.551206 1.068758 6.70829 4.576398 7.344838 8.160396 0.103382 0.582083 0.230213 2.248958 0.281845 3.7041670.138072 3.89146 0.384522 5.93135 1.006919 8.33437 2.052096 7.92299 6.256227 15.36222 11.688753 20.68332 3.187216 3.12184 6.61611 5.527983 11.135866 7.814313 2.24169 1.13396 4.518581 2.43744 5.059757 2.89662 1.400894 1.18863 2.443634 2.80132 3.078834 4.76169 0.46687 1.44089 0.51903 2.01882 0.34485 3.82061 -0.25447 2.63231 -0.87277 4.06529-2.51279 5.8236 -1.693286 1.81542 -2.835447 2.50227 -5.226648 3.14306 -2.340102 0.62711 -2.38973 0.682"-Zero"-87260" -87260"</Path.Data></路径><Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path4023" Fill="#FFFCFEFF" StrokeThickness="0.26458335"><路径.数据><图的PathGeometry =米82.236775 123.25912Ç-0.58208 -0.18314 -1.35284 -0.49127 -1.7128 -0.68473 -1.25967 -0.67701 -3.4067 -2.96125 -4.06189 -4.32148 -0.9729 -2.01982 -1.54798 -4.52249 -1.23086 -5.35657 0.14227 -0.3742 0.25867-0.90628 0.25867 -1.18239 0 -1.13132 1.12814 -3.40497 2.3944 -4.82569 1.16225 -1.30401 1.83797 -1.74561 5.12774 -3.35112 8.02469 -3.916313 13.50025 -8.579943 17.973035 -15.307963 2.79657 -4.20664 5.38875 -10.40151 6.38932 -15.26939 0.57842 -2.81406 0.76211 -4.93595 0.7444 -8.598958-0.0287 -5.933258 -0.61813 -9.307883 -2.64455 -15.13998 -0.85934 -2.473225 -0.91995 -2.854381 -0.82805 -5.207513 0.11967 -3.063841 0.69224 -4.436248 2.71535 -6.508446 1.56187 -1.599756 2.78857 -2.289144 5.23177 -2.940164 1.66346 -0.443249 1.83172 -0.443124 3.68493 0.00282.54121 0.611412 4.23547 1.557422 5.69338 3.178968 1.50191 1.670482 1.92462 2.511468 3.2397 6.445465 1.42777 4.27106 2.75533 10.610916 3.0599 14.612665 0.23889 3.138781 0.10306 11.185143 -0.2233 13.229163 -1.47554 9.24115 -2.71144 13.36862 -6.13993 20.50521 -4.77746 9.944543 -13.37345 19.416203 -23.327965 25.704403 -2.65952 1.67999 -8.69129 4.67736 -10.25783 5.09741 -1.40948 0.37794 -4.76791 0.33288 -6.08542 -0.0816 Z" FillRule = 非零" 的/></Path.Data></路径><Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path3941" Fill="#FFFCFEFF" StrokeThickness="0.26458335"><路径.数据><图的PathGeometry =米26.674264 36.719701Ç-0.14552 -0.0455 -0.922229 -0.276831 -1.72602 -0.514059 -3.146504 -0.928647 -5.934189 -3.658145 -6.922785 -6.778286 -0.611694 -1.930577 -5.174713 -0.4243 0.40333 -6.982495 1.837946 -4.014604 10.691461  -11.021396 19.093393 -15.1107744 5.5241 -2.688682 10.715085 -4.39665 16.801045 -5.527977 2.170785 -0.403532 2.118605 -0.397382 4.276755 -0.504067 0.824253 -0.04075 1.668643 -0.215175 1.876433 -0.38761995 0.20778 -0.172446 0.45302 -0.238301 0.54498 -0.146345 0.092 0.09196 2.22413 0.200832 4.73816 0.24194495 4.40497 0.07204 6.16602 0.1759078.14284 0.48028 0.50933 0.07842 1.30226 0.19999 1.76207 0.270154 3.14152 0.479375 9.60749 2.347464 13.16714 3.804131 3.52601 1.442903 6.29888 4.226268 6.9118 6.9379564 0.39076 1.728823 0.42916 1.983605 0.43869 2.910417 0.0449 4.37358 -3.279 8.579432 -7.77025 9.831912 -1.56712 0.437023 -4.10179 0.386982 -5.38132 -0.106244 -5.39256 -2.078701 -9.69044-3.228837 -13.09688 -3.50479 -1.64622 -0.13336 -8.10417 -0.142675 -9.39271 -0.01355 -1.59144 0.159483 -5.302283 0.882266 -7.566118 1.473702 -5.407586 1.412751 -11.783415 4.927495 -16.381384 9.03041 -1.196779 1.067927 -2.603479 2.271744 -3.125996 2.675149 -1.496391 1.155277 -5.563138 2.304777 -6.793173 1.920151 Z" FillRule = 非零" 的/></Path.Data></路径></画布></画布></视图框></网格></窗口>

给出这个结果:

[

I wanna create those white forms in XAML Visual Studio.
Any idea?

解决方案

To draw these Vector, in XAML you can use Path
You can use some Vector Drawing Software to generate it.

I made a quick try here, using Inkscape:

1) Converted that Bitmap to Vector: Path, Rasterize Bitmap, ...
2) Edit it, ...
3) File, Save As, Microsoft XAML
4) Open the generate file and paste into Visual Studio 2017 editor;

<Window x:Class="MainWindow"
        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:VBWpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="200" Width="320">
    <Grid>
        <Grid.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFE6AC59" Offset="0"/>
                <GradientStop Color="#FFFF1E1E" Offset="1"/>
            </LinearGradientBrush>
        </Grid.Background>
        <Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Width="100" Height="100">
            <Canvas Name="svg3822" Width="210" Height="297">
                <Canvas.RenderTransform>
                    <TranslateTransform X="0" Y="0"/>
                </Canvas.RenderTransform>
                <Canvas.Resources/>
                <!--Unknown tag: sodipodi:namedview-->
                <!--Unknown tag: metadata-->
                <Canvas Name="layer1">
                    <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path4025" Fill="#FFFCFEFF" StrokeThickness="0.26458335">
                        <Path.Data>
                            <PathGeometry Figures="M 42.061778 123.33022 C 38.576679 122.35853 32.038253 118.75737 27.071139 115.07385 23.718761 112.58778 16.822095 105.65681 14.257335 102.1963 6.5571152 91.806787 1.7592052 78.411137 1.9254052 67.765887 c 0.0272 -1.74409 -0.0611 -2.380282 -0.37389 -2.69308 -0.51193 -0.51193 -0.51117 -0.6481 0.007 -1.165736 0.258 -0.257995 0.35748 -0.649222 0.26192 -1.029986 -0.0924 -0.368065 0.12586 -1.313312 0.5449 -2.360052 1.12083 -2.799784 3.84057 -5.415661 6.49394 -6.245939 1.3518498 -0.423016 4.4187098 -0.452398 5.7392198 -0.05499 3.551206 1.068758 6.70829 4.576398 7.344838 8.160396 0.103382 0.582083 0.230213 2.248958 0.281845 3.704167 0.138072 3.89146 0.384522 5.93135 1.006919 8.33437 2.052096 7.92299 6.256227 15.36222 11.688753 20.68332 3.187216 3.12184 6.61611 5.527983 11.135866 7.814313 2.24169 1.13396 4.518581 2.43744 5.059757 2.89662 1.400894 1.18863 2.443634 2.80132 3.078834 4.76169 0.46687 1.44089 0.51903 2.01882 0.34485 3.82061 -0.25447 2.63231 -0.87277 4.06529 -2.51279 5.8236 -1.693286 1.81542 -2.835447 2.50227 -5.226648 3.14306 -2.340102 0.62711 -2.38973 0.62681 -4.738407 -0.028 z" FillRule="NonZero"/>
                        </Path.Data>
                    </Path>
                    <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path4023" Fill="#FFFCFEFF" StrokeThickness="0.26458335">
                        <Path.Data>
                            <PathGeometry Figures="m 82.236775 123.25912 c -0.58208 -0.18314 -1.35284 -0.49127 -1.7128 -0.68473 -1.25967 -0.67701 -3.4067 -2.96125 -4.06189 -4.32148 -0.9729 -2.01982 -1.54798 -4.52249 -1.23086 -5.35657 0.14227 -0.3742 0.25867 -0.90628 0.25867 -1.18239 0 -1.13132 1.12814 -3.40497 2.3944 -4.82569 1.16225 -1.30401 1.83797 -1.74561 5.12774 -3.35112 8.02469 -3.916313 13.50025 -8.579943 17.973035 -15.307963 2.79657 -4.20664 5.38875 -10.40151 6.38932 -15.26939 0.57842 -2.81406 0.76211 -4.93595 0.7444 -8.598958 -0.0287 -5.933258 -0.61813 -9.307883 -2.64455 -15.13998 -0.85934 -2.473225 -0.91995 -2.854381 -0.82805 -5.207513 0.11967 -3.063841 0.69224 -4.436248 2.71535 -6.508446 1.56187 -1.599756 2.78857 -2.289144 5.23177 -2.940164 1.66346 -0.443249 1.83172 -0.443124 3.68493 0.0028 2.54121 0.611412 4.23547 1.557422 5.69338 3.178968 1.50191 1.670482 1.92462 2.511468 3.2397 6.445465 1.42777 4.27106 2.75533 10.610916 3.0599 14.612665 0.23889 3.138781 0.10306 11.185143 -0.2233 13.229163 -1.47554 9.24115 -2.71144 13.36862 -6.13993 20.50521 -4.77746 9.944543 -13.37345 19.416203 -23.327965 25.704403 -2.65952 1.67999 -8.69129 4.67736 -10.25783 5.09741 -1.40948 0.37794 -4.76791 0.33288 -6.08542 -0.0816 z" FillRule="NonZero"/>
                        </Path.Data>
                    </Path>
                    <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path3941" Fill="#FFFCFEFF" StrokeThickness="0.26458335">
                        <Path.Data>
                            <PathGeometry Figures="m 26.674264 36.719701 c -0.14552 -0.0455 -0.922229 -0.276831 -1.72602 -0.514059 -3.146504 -0.928647 -5.934189 -3.658145 -6.922785 -6.778286 -0.611694 -1.930577 -0.4243 -5.174713 0.40333 -6.982495 1.837946 -4.014604 10.691461 -11.021396 19.093393 -15.1107744 5.5241 -2.688682 10.715085 -4.39665 16.801045 -5.527977 2.170785 -0.403532 2.118605 -0.397382 4.276755 -0.504067 0.824253 -0.04075 1.668643 -0.215175 1.876433 -0.38761995 0.20778 -0.172446 0.45302 -0.238301 0.54498 -0.146345 0.092 0.09196 2.22413 0.200832 4.73816 0.24194495 4.40497 0.07204 6.16602 0.175907 8.14284 0.48028 0.50933 0.07842 1.30226 0.19999 1.76207 0.270154 3.14152 0.479375 9.60749 2.347464 13.16714 3.804131 3.52601 1.442903 6.29888 4.226268 6.9118 6.9379564 0.39076 1.728823 0.42916 1.983605 0.43869 2.910417 0.0449 4.37358 -3.279 8.579432 -7.77025 9.831912 -1.56712 0.437023 -4.10179 0.386982 -5.38132 -0.106244 -5.39256 -2.078701 -9.69044 -3.228837 -13.09688 -3.50479 -1.64622 -0.13336 -8.10417 -0.142675 -9.39271 -0.01355 -1.59144 0.159483 -5.302283 0.882266 -7.566118 1.473702 -5.407586 1.412751 -11.783415 4.927495 -16.381384 9.03041 -1.196779 1.067927 -2.603479 2.271744 -3.125996 2.675149 -1.496391 1.155277 -5.563138 2.304777 -6.793173 1.920151 z" FillRule="NonZero"/>
                        </Path.Data>
                    </Path>
                </Canvas>
            </Canvas>
        </Viewbox>

    </Grid>
</Window>

Gives this result:

这篇关于如何使用 XAML 和 Visual Basic 设计这种类型的形状?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！