From ce0150fa4196bb4e8ea0b6f1e55ac5d159d40511 Mon Sep 17 00:00:00 2001 From: mddifilippo89 Date: Thu, 13 Jun 2024 18:22:39 -0400 Subject: [PATCH 1/4] mdd-highlight-label mdd-highlight-label --- doc/en/components/radial-gauge.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/doc/en/components/radial-gauge.md b/doc/en/components/radial-gauge.md index 5c931f98d..e27c38a31 100644 --- a/doc/en/components/radial-gauge.md +++ b/doc/en/components/radial-gauge.md @@ -335,9 +335,15 @@ The scale is visual element that highlights full range of values in the gauge wh `sample="/gauges/radial-gauge/scale", height="320", alt="{Platform} radial gauge scale"` -## Labels +## Labels and Titles The radial gauge labels are visual elements displaying numeric values at a specified interval between values of the `MinimumValue` and `MaximumValue` properties. You can position labels by setting the `LabelExtent` property to a fraction, where 0 represents center of gauge and 1 represents outer extent of the gauge backing. Also, you can customize labels setting various styling properties such as `FontBrush` and `Font`. +`TitleText` & `SubtitleText` properties are available and can be used to display both custom text for the needle. In addition, `TitleDisplaysValue` | `SubtitleDisplaysValue` will let you replace the custom text with the needle's value. So you can occupy custom text for the title but show the value via the subtitle and vice versa. + +If the highlight needle is shown, as explained below, then custom text can be shown via `HighlightLabelText`, otherwise `HighlightLabelDisplaysValue` can be enabled and display it's value. + +Each of these labels for the needle have various styling attributes you can apply to change the font, angle, brush and distance from the center of the gauge such as `TitleExtent`, `TitleAngle`, `SubtitleFontSize`, `HighlightLabelBrush`. + ```html Date: Fri, 14 Jun 2024 10:48:53 -0400 Subject: [PATCH 2/4] Update radial-gauge.md --- doc/en/components/radial-gauge.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/en/components/radial-gauge.md b/doc/en/components/radial-gauge.md index e27c38a31..0a7757046 100644 --- a/doc/en/components/radial-gauge.md +++ b/doc/en/components/radial-gauge.md @@ -338,7 +338,7 @@ The scale is visual element that highlights full range of values in the gauge wh ## Labels and Titles The radial gauge labels are visual elements displaying numeric values at a specified interval between values of the `MinimumValue` and `MaximumValue` properties. You can position labels by setting the `LabelExtent` property to a fraction, where 0 represents center of gauge and 1 represents outer extent of the gauge backing. Also, you can customize labels setting various styling properties such as `FontBrush` and `Font`. -`TitleText` & `SubtitleText` properties are available and can be used to display both custom text for the needle. In addition, `TitleDisplaysValue` | `SubtitleDisplaysValue` will let you replace the custom text with the needle's value. So you can occupy custom text for the title but show the value via the subtitle and vice versa. +`TitleText` and `SubtitleText` properties are available and can both be used to display custom text for the needle. In addition, `TitleDisplaysValue` and `SubtitleDisplaysValue` will let you replace the custom text with the needle's value. So you can occupy custom text for the title but show the value via the subtitle and vice versa. If the highlight needle is shown, as explained below, then custom text can be shown via `HighlightLabelText`, otherwise `HighlightLabelDisplaysValue` can be enabled and display it's value. From 02d1715c684b6e6dcc07ea4a26f251f449ccfb9c Mon Sep 17 00:00:00 2001 From: mddifilippo89 Date: Thu, 5 Sep 2024 14:16:05 -0400 Subject: [PATCH 3/4] Update radial-gauge.md --- doc/en/components/radial-gauge.md | 38 +++++++++++++++++++++++++++---- 1 file changed, 34 insertions(+), 4 deletions(-) diff --git a/doc/en/components/radial-gauge.md b/doc/en/components/radial-gauge.md index 7d339f05b..eada4c537 100644 --- a/doc/en/components/radial-gauge.md +++ b/doc/en/components/radial-gauge.md @@ -338,10 +338,6 @@ The scale is visual element that highlights full range of values in the gauge wh ## Labels and Titles The radial gauge labels are visual elements displaying numeric values at a specified interval between values of the `MinimumValue` and `MaximumValue` properties. You can position labels by setting the `LabelExtent` property to a fraction, where 0 represents center of gauge and 1 represents outer extent of the gauge backing. Also, you can customize labels setting various styling properties such as `FontBrush` and `Font`. -`TitleText` and `SubtitleText` properties are available and can both be used to display custom text for the needle. In addition, `TitleDisplaysValue` and `SubtitleDisplaysValue` will let you replace the custom text with the needle's value. So you can occupy custom text for the title but show the value via the subtitle and vice versa. - -If the highlight needle is shown, as explained below, then custom text can be shown via `HighlightLabelText`, otherwise `HighlightLabelDisplaysValue` can be enabled and display it's value. - Each of these labels for the needle have various styling attributes you can apply to change the font, angle, brush and distance from the center of the gauge such as `TitleExtent`, `TitleAngle`, `SubtitleFontSize`, `HighlightLabelBrush`. ```html @@ -396,6 +392,40 @@ Each of these labels for the needle have various styling attributes you can appl `sample="/gauges/radial-gauge/labels", height="320", alt="{Platform} radial gauge labels"` +## Title & Subtitle + +`TitleText` and `SubtitleText` properties are available and can both be used to display custom text for the needle. In addition, `TitleDisplaysValue` and `SubtitleDisplaysValue` will let you replace the custom text with the needle's value. So you can occupy custom text for the title but show the value via the subtitle and vice versa. + +If the highlight needle is shown, as explained below, then custom text can be shown via `HighlightLabelText`, otherwise `HighlightLabelDisplaysValue` can be enabled and display it's value. + +```html + + +``` + +```tsx + +``` + +```html + + +``` + +```razor + + +``` + ## Optical Scaling The radial gauge's labels and titles can change it's scaling. To enable this, first set `OpticalScalingEnabled` to true. Then you can set `OpticalScalingSize` which manages the size at which labels have 100% optical scaling. Labels will have larger fonts when gauge's size is larger. For example, labels will have a 200% larger font size when this property is set to 500 and the gauge px size is doubled to eg. 1000. From 6d989ea6eb28c1628dac5ba76b9b993956f927b4 Mon Sep 17 00:00:00 2001 From: mddifilippo89 Date: Thu, 5 Sep 2024 14:16:35 -0400 Subject: [PATCH 4/4] Update radial-gauge.md --- doc/en/components/radial-gauge.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/en/components/radial-gauge.md b/doc/en/components/radial-gauge.md index eada4c537..09b5cefd8 100644 --- a/doc/en/components/radial-gauge.md +++ b/doc/en/components/radial-gauge.md @@ -394,7 +394,7 @@ Each of these labels for the needle have various styling attributes you can appl ## Title & Subtitle -`TitleText` and `SubtitleText` properties are available and can both be used to display custom text for the needle. In addition, `TitleDisplaysValue` and `SubtitleDisplaysValue` will let you replace the custom text with the needle's value. So you can occupy custom text for the title but show the value via the subtitle and vice versa. +`TitleText` and `SubtitleText` properties are available and can both be used to display custom text for the needle. Alternatively, `TitleDisplaysValue` and `SubtitleDisplaysValue`, when set to true, will let display the needle's value and override `TitleText` and `SubtitleText`. So you can occupy custom text for the title but show the value via the subtitle and vice versa. If the highlight needle is shown, as explained below, then custom text can be shown via `HighlightLabelText`, otherwise `HighlightLabelDisplaysValue` can be enabled and display it's value.