Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions wpf/Radial-Slider/Appearance.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
---
---
layout: post
title: Appearance in WPF RadialSlider | Syncfusion®
description: Customize the appearance of the WPF RadialSlider using foreground, background, flow direction, and theme settings.
title: Appearance in WPF Radial Slider | Syncfusion®
description: Customize the appearance of the WPF Radial Slider using foreground, background, flow direction, and theme settings.
platform: wpf
control: SfRadialSlider
documentation: ug
---

# Appearance in WPF Radial Slider (SfRadialSlider)

This section explains different styling, theming options available in [SfRadialSlider](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Navigation.SfRadialSlider.html) control.
This section explains the styling and theming options available in the [WPF Radial Slider](https://www.syncfusion.com/wpf-controls/radial-slider) control. The WPF Radial Slider is implemented through the [SfRadialSlider](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Navigation.SfRadialSlider.html) class.

## Setting the foreground

You can change the foreground color of the `SfRadialSlider` by using the `Foreground` property. The default value of `Foreground` property is `Black`.
You can change the foreground color of the `SfRadialSlider` by using the `Foreground` property. The default value of the `Foreground` property is `Black`.

{% tabs %}
{% highlight xaml %}
Expand All @@ -29,13 +29,13 @@ radialSlider.Foreground = Brushes.Red;
{% endhighlight %}
{% endtabs %}

![SfRadialSlider with red foreground](Appearance_images/Foreground.png)
![WPF Radial Slider with red foreground](Appearance_images/Foreground.png)

N> [View Sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-wpf-radial-slider-examples/tree/master/Samples/RadialSlider-Features)

## Setting the background

You can change the background color of the `SfRadialSlider` by using the `Background` property. The default value of `Background` property is `White`.
You can change the background color of the `SfRadialSlider` by using the `Background` property. The default value of the `Background` property is `White`.

{% tabs %}
{% highlight xaml %}
Expand All @@ -51,13 +51,13 @@ radialSlider.Background = Brushes.Yellow;
{% endhighlight %}
{% endtabs %}

![SfRadialSlider with yellow background](Appearance_images/Background.png)
![WPF Radial Slider with yellow background](Appearance_images/Background.png)

N> [View Sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-wpf-radial-slider-examples/tree/master/Samples/RadialSlider-Features)

## Change flow direction

You can change the flow direction of the `SfRadialSlider` layout from right to left by setting the `FlowDirection` property value as `RightToLeft`. The default value of `FlowDirection` property is `LeftToRight`.
You can change the flow direction of the `SfRadialSlider` layout from right to left by setting the `FlowDirection` property value to `RightToLeft`. The default value of the `FlowDirection` property is `LeftToRight`.

{% tabs %}
{% highlight xaml %}
Expand All @@ -73,16 +73,16 @@ radialSlider.FlowDirection = FlowDirection.RightToLeft;
{% endhighlight %}
{% endtabs %}

![SfRadialSlider with right to left flow direction](Appearance_images/rtl.png)
![WPF Radial Slider with right to left flow direction](Appearance_images/rtl.png)

N> [View Sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-wpf-radial-slider-examples/tree/master/Samples/RadialSlider-Features)

## Theme

SfRadialSlider supports various built-in themes. Refer to the below links to apply themes for the SfRadialSlider,
The WPF Radial Slider supports various built-in themes. Refer to the following links to apply themes to the control:

* [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager)

* [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme)

![Setting theme to WPF SfRadialSlider](getting-started_images/wpf-radial-slider-theme-setting.png)
![Setting theme to WPF Radial Slider](getting-started_images/wpf-radial-slider-theme-setting.png)
36 changes: 18 additions & 18 deletions wpf/Radial-Slider/Getting-Started.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
---
layout: post
title: Getting Started with WPF RadialSlider | Syncfusion®
description: Learn how to get started with the Syncfusion® WPF RadialSlider (SfRadialSlider) control. Explore setup, features, examples, and customization options.
title: Getting Started with WPF Radial Slider | Syncfusion®
description: Learn how to get started with the Syncfusion® WPF Radial Slider (SfRadialSlider) control. Explore setup, features, examples, and customization options.
platform: wpf
control: SfRadialSlider
documentation: ug
---

# Getting Started with WPF RadialSlider (SfRadialSlider)
# Getting Started with WPF Radial Slider (SfRadialSlider)

This section explains how to create a WPF [SfRadialSlider](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Navigation.SfRadialSlider.html) and explains about its structure.
This section explains how to create a [WPF Radial Slider](https://www.syncfusion.com/wpf-controls/radial-slider) and describes its structure. The WPF Radial Slider is implemented through the [SfRadialSlider](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Navigation.SfRadialSlider.html) class.

## Structure of SfRadialSlider
## Structure of WPF Radial Slider

![Structure in WPF Radial Slider](getting-started_images/wpf-radial-slider-structure.png)

Expand All @@ -21,7 +21,7 @@ Refer to the [Control Dependencies](https://help.syncfusion.com/wpf/control-depe

Refer to this [documentation](https://help.syncfusion.com/wpf/installation/install-nuget-packages) to find more details about installing nuget packages in a WPF application.

## Adding WPF SfRadialSlider via designer
## Adding WPF Radial Slider via designer

1. The `SfRadialSlider` can be added to an application by dragging it from the toolbox to a designer view. The following dependent assemblies will be added automatically:

Expand All @@ -32,7 +32,7 @@ Refer to this [documentation](https://help.syncfusion.com/wpf/installation/insta

2. Set the properties for `SfRadialSlider` in design mode using the SmartTag feature.

## Adding WPF SfRadialSlider via XAML
## Adding WPF Radial Slider via XAML

To add the `SfRadialSlider` manually in XAML, follow these steps:

Expand All @@ -43,7 +43,7 @@ To add the `SfRadialSlider` manually in XAML, follow these steps:
* Syncfusion.SfRadialMenu.WPF
* Syncfusion.SfShared.WPF

3. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf**, and declare the SfRadialSlider in XAML page.
3. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf**, and declare the WPF Radial Slider in XAML page.

{% capture codesnippet1 %}
{% tabs %}
Expand Down Expand Up @@ -72,7 +72,7 @@ To add the `SfRadialSlider` manually in XAML, follow these steps:
{% endcapture %}
{{ codesnippet1 | OrderList_Indent_Level_1 }}

## Adding WPF SfRadialSlider via C#
## Adding WPF Radial Slider via C#

To add the `SfRadialSlider` manually in C#, follow these steps:

Expand All @@ -95,7 +95,7 @@ using Syncfusion.Windows.Shared;
{% endcapture %}
{{ codesnippet2 | OrderList_Indent_Level_1 }}

4. Create an instance of `SfRadialSlider`, and add it to the window.
4. Create an instance of `SfRadialSlider` and add it to the window.

{% capture codesnippet3 %}
{% tabs %}
Expand All @@ -119,7 +119,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-wpf-

## Select tick value

You can select any tick value by dragging the pointer along the circular track or clicking on the corresponding track value. You can get the selected value by using the `Value` property. The default value of `Value` property is `0`.
You can select any tick value by dragging the pointer along the circular track or clicking on the corresponding track value. You can get the selected value by using the `Value` property. The default value of the `Value` property is `0`.

![Selecting a Value by Clicking and Draging in WPF Radial Slider](getting-started_images/wpf-radial-slider-drag-select-value.gif)

Expand Down Expand Up @@ -147,7 +147,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-wpf-

## Display selected value

You can display the selected value in the content area of the `SfRadialSlider` by setting the selected value to the [Content](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Navigation.SfRadialSlider.html#Syncfusion_Windows_Controls_Navigation_SfRadialSlider_Content) property. The default value of `Content` property is `null`.
You can display the selected value in the content area of the `SfRadialSlider` by setting the selected value to the [Content](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Navigation.SfRadialSlider.html#Syncfusion_Windows_Controls_Navigation_SfRadialSlider_Content) property. The default value of the `Content` property is `null`.

{% tabs %}
{% highlight C# %}
Expand Down Expand Up @@ -189,7 +189,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-wpf-

## Change min-max tick value

You can change the minimum and maximum ticks value of the `SfRadialSlider` by using the `Minimum` and `Maximum` properties. The default value of `Minimum` property is `0` and `Maximum` property is `100`.
You can change the minimum and maximum tick values of the `SfRadialSlider` by using the `Minimum` and `Maximum` properties. The default value of the `Minimum` property is `0`, and the default value of the `Maximum` property is `100`.

{% tabs %}
{% highlight xaml %}
Expand All @@ -213,7 +213,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-wpf-

## Change start and end position

You can change starting and ending position for generating the ticks in the circular track by using the [StartAngle](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Navigation.SfRadialSlider.html#Syncfusion_Windows_Controls_Navigation_SfRadialSlider_StartAngle) and [EndAngle](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Navigation.SfRadialSlider.html#Syncfusion_Windows_Controls_Navigation_SfRadialSlider_EndAngle) properties. The default value of `EndAngle` property is `0` and `StartAngle` property is `360`.
You can change the starting and ending positions for generating ticks in the circular track by using the [StartAngle](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Navigation.SfRadialSlider.html#Syncfusion_Windows_Controls_Navigation_SfRadialSlider_StartAngle) and [EndAngle](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Navigation.SfRadialSlider.html#Syncfusion_Windows_Controls_Navigation_SfRadialSlider_EndAngle) properties. The default value of the `EndAngle` property is `0`, and the default value of the `StartAngle` property is `360`.

{% tabs %}
{% highlight xaml %}
Expand Down Expand Up @@ -259,7 +259,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-wpf-

## Step interval

If you want to control the smallest possible range of value to be selected in `SfRadialSlider`, use the `SmallChange` property. The default value of `SmallChange` property is `0.1`. For example, if `SmallChange` is set to `5`, then it is only possible to select values that are multiples of `5`.
If you want to control the smallest possible range of values to be selected in `SfRadialSlider`, use the `SmallChange` property. The default value of the `SmallChange` property is `0.1`. For example, if `SmallChange` is set to `5`, then it is only possible to select values that are multiples of `5`.

{% tabs %}
{% highlight xaml %}
Expand All @@ -281,7 +281,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-wpf-

## Change inner and outer rim radius

You can change inner and outer rim radius of the `SfRadialSlider` by using the [InnerRimRadiusFactor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Navigation.SfRadialSlider.html#Syncfusion_Windows_Controls_Navigation_SfRadialSlider_InnerRimRadiusFactor) and [OuterRimRadiusFactor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Navigation.SfRadialSlider.html#Syncfusion_Windows_Controls_Navigation_SfRadialSlider_OuterRimRadiusFactor) properties. The default value of `InnerRimRadiusFactor` property is `0.2` and `OuterRimRadiusFactor` property is `0.7`.
You can change the inner and outer rim radius of the `SfRadialSlider` by using the [InnerRimRadiusFactor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Navigation.SfRadialSlider.html#Syncfusion_Windows_Controls_Navigation_SfRadialSlider_InnerRimRadiusFactor) and [OuterRimRadiusFactor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Navigation.SfRadialSlider.html#Syncfusion_Windows_Controls_Navigation_SfRadialSlider_OuterRimRadiusFactor) properties. The default value of the `InnerRimRadiusFactor` property is `0.2`, and the default value of the `OuterRimRadiusFactor` property is `0.7`.

{% tabs %}
{% highlight xaml %}
Expand Down Expand Up @@ -384,7 +384,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-wpf-

## Value changed notification

The selected value changed in `SfRadialSlider` can be examined using `ValueChanged` event. The `ValueChanged` event contains the old and newly selected tick value in the `OldValue` and `NewValue` properties.
The selected value change in `SfRadialSlider` can be examined using the `ValueChanged` event. The `ValueChanged` event contains the old and newly selected tick values in the `OldValue` and `NewValue` properties.

{% tabs %}
{% highlight XAML %}
Expand Down Expand Up @@ -417,7 +417,7 @@ private void RadialSlider_ValueChanged(object sender, RoutedPropertyChangedEvent

## Theme

SfRadialSlider supports various built-in themes. Refer to the below links to apply themes for the SfRadialSlider,
The WPF Radial Slider supports various built-in themes. Refer to the following links to apply themes to the control:

* [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager)

Expand Down
8 changes: 4 additions & 4 deletions wpf/Radial-Slider/Overview.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
layout: post
title: About Syncfusion® WPF RadialSlider Control | Syncfusion®
description: Learn about the introduction of Syncfusion® Essential Studio WPF RadialSlider (SfRadialSlider) control and more details.
title: About Syncfusion® WPF Radial Slider Control | Syncfusion®
description: Learn about the introduction of Syncfusion® Essential Studio WPF Radial Slider (SfRadialSlider) control and more details.
platform: wpf
control: SfRadialSlider
documentation: ug
---

# About Syncfusion® WPF RadialSlider (SfRadialSlider) Control
# About Syncfusion® WPF Radial Slider (SfRadialSlider) Control

The [SfRadialSlider](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Navigation.SfRadialSlider.html) provides an optimized interface for selecting a numeric value within the minimum and maximum range in the circular track.
The [WPF Radial Slider](https://www.syncfusion.com/wpf-controls/radial-slider) provides an optimized interface for selecting a numeric value within the minimum and maximum range in the circular track. The WPF Radial Slider is implemented through the [SfRadialSlider](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Navigation.SfRadialSlider.html) class.

## Key features

Expand Down
Loading