Settings controls

INFO

Images of all controls will be added soon.

These controls are used in the Customization window. They ease the UI development by providing ready to use controls for any property that widget could need.

• Color
• Alignment
• Margin
• Font
• Corner radius
• Border

Color

This control allows users to change color on any color property.

Properties

Name	Type	Description	Default
Header	string	Name of the setting.	null
Description	string	Description of the setting.	null
Color	Color	Specifies the selected color.	null

Usage

This setting should be used in the Appearance page.

<widget:ColorSettingsControl Header="Color"
                             Color="{x:Bind ((models:CustomSettings)app:App.Current.CustomSettings).Background.Color, Mode=TwoWay" />

Alignment

This control allows users to align elements in their widget. By using this control in the Photos widget, users are be able to move the header text anywhere.

Properties

Name	Type	Description	Default
Header	string	Name of the setting.	null
Description	string	Description of the setting.	null
HorizontalAlignmentSetting	HorizontalAlignment	Specifies the selected horizontal alignment.	null
VerticalAlignmentSetting	VerticalAlignment	Specifies the selected vertical alignment.	null
ShowHorizontalAlignment	bool	Specifies whether the horizontal alignment setting should be displayed.	true
ShowVerticalAlignment	bool	Specifies whether the vertical alignment setting should be displayed.	true
ShowMargin	bool	Specifies whether the margin setting should be displayed.	true
ShowStretch	bool	Specifies whether the stretch option should be displayed in horizontal and vertical alignment settings.	true

Usage

This setting should be used in the Appearance page.

<widget:ColorSettingsControl Header="Color"
                             Color="{x:Bind ((models:CustomSettings)app:App.Current.CustomSettings).Background.Color, Mode=TwoWay" />

Margin

This control allows users to align elements by offseting their position. By using this control in the Photos widget, users are be able to offset the header text.

Properties

Name	Type	Description	Default
Header	string	Name of the setting.	null
Description	string	Description of the setting.	null
MarginSetting	WidgetThickness	Specifies the widget thickness to use.	null

Usage

This setting should be used in the Appearance page.

<widget:MarginSettingsControl Header="Text margin"
                              MarginSetting="{x:Bind ((models:CustomSettings)app:App.Current.CustomSettings).TextMargin, Mode=TwoWay}" />

Font

This control allows users to personalize how text looks within their widget.

Properties

Name	Type	Description	Default
Header	string	Name of the setting.	null
Description	string	Description of the setting.	null
WidgetFont	WidgetFont	Specifies the widget font to use.	new()
ShowFontColor	bool	Specifies whether the font color setting should be displayed.	true
ShowFontSize	bool	Specifies whether the font size setting should be displayed.	true
ShowFontFamily	bool	Specifies whether the font font family setting should be displayed.	true
ShowFontWeight	bool	Specifies whether the font weight setting should be displayed.	true
ShowFontStyle	bool	Specifies whether the font style setting should be displayed.	true

Usage

This setting should be used in the Appearance page.

<widget:FontSettingsControl Header="Time font"
                            WidgetFont="{x:Bind ((models:CustomSettings)app:App.Current.CustomSettings).TimeFont, Mode=TwoWay}"/>

Corner radius

This control allows users to round corners of a border.

Properties

Name	Type	Description	Default
Header	string	Name of the setting.	null
Description	string	Description of the setting.	null
WidgetCornerRadius	WidgetCornerRadius	Specifies the widget corner radius to use.	null

Usage

This setting should be used in the Appearance page.

<widget:CornerRadiusSettingsControl Header="Corner radius"
                                    WidgetCornerRadius="{x:Bind ((models:CustomSettings)app:App.Current.CustomSettings).CornerRadius, Mode=TwoWay}" />

Border

This control allows users to change border of a border element.

Properties

Name	Type	Description	Default
Header	string	Name of the setting.	null
Description	string	Description of the setting.	null
WidgetBorder	WidgetBorder	Specifies the widget border to use.	null

Usage

This setting should be used in the Appearance page.

<widget:BorderSettingsControl Header="Border"
                              WidgetBorder="{x:Bind ((models:CustomSettings)app:App.Current.CustomSettings).Border, Mode=TwoWay}" />