MAUI All Controls Supported Styles

ALL AVAILABLE STYLES IN THE REGION

---

1. Properties List Style

Properties list is use to define what the control capable of with it properties. This is a requirement for every page to contain it so that the users could quickly see what they can do with control.

1. Define the data source directly from your page

        <x:Array x:Key="PropertiesItemsSource" Type="{x:Type x:String}">
            <x:String>
                <![CDATA[
                                <strong style="color:blue">Minimum</strong>, of type <strong style="color:blue">double</strong>, is the minimum of the range, with a default value of 0.
                            ]]>
            </x:String>
            <x:String>
                <![CDATA[
                                <strong style="color:blue">Maximum</strong>, of type <strong style="color:blue">double</strong>, is the maximum of the range, with a default value of 1.
                            ]]>
            </x:String>
            <x:String>
                <![CDATA[
                                <strong style="color:blue">Value</strong>, of type <strong style="color:blue">double</strong>, is the slider's value, which can range between Minimum and Maximum and has a default value of 0.
                            ]]>
            </x:String>
            <x:String>
                <![CDATA[
                                <strong style="color:blue">MinimumTrackColor</strong>, of type <strong style="color:blue">Color</strong>, is the bar color on the left side of the thumb.
                            ]]>
            </x:String>
            <x:String>
                <![CDATA[
                                <strong style="color:blue">MaximumTrackColor</strong>, of type <strong style="color:blue">Color</strong>, is the bar color on the right side of the thumb.
                            ]]>
            </x:String>
            <x:String>
                <![CDATA[
                                <strong style="color:blue">ThumbColor</strong>, of type <strong style="color:blue">Color</strong>, is the thumb color.
                            ]]>
            </x:String>
            <x:String>
                <![CDATA[
                                <strong style="color:blue">ThumbImageSource</strong>, of type <strong style="color:blue">ImageSource</strong>, is the image to use for the thumb, of type ImageSource.
                            ]]>
            </x:String>
            <x:String>
                <![CDATA[
                                <strong style="color:blue">DragStartedCommand</strong>, of type <strong style="color:blue">ICommand</strong>, which is executed at the beginning of a drag action.
                            ]]>
            </x:String>
            <x:String>
                <![CDATA[
                                <strong style="color:blue">DragCompletedCommand</strong>, of type <strong style="color:blue">ICommand</strong>, which is executed at the end of a drag action.
                            ]]>
            </x:String>
        </x:Array>

2. Define the header data

<x:String x:Key="PropertiesListHeader">
            Slider defines the following properties:
</x:String>

3. Define the footer data

<x:String x:Key="PropertiesListFooter">
            These properties are backed by BindableProperty objects. The Value property has a default binding mode of BindingMode.TwoWay, which means that it's suitable as a binding source in an application that uses the Model-View-ViewModel (MVVM) pattern.
</x:String>

4. Create the collectionview

<Frame Style="{x:StaticResource DocumentContentFrameStyle}">
    <CollectionView
        Footer="{x:StaticResource PropertiesListFooter}"
        Header="{x:StaticResource PropertiesListHeader}"
        ItemsSource="{x:StaticResource PropertyItemsSource}"
        Style="{x:StaticResource PropertiesListStyle}" />
</Frame>

2. Document Content Frame Style

This frame control provides a visual separation for the document more easily organized. And it also fixes some of the issues of MAUI that current targeting wrong styles on each platform by default use this to the frame that wrap around a text document or a control example.

Usage

<Frame Style="{x:StaticResource DocumentContentFrameStyle}">
    <Label Text="{x:StaticResource ControlInfo}" />
</Frame>

Style="{x:StaticResource DocumentContentFrameStyle}"

3. Document Section Title Style

4. Bullet List Header Template

5. Bullet List Item Template

6. Bullet List Footer Template