style دهی در MAUI با استفاده از CSS

سلام دوستان

در فریم ورک قدرتمند MAUI شما می توانید به جای xaml از css در استایل دهی استفاده کنید

یک سری توضیحات کوتاه میدم بعد بریم سراغ نحوه کار

در طراحی وب سایت شما از html برای ساخت کنترل ها و ui کلی استفاده می کنید و با استفاده از css خوشگلاسیون و استایل دهی رو انجام میدین

اما xaml به این صورت هست که همه کار رو انجام میده

اگه بخواین xaml رو در حد ساده یاد بگیرین و سراغ استایل دهی پیشرفته نرین اصلا کاری نداره ولی برای یادگیری استایل دهی اصولی و زیبا باید تمرین فراوان کنید خوب خوشبختانه مایکروسافت برای راحتی شما دوستان گفته می تونید در بخش استایل دهی به جای xaml از css استفاده کنید

در کد پایین چند استایل ساده css مشاهده می کنید:

​
navigationpage {
    -maui-bar-background-color: lightgray;
}

^contentpage {
    background-color: lightgray;
}

#listView {
    background-color: lightgray;
}

stacklayout {
    margin: 20;
    -maui-spacing: 6;
}

grid {
    row-gap: 6;
    column-gap: 6;
}
.mainPageTitle {
    font-style: bold;
    font-size: medium;
}

.mainPageSubtitle {
    margin-top: 15;
}

.detailPageTitle {
    font-style: bold;
    font-size: medium;
    text-align: center;
}

.detailPageSubtitle {
    text-align: center;
    font-style: italic;
}

listview image {
    height: 60;
    width: 60;
}

stacklayout>image {
    height: 200;
    width: 200;
}

​

نکته مهم

حتما نیاز نیست کل استایل هارو با css بدین می تونید گاهی از css و بعضی اوقات هم از زمل(xaml) استفاده کنید

مراحل استفاده از css در maui

1. یک فایل css در پروژه خود ایجاد کنید و کد های خود را بنویسید
2. تمام.

لود کردن فایل سی اس اس و استفاده از ان در xaml

کد زیر را به فایل xaml خود اضافه کنید و مسیر فایل css خود را مشخص کنید

<Application ...>
    <Application.Resources>
        <StyleSheet Source="/Resources/styles.css" />
    </Application.Resources>
</Application>

در کد زیر مشاهده می کنید چطور کد css را در خود فایل xaml بنویسید

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet>
            <![CDATA[
            ^contentpage {
                background-color: lightgray;
            }
            ]]>
        </StyleSheet>
    </ContentPage.Resources>
    ...
</ContentPage>

پیشنهاد:

جهت یادگیری فریم ورک .net maui به صورت حرفه ای دوره

آموزش maui

مراجعه کنید

لود کردن style sheet در c#

با روش زیر می توانید فایل css را در سی شارپ باز کنید و مشاهده کنید و ان را تصحیح کنید

using Microsoft.Maui.Controls.StyleSheets;

public partial class MyPage : ContentPage
{
    public MyPage()
    {
        InitializeComponent();

        using (var reader = new StringReader("^contentpage { background-color: lightgray; }"))
        {
            this.Resources.Add(StyleSheet.FromReader(reader));
        }
    }
}

منتظر پارت دوم باشید 

پایان.