From f965bac9854d5804ef8e6bdbc2bff7137da95012 Mon Sep 17 00:00:00 2001 From: Serge Pilipchuk <112853396+sergepilipchuk@users.noreply.github.com> Date: Fri, 8 Aug 2025 13:09:07 +0400 Subject: [PATCH 1/4] Update Readme file (New template) --- Images/circular-gauge-as-knob.jpg | Bin 0 -> 16062 bytes Readme.md | 77 ++++++++++++++++-- .../b5aca44e-e490-11e6-80bf-00155d62480c.png | Bin 16155 -> 0 bytes 3 files changed, 70 insertions(+), 7 deletions(-) create mode 100644 Images/circular-gauge-as-knob.jpg delete mode 100644 media/b5aca44e-e490-11e6-80bf-00155d62480c.png diff --git a/Images/circular-gauge-as-knob.jpg b/Images/circular-gauge-as-knob.jpg new file mode 100644 index 0000000000000000000000000000000000000000..d96c6bbee8b2bb8a6120cd8d5db3a1cb409e7c46 GIT binary patch literal 16062 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 literal 0 HcmV?d00001 diff --git a/Readme.md b/Readme.md index 231505b..8a3dc13 100644 --- a/Readme.md +++ b/Readme.md @@ -5,20 +5,71 @@ [![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives) -# WPF Gauges - Create a volume knob +# WPF Gauges – Create a Volume Knob -This example customizes the [CircularGaugeControl](https://docs.devexpress.com/WPF/DevExpress.Xpf.Gauges.CircularGaugeControl). As a result, the control looks and behaves like a 'knob' element of a real-life dashboard. +This example changes the [`CircularGaugeControl`](https://docs.devexpress.com/WPF/DevExpress.Xpf.Gauges.CircularGaugeControl) so that it looks and behaves like a volume knob. -![Knob-like Gauge](./media/b5aca44e-e490-11e6-80bf-00155d62480c.png) +![Volume Knob](./Images/circular-gauge-as-knob.jpg) + +Use the `CircularGaugeControl` when you need to: + +- Create an interactive rotary control to adjust a value. +- Imitate analog controls in dashboards, audio mixers, or monitoring panels. +- Apply a custom design to match a specific UI theme. + +Turn the gauge needle to update the percentage label under the control ## Implementation Details -The **KnobResourceDictionary.xaml** file contains the following custom templates: +### Custom Needle and Scale Templates + +Define custom templates in the [KnobResourceDictionary.xaml](./CS/DXGauges_Knobs/KnobResourceDictionary.xaml) file: + +- `OscilloscopeNeedleTemplate` – changes the needle shape and color. +- `OscilloscopeScaleLayerTemplate` – changes the gauge background and decorative elements. + +The following code example applies templates through [`CustomArcScaleNeedlePresentation`](https://docs.devexpress.com/WPF/DevExpress.Xpf.Gauges.CustomArcScaleNeedlePresentation) and [`CustomArcScaleLayerPresentation`](https://docs.devexpress.com/WPF/DevExpress.Xpf.Gauges.CustomArcScaleLayerPresentation) properties: + +```xaml + + + +... + + + +``` + +### Gauge Configuration + +The circular gauge: -* The **OscilloscopeNeedleTemplate** changes the arc scale's [needle](https://docs.devexpress.com/WPF/9957/controls-and-libraries/gauge-controls/visual-elements/circular-gauge/needle) appearance. -* The **OscilloscopeScaleLayerTemplate** changes the arc scale's [layer](https://docs.devexpress.com/WPF/9962/controls-and-libraries/gauge-controls/visual-elements/circular-gauge/layers) appearance. +* Starts at `0` and ends at `100`. +* Uses a custom start/end angle to simulate knob rotation. +* Hides numeric labels and displays only tick marks. +* Supports interactive needle movement. -Set the needle's [IsInteractive](https://docs.devexpress.com/WPF/DevExpress.Xpf.Gauges.ValueIndicatorBase.IsInteractive) property to `true` to allow users to change the gauge's value. The gauge stores its value in the needle's `Value` property. +```xaml + +``` + +Use the `SmartTickmarksPresentation` property to change tick mark style and position them with negative offsets to align with the custom scale. + +### Value Display + +A `Label` below the gauge binds to the needle’s `Value` property: + +```xaml +