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

ay maui in net6 第12天 基本xaml

时间:2022年05月25日 | 作者 : aaronyang | 分类 : MAUI | 浏览: 254次 | 评论 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>

image.png

行边距,列边距

如上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>

image.png

        <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

你也可以这样写

<StackLayout VerticalOptions="Center"> <Button x:Name="TestButton" IsVisible="{OnPlatform Android=true, iOS=true, macOS=false}" BackgroundColor="Red"/> </StackLayout>

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

image.png


简化布局配置

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

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

image.png

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}" />

image.png

改改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" />

image.png

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=======请不要转载谢谢了。=========


总结整理

常用属性记录

平台MAUIWPF
字体颜色TextColorForeground 
垂直对齐VerticalOptionsVerticalAlignment
字体加粗/斜体等FontWeight和FontStyleFontAttributes
水平对齐HorizontalOptionsHorizontalAlignment
背景色BackgroundColorBackground
Label的TextAlignmentHorizontalTextAlignment / VerticalTextAlignmentTextAlignment
Button按钮边框厚度BorderWidthBorderThickness
旋转自带Rotation配合Transform
依赖属性BindablePropertyDependencyProperty
边框颜色BorderColorBorderBrush




新控件

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





推荐您阅读更多有关于“vs2022maui,”的文章

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  查看权限

抖音:wpfui 工作wpf,目前主maui

招聘合肥一枚WPF工程师,跟我一个开发组,10-15K,欢迎打扰

目前在合肥市企迈科技就职

AYUI8全源码 Github地址:前往获取

杨洋(AaronYang简称AY,安徽六安人)AY唯一QQ:875556003和AY交流

高中学历,2010年开始web开发,2015年1月17日开始学习WPF

声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费

不是从我处购买的ayui7源码,我不提供任何技术服务,如果你举报从哪里买的,我可以帮你转正为我的客户,并送demo

查看捐赠

AYUI7.X MVC教程 更新如下:

第一课 第二课 程序加密教程

标签列表