MAUI劝退：从WinUI3迁移到MAUI之xaml的差异
MAUI劝退：从WinUI3迁移到MAUI之xaml的差异
这玩意儿真劝退，说起来都是xaml，都是c#，都是微软家的，除了都是文本文件、都是xml之外，几乎啥共性也没有了。
把一个WinUI3的xaml往MAUI迁移了一下，遇到很多问题，几乎没有哪个是不需要修改的。
以下用“->”表示如何从WinUI3转到对应的MAUI对象和属性。
目录
2.1 VerticalAlignment -> VerticalOptions
三、StackPanel -> VerticalStackLayout
6.2 HorizontalAlignment -> HorizontalOptions
七、Checkbox 不支持Content，可用Label实现
一、默认入口MainWindow -> MainPage
首先就是主入口的名字不一样。
二、TextBlock -> Label
文本块名称不一样，对其属性也不一样：
2.1 VerticalAlignment -> VerticalOptions
一目了然，就是后缀不一样，类似的，HorizontalAlignment -> HorizontalOptions。所有支持对齐属性的都是如此。
三、StackPanel -> VerticalStackLayout
注意MAUI不支持边框，必须额外增加边框。StackPanel堆叠方向默认是纵向，如果是横向需要用属性Orientation="Horizontal"指示，对应的MAUI则是HorizontalStackLayout。
四、Grid
差不多。但是MAUI的Height属性不支持"Auto"。
五、ComboBox -> Picker
5.1 属性Header -> Title
六、Button
6.1 Click -> Clicked
单击事件的名称不一样。
6.2 HorizontalAlignment -> HorizontalOptions
对齐属性的属性值不一样。
6.2.1 Right -> End
6.2.2 Stretch -> Fill
6.2.3 内嵌文本改为属性Text
MAUI不支持内嵌文本，必须改为属性Text。
七、Checkbox 不支持Content，可用Label实现
MAUI谁设计的啊？
八、HyperlinkButton 不支持，需要自定义
自定义倒也不复杂，官方文档就有例子（有例子不能写进去吗？）。
必须使用带有分段内容的Label，通过扩展的Span实现。
先定义Span的扩展：
public class myHyperlinkSpan : Span
{
public static readonly BindableProperty UrlProperty =
BindableProperty.Create(nameof(Url), typeof(string), typeof(myHyperlinkSpan), null);
public string Url
{
get { return (string)GetValue(UrlProperty); }
set { SetValue(UrlProperty, value); }
}
public myHyperlinkSpan()
{
TextDecorations = TextDecorations.Underline;
TextColor = Colors.Blue;
GestureRecognizers.Add(new TapGestureRecognizer
{
// Launcher.OpenAsync is provided by Essentials.
Command = new Command(async () => await Launcher.OpenAsync(Url))
});
}
}
再替换Span使用，注意Span不能独立使用，必须在如下层级中使用：
<Label>
<Label.FormattedText>
<FormattedString>
<local:myHyperlinkSpan Text="WebStore" Url="https://apps.microsoft.com/" />
</FormattedString>
</Label.FormattedText>
</Label>
九、数据绑定
9.1 编译时绑定
MAUI具有不同的绑定语法，不支持直接对代码文件定义的属性的绑定（winui支持直接绑定代码里的对象的属性）。
MAUI的数据绑定分编译时绑定和运行时绑定，编译时绑定可以关联到代码文件，但是又不能引用xaml文件里的对象，后面解释如何混合这两种绑定。
按照官方说法，编译时绑定的运行效率远远高于运行时绑定，然而默认的却是运行时绑定。
winui 需要指定x:DataType明确上下文对象的类型，后面可以绑定到上下文蚊香的属性。
BindingContex指定上下文对象，可以在xaml里面定义（相当于new一个），代码里面可以直接指定为this或别的对象。
此方法为编译时绑定，与运行时绑定同时使用时运行时绑定必须用x:DataType="{x:Null}"来取消编译时绑定。
9.2 设置绑定的数据类型
例如，使用编译时绑定关联到页面对应的类（也就是对应的.cs里的主类，当然也可以绑定到一个独立的类型上）：
9.3 定义被绑定的属性
myTitle是MainPage的属性：
public partial class MainPage : ContentPage
{
String _myTitle = "123";
public String myTitle { get { return _myTitle; } set { _myTitle = value; OnPropertyChanged(); } }
OnPropertyChanged()会触发属性变化通知，从而实现联动。
9.4 绑定到数据类型的属性
然后可以用如下代码将界面元素的属性绑定到关联的属性：
<Span Text="{Binding myTitle,Mode=OneWay}"/>9.5 代码设置绑定上下文
在代码开始处设置绑定上下文：
public MainPage()
{
InitializeComponent();
this.BindingContext = this;//设置绑定上下文
以上几步就实现了WinUI3默认的和代码隐藏文件的关联。
9.6 混合运行时绑定
使用了x:DataType就是打开了编译时绑定，随时可以修改这个以关联到不同的类型，但是必须同时修改绑定上下文。
打开了编译时绑定就会干扰xmal页面内部的绑定，为此必须用x:DataType="{x:Null}来取消编译时绑定，所有这些属性都是从设置位置开始管到所有子成员的。
屏蔽编译时绑定，使用运行时绑定：
<Span x:DataType="{x:Null}" BindingContext="{x:Reference a}" Text="{Binding Text,Mode=OneWay}"/>
<Span Text="|"/>
<Span Text="1234567" x:Name="a"/>
上述代码把第一个Span的内容设置为第三个Span的内容。
9.7 运行示例
myTitle在MainPage的构造函数里设置了值：
myTitle = "aaaaaaaaa";
运行起来：
一串a是上面的代码设置的，连续两个1234567则是运行时绑定设置的，两种绑定都生效了。
再测试一下是不是联动的，随便弄个按钮，加个按钮处理：
private void button_Hex_Clicked(object sender, EventArgs e)
{
myTitle = "button_Hex_Clicked";
}
再运行，点一下按钮：
成功了。
（这里是文档结束）
开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。
更多推荐
44
0- 0
已为社区贡献4条内容
所有评论(0)