如何将 WPF UI 转换为 MAUI UI

Posted 2023-02-19

【中文标题】如何将 WPF UI 转换为 MAUI UI

【英文标题】：How to convert WPF UI to MAUI UI

【发布时间】：2022-01-04 10:30:48

【问题描述】：

我们有一个带有 Canvas 对象的 WPF 登录页面。 （注：设计通过第三方软件从 Figma 转换为 WPF。）

但 Canvas 对象不支持进入 MAUI App ，显示错误。有以下问题

我们如何将此设计转换为 MAUI 应用。 将 figma/adboe xd 设计转换为 MAUI 的任何其他过程

以下是 WPF 的部分内容供审核。

<?xml version="1.0" encoding="utf-8"?>
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Group_4" Width="598.667" Height="1197.33" Clip="F1 M 0,0L 598.667,0L 598.667,1197.33L 0,1197.33L 0,0">
    <Canvas x:Name="Layer_1" Width="598.667" Height="1197.33" Canvas.Left="0" Canvas.Top="0">
        <Rectangle x:Name="Rectangle" Width="499.999" Height="1082.67" Canvas.Left="50.6703" Canvas.Top="58.6694" Stretch="Fill" Fill="#FFF5F5F5"/>
        <Viewbox x:Name="Group" Width="598.667" Height="1197.33" Canvas.Left="-47.9976" Canvas.Top="-55.9973">
            <Canvas Width="598.667" Height="1197.33">
                <Canvas Width="598.667" Height="1197.33" x:Name="Clip" Clip="F1 M 98.6679,1197.33L 598.667,1197.33L 598.667,114.667L 98.6679,114.667L 98.6679,1197.33 Z ">
                    <Path x:Name="Path" Width="230.667" Height="230.667" Canvas.Left="98.6667" Canvas.Top="0" Stretch="Fill" Fill="#78FFD615" Data="F1 M 214,0C 277.696,0 329.333,51.6373 329.333,115.333C 329.333,179.031 277.696,230.667 214,230.667C 150.303,230.667 98.6667,179.031 98.6667,115.333C 98.6667,51.6373 150.303,0 214,0 Z "/>
                    <Path x:Name="Path_0" Width="230.667" Height="230.667" Canvas.Left="0" Canvas.Top="82.6667" Stretch="Fill" Fill="#78FFD615" Data="F1 M 115.333,82.6667C 179.029,82.6667 230.667,134.304 230.667,198C 230.667,261.697 179.029,313.333 115.333,313.333C 51.636,313.333 0,261.697 0,198C 0,134.304 51.636,82.6667 115.333,82.6667 Z "/>
                    <Path x:Name="Path_1" Width="26.6667" Height="20" Canvas.Left="484" Canvas.Top="133.333" Stretch="Fill" Fill="#FF000000" Data="F1 M 509.945,133.333L 507.784,133.333C 507.385,133.333 507.063,133.613 507.063,133.959L 507.063,152.708C 507.063,153.055 507.385,153.333 507.784,153.333L 509.945,153.333C 510.344,153.333 510.667,153.055 510.667,152.708L 510.667,133.959C 510.667,133.613 510.344,133.333 509.945,133.333 Z M 504.18,137.084L 502.019,137.084C 501.62,137.084 501.297,137.363 501.297,137.708L 501.297,152.708C 501.297,153.055 501.62,153.333 502.019,153.333L 504.18,153.333C 504.579,153.333 504.901,153.055 504.901,152.708L 504.901,137.708C 504.901,137.363 504.579,137.084 504.18,137.084 Z M 498.415,140.833L 496.251,140.833C 495.855,140.833 495.531,141.113 495.531,141.459L 495.531,152.708C 495.531,153.055 495.855,153.333 496.251,153.333L 498.415,153.333C 498.812,153.333 499.135,153.055 499.135,152.708L 499.135,141.459C 499.135,141.113 498.812,140.833 498.415,140.833 Z M 486.883,148.333L 484.721,148.333C 484.323,148.333 484,148.613 484,148.959L 484,152.708C 484,153.055 484.323,153.333 484.721,153.333L 486.883,153.333C 487.281,153.333 487.604,153.055 487.604,152.708L 487.604,148.959C 487.604,148.613 487.281,148.333 486.883,148.333 Z M 492.648,144.584L 490.487,144.584C 490.087,144.584 489.765,144.863 489.765,145.208L 489.765,152.708C 489.765,153.055 490.087,153.333 490.487,153.333L 492.648,153.333C 493.047,153.333 493.369,153.055 493.369,152.708L 493.369,145.208C 493.369,144.863 493.047,144.584 492.648,144.584 Z "/>
                    <Path x:Name="Path_2" Width="21.3331" Height="19.9993" Canvas.Left="516" Canvas.Top="133.333" Stretch="Fill" Fill="#FF000000" Data="F1 M 533.423,143.887C 529.579,139.337 523.747,139.342 519.91,143.887C 519.681,144.161 519.673,144.633 519.893,144.921L 521.041,146.438C 521.239,146.702 521.562,146.721 521.775,146.474C 524.573,143.234 528.767,143.242 531.558,146.474C 531.771,146.721 532.094,146.703 532.292,146.438L 533.442,144.921C 533.661,144.633 533.653,144.159 533.423,143.887 Z M 526.667,147.619C 525.489,147.619 524.534,148.898 524.534,150.477C 524.534,152.054 525.489,153.333 526.667,153.333C 527.844,153.333 528.799,152.054 528.799,150.477C 528.799,148.898 527.844,147.619 526.667,147.619 Z M 537.164,138.819C 531.258,131.503 522.073,131.506 516.17,138.819C 515.948,139.094 515.943,139.559 516.158,139.845L 517.298,141.361C 517.505,141.634 517.834,141.639 518.046,141.378C 522.909,135.411 530.423,135.41 535.287,141.378C 535.5,141.639 535.83,141.634 536.035,141.361L 537.175,139.845C 537.39,139.559 537.386,139.094 537.164,138.819 Z "/>
                    <Path x:Name="Path_3" Width="29.3334" Height="20" Canvas.Left="542.667" Canvas.Top="133.333" Stretch="Fill" Fill="#FF000000" Data="F1 M 566.133,139.333L 547.067,139.333L 547.067,147.333L 566.133,147.333M 568.333,133.333L 544.867,133.333C 543.652,133.333 542.667,134.676 542.667,136.333L 542.667,150.333C 542.667,151.991 543.652,153.333 544.867,153.333L 568.333,153.333C 569.548,153.333 570.533,151.991 570.533,150.333L 570.533,149.333L 570.9,149.333C 571.508,149.333 572,148.661 572,147.833L 572,138.833C 572,138.005 571.508,137.333 570.9,137.333L 570.533,137.333L 570.533,136.333C 570.533,134.676 569.548,133.333 568.333,133.333 Z M 567.6,137.333L 567.6,141.333L 569.067,141.333L 569.067,145.333L 567.6,145.333L 567.6,149.333L 545.6,149.333L 545.6,137.333L 567.6,137.333 Z "/>
                    <Path x:Name="Path_18" Width="17.936" Height="53.6724" Canvas.Left="312.119" Canvas.Top="556.843" Stretch="Fill" Fill="#FF6C63FF" Data="F1 M 322.859,610.515L 321.373,606.98L 312.119,589.4L 312.623,556.872L 312.719,556.859C 318.641,556.079 322.648,583.307 322.815,584.467L 328.663,604.423L 330.055,608.822L 322.859,610.515 Z "/>
                    <Rectangle x:Name="Rectangle_29" Width="14.372" Height="14.3414" Canvas.Left="461.628" Canvas.Top="528" Stretch="Fill" Fill="#FFF1F1F1"/>
                    <Rectangle x:Name="Rectangle_30" Width="14.372" Height="14.3427" Canvas.Left="349.156" Canvas.Top="583.808" Stretch="Fill" Fill="#FFF1F1F1"/>
                    <Rectangle x:Name="Rectangle_31" Width="113.62" Height="57.4012" Canvas.Left="357.223" Canvas.Top="534.464" Stretch="Fill" Fill="#FFFFFFFF"/>
                    <Path x:Name="Path_32" Width="115.495" Height="59.272" Canvas.Left="356.285" Canvas.Top="533.529" Stretch="Fill" Fill="#FFE5E5E5" Data="F1 M 358.16,590.931L 469.905,590.931L 469.905,535.4L 358.16,535.4M 471.78,592.801L 356.285,592.801L 356.285,533.529L 471.78,533.529L 471.78,592.801 Z "/>
                    <Rectangle x:Name="Rectangle_33" Width="87.4173" Height="2.89197" Canvas.Left="370.861" Canvas.Top="554.6" Stretch="Fill" Fill="#FFE5E5E5"/>
                    <Rectangle x:Name="Rectangle_34" Width="87.4173" Height="2.89203" Canvas.Left="370.861" Canvas.Top="561.616" Stretch="Fill" Fill="#FFE5E5E5"/>
                    <Rectangle x:Name="Rectangle_35" Width="16.2453" Height="2.51068" Canvas.Left="442.033" Canvas.Top="571.975" Stretch="Fill" Fill="#FF6C63FF"/>
                    <Path x:Name="Path_36" Width="119.657" Height="0.624023" Canvas.Left="216" Canvas.Top="683.364" Stretch="Fill" Fill="#FFCBCBCB" Data="F1 M 335.345,683.988L 216.312,683.988C 216.229,683.988 216.15,683.956 216.092,683.897C 216.033,683.838 216,683.758 216,683.677C 216,683.593 216.033,683.514 216.092,683.456C 216.15,683.397 216.229,683.364 216.312,683.364L 335.345,683.364C 335.428,683.364 335.508,683.397 335.566,683.456C 335.625,683.514 335.657,683.593 335.657,683.677C 335.657,683.758 335.625,683.838 335.566,683.897C 335.508,683.956 335.428,683.988 335.345,683.988 Z "/>
                </Canvas>
            </Canvas>
        </Viewbox>
    </Canvas>
</Canvas>

【问题讨论】：

Xamarin 支持形状和路径 - devblogs.microsoft.com/xamarin/xamarin-forms-shapes-and-paths

@Jason 如何在 MAUI 中使用图形？

"graphics" 的含义太多了，难以理解。请显示您所指的确切 XAML。如果您指的是<Canvas>，请参阅Shapes Demos 中的xaml。您可以将 Shape/Path 对象放在StackLayout 或Grid 中。或任何其他布局 - 可能是 AbsoluteLayout 或 RelativeLayout。

【参考方案1】：

你可以用GraphicsView代替canvas，也许

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。