当前位置：网站首页 / MAUI / 正文

ay maui in net6 第12天基本xaml

时间：2022年05月25日 | 作者 : aaronyang | 分类 : MAUI | 浏览: 674次 | 评论 0 人

xaml支持嵌套

<Label Text="Hello, XAML!"
       VerticalOptions="Center">
    <Label.FontAttributes>
        Bold
    </Label.FontAttributes>
    <Label.FontSize>
        Large
    </Label.FontSize>
    <Label.TextColor>
        Aqua
    </Label.TextColor>
</Label>

Grid 表格功能只多不少

        <Grid Padding="10" ColumnSpacing="2" RowSpacing="10">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
                <RowDefinition Height="100" />
            </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="100" />
        </Grid.ColumnDefinitions>
        <Button Text="杨洋0"/>
        <Button Text="十年0" Grid.Column="1"/>
        <Button Text="乾隆0" Grid.Column="2"/>

        <Button Text="杨洋1" Grid.Row="1"/>
        <Button Text="十年1" Grid.Row="1" Grid.Column="1"/>
        <Button Text="乾隆1" Grid.Row="1" Grid.Column="2"/>

        <Button Text="杨洋2" Grid.Row="2"/>
        <Button Text="十年2" Grid.Row="2" Grid.Column="1"/>
        <Button Text="乾隆2" Grid.Row="2" Grid.Column="2"/>
    </Grid>

行边距，列边距

如上Grid.Row啥的，附加属性保留

 <Grid Padding="10" ColumnSpacing="2" RowSpacing="10" >
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
                <RowDefinition Height="100" />
            </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="100" />
        </Grid.ColumnDefinitions>
        <Button Text="杨洋0"/>
        <Button Text="十年0" Grid.Column="1"/>
        <Button Text="乾隆0" Grid.Column="2"/>

        <Button Text="杨洋1" Grid.Row="1"/>
        <Button Text="十年1" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"/>
        <!--<Button Text="乾隆1" Grid.Row="1" Grid.Column="2"/>-->

        <Button Text="杨洋2" Grid.Row="2"/>
        <Button Text="十年2" Grid.Row="2" Grid.Column="1"/>
        <Button Text="乾隆2" Grid.Row="2" Grid.Column="2"/>

        <Button Text="AY3" Grid.Row="0" Grid.Column="3" Grid.RowSpan="3"/>
    </Grid>

        <BoxView Color="#D0D0D0" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2">
                
         </BoxView>

BoxView是一个指定颜色/圆角，一个矩形控件， BoxView 在进行初始操作时是图像或自定义元素的有用替代品

自定义控件的内容属性，默认属性的写法，和wpf一致

[ContentProperty("Content")]
public class ContentPage : TemplatedPage
{
    ...
}

这样使用时候，可以省去 <ContentPage.Content>...

平台差异

MAUI可以为每个平台自定义UI外观，使用 OnPlatform 和On类实现。

wpf不可以

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="...">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="0, 20, 0, 0" />
            <On Platform="Android" Value="10, 20, 20, 10" />
        </OnPlatform>
    </ContentPage.Padding>
</ContentPage>

如果值相同, 你也可以 <On Platform="iOS, Android" Value="10, 20, 20, 10" />

经过AY的测试， OnPlatform不是所有属性都能使用，我测试的padding无效

堆栈布局和OnPlatform

你也可以这样写

在Window上的OnPlatform名称叫 UWP，不是Windows

简化布局配置

MAUI的控件基本继承View，而View继承VisualElement

这个类要好好学习下，这个类似于wpf的Control类，依赖属性MAUI叫BindableProperty，wpf叫DependencyProperty

App.xaml写资源

<?xml version = "1.0" encoding = "UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MAUICH3"
             x:Class="MAUICH3.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <LayoutOptions x:Key="horOptions" Alignment="End"/>

        </ResourceDictionary>
    </Application.Resources>
</Application>

然后使用

            <Label 
                Text="Welcome to .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to dot net Multi platform App U I"
                FontSize="18"
                HorizontalOptions="{StaticResource horOptions}" />

改改button

    <Button BorderWidth="20" BorderColor="Aquamarine" CornerRadius="10"
                x:Name="CounterBtn"
                Text="Click me"
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Center" />

MAUI也支持 DynamicResource 和WPF一致

static class AppConstants

{

public static readonly Color BackgroundColor = Colors.Aqua;

public static readonly Color ForegroundColor = Colors.Brown;

}

唯一有个不同的，资源也支持多平台的写法

<OnPlatform x:Key="textColor"
            x:TypeArguments="Color">
    <On Platform="iOS" Value="Red" />
    <On Platform="Android" Value="Aqua" />
</OnPlatform>

使用

TextColor="{StaticResource textColor}"

还有些资源，比如double类型

<x:Double x:Key="rotationAngle">-15</x:Double>

而在wpf netframework上你需要xmlns:system="clr-namespace:System;assembly=mscorlib"

在wpf net5/6/7 xmlns:system="clr-namespace:System;assembly=netstandard"

这个xmlns:system="clr-namespace:System;assembly=netstandard" 在MAUI也可以使用

关于定义Resources,x:Static 和基本和WPF一致，

使用静态资源

<Label Text="Hello, XAML!"
       VerticalOptions="{x:Static LayoutOptions.Start}"
       HorizontalTextAlignment="{x:Static TextAlignment.Center}"
       TextColor="{x:Static Colors.Aqua}" />

定义静态C#对象

 static class AppConstants
    {
        public static readonly Color BackgroundColor = Colors.Aqua;
        public static readonly Color ForegroundColor = Colors.Brown;
    }

其他的{x:Null} {x:Type someClass} x:Array

====================www.ayjs.net 杨洋 wpfui.com ayui ay aaronyang=======请不要转载谢谢了。=========

总结整理

常用属性记录

平台	MAUI	WPF
字体颜色	TextColor	Foreground
垂直对齐	VerticalOptions	VerticalAlignment
字体加粗/斜体等	FontWeight和FontStyle	FontAttributes
水平对齐	HorizontalOptions	HorizontalAlignment
背景色	BackgroundColor	Background
Label的TextAlignment	HorizontalTextAlignment / VerticalTextAlignment	TextAlignment
Button按钮边框厚度	BorderWidth	BorderThickness
旋转	自带Rotation	配合Transform
依赖属性	BindableProperty	DependencyProperty
边框颜色	BorderColor	BorderBrush