diff --git a/Images/circular-gauge-as-knob.jpg b/Images/circular-gauge-as-knob.jpg new file mode 100644 index 0000000..d96c6bb Binary files /dev/null and b/Images/circular-gauge-as-knob.jpg differ diff --git a/Readme.md b/Readme.md index bd4414b..eeb0c67 100644 --- a/Readme.md +++ b/Readme.md @@ -1,38 +1,99 @@ - -![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/128570577/24.2.1%2B) -[![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/E3335) -[![](https://img.shields.io/badge/πŸ“–_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) -[![](https://img.shields.io/badge/πŸ’¬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives) - - -# 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. - -![Knob-like Gauge](./media/b5aca44e-e490-11e6-80bf-00155d62480c.png) - -## Implementation Details - -The **KnobResourceDictionary.xaml** file contains the following custom templates: - -* 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. - -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. - -## Files to Review - -* [KnobResourceDictionary.xaml](./CS/DXGauges_Knobs/KnobResourceDictionary.xaml) (VB: [KnobResourceDictionary.xaml](./VB/DXGauges_Knobs/KnobResourceDictionary.xaml)) -* [MainWindow.xaml](./CS/DXGauges_Knobs/MainWindow.xaml) (VB: [MainWindow.xaml](./VB/DXGauges_Knobs/MainWindow.xaml)) - -## Documentation - -* [CircularGaugeControl](https://docs.devexpress.com/WPF/DevExpress.Xpf.Gauges.CircularGaugeControl) -* [Circular Gauge Elements](https://docs.devexpress.com/WPF/9954/controls-and-libraries/gauge-controls/visual-elements/circular-gauge) - + +![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/128570577/24.2.1%2B) +[![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/E3335) +[![](https://img.shields.io/badge/πŸ“–_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) +[![](https://img.shields.io/badge/πŸ’¬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives) + + +# WPF Gauges – Create a Volume Knob + +This example changes the [`CircularGaugeControl`](https://docs.devexpress.com/WPF/DevExpress.Xpf.Gauges.CircularGaugeControl) so that it looks and behaves like a volume knob. Turn the gauge needle to update the percentage label under the control. + +![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. + +## Implementation Details + +### 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 has the following features: + +* 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. + +```xaml + +``` + +Use the `SmartTickmarksPresentation` property to change the tick mark style and position tick marks with negative offsets to align with the custom scale. + +### Value Display + +A `Label` displays the gauge value. Its content is bound to the needle’s `Value` property: + +```xaml +