Improved Properties List Style

[Strypper]

Properties list now got a default look and usage as simple as ever

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="PropertyItemsSource" 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>