Appearance and Styling in UWP Radial Slider (SfRadialSlider)

10 May 20219 minutes to read

Inner Rim

Inner Rim term denotes the circle in the center of SfRadialSlider. Following properties can be used to customize the Inner Rim.

Inner Rim Radius Factor

InnerRimRadiusFactor property decides the radius of Inner Rim from the total radius available to render the Radial Slider.

Inner Rim Stroke

InnerRimStroke property can be used to set the stroke color of the Inner Rim.

Inner Rim Stroke Thickness

InnerRimStrokeThickness property can be used to set the thickness of the Inner Rim.

Inner Rim Fill

InnerRimFill property can be used the set the fill color of the Inner Rim.

<syncfusion:SfRadialSlider

InnerRimFill="LightGray" x:Name="radialSlider"

            InnerRimRadiusFactor="0.25"

            InnerRimStroke="LightSkyBlue"

            InnerRimStrokeThickness="4" />
radialSlider.InnerRimRadiusFactor = 0.25;
radialSlider.InnerRimStroke = new SolidColorBrush(Colors.SkyBlue);
radialSlider.InnerRimStrokeThickness = 4;
radialSlider.InnerRimRadiusFactor = 0.25
radialSlider.InnerRimStroke = New SolidColorBrush(Colors.SkyBlue)
radialSlider.InnerRimStrokeThickness = 4

Concepts--and-Features_img6

Outer Rim

Outer Rim term denotes circular track (outer circle) of SfRadialSlider. Following properties can be used to customize the Inner Rim

Outer Rim Radius Factor

OuterRimRadiusFactor property decides the radius of Outer Rim from the total radius available to render the SfRadialSlider.

Outer Rim Stroke

OuterRimStroke property can be used to set the stroke color of the Outer Rim.

Outer Rim Stroke Thickness

OuterRimStrokeThickness property can be used to set the thickness of the Outer Rim.

Background

Background property can be used to fill the Outer Rim.

<syncfusion:SfRadialSlider x:Name="radialSlider"

            Background="LightGray"

            OuterRimRadiusFactor="0.8"

            OuterRimStroke="LightSkyBlue"

            OuterRimStrokeThickness="4" />
radialSlider.OuterRimRadiusFactor = 0.8;
radialSlider.OuterRimStroke = new SolidColorBrush(Colors.SkyBlue);
radialSlider.OuterRimStrokeThickness = 4;
radialSlider.OuterRimRadiusFactor = 0.8
 radialSlider.OuterRimStroke = New SolidColorBrush(Colors.SkyBlue)
 radialSlider.OuterRimStrokeThickness = 4

Concepts--and-Features_img7

Ticks

Ticks displayed along the circular path can be customized using the following properties.

Tick Template

Ticks can be customized using the TickTemplate property.

  • XAML
    • <syncfusion:SfRadialSlider>

            <syncfusion:SfRadialSlider.TickTemplate>

                <DataTemplate>

                    <Border Background="Red"></Border>

                </DataTemplate>

            </syncfusion:SfRadialSlider.TickTemplate>

 </syncfusion:SfRadialSlider>

    Concepts--and-Features_img8

    Tick Radius Factor

    TickRadiusFactor property decides the radius of the ticks from the total radius available to render the SfRadialSlider.

    <syncfusion:SfRadialSlider x:Name="radialSlider"  TickRadiusFactor="0.75"  />
    radialSlider.TickRadiusFactor = 0.25;
    radialSlider.TickRadiusFactor = 0.25

    Concepts--and-Features_img9

    Tick Visibility

    Visibility of ticks can be controlled by TickVisibility property.

    <syncfusion:SfRadialSlider x:Name="radialSlider" TickVisibility="Collapsed" />
    radialSlider.TickVisibility = Visibility.Collapsed;
    radialSlider.TickVisibility = Visibility.Collapsed

    Concepts--and-Features_img10

    Labels

    Labels displayed along the circular path in the Radial slider can be customized by the following properties.

    Label Template

    The LabelTemplate property can be used to customize the label object.

  • XAML
    • <syncfusion:SfRadialSlider>

<syncfusion:SfRadialSlider.LabelTemplate>

           <DataTemplate>

               <TextBlock Text="{Binding}" Foreground="DodgerBlue"></TextBlock>

           </DataTemplate>

       </syncfusion:SfRadialSlider.LabelTemplate>

</syncfusion:SfRadialSlider>

    Concepts--and-Features_img11

    Label Radius Factor

    LabelRadiusFactor property decides the radius of the labels from the total radius available to render the SfRadialSlider.

    Concepts--and-Features_img12

    <syncfusion:SfRadialSlider x:Name="radialSlider" LabelRadiusFactor="0.7" />
    radialSlider.LabelRadiusFactor = 0.7;
    radialSlider.LabelRadiusFactor = 0.7

    Label Visibility

    Visibility of ticks can be controlled by LabelVisibility property.

    <syncfusion:SfRadialSlider x:Name="radialSlider"  LabelVisibility="Collapsed" />
    radialSlider.LabelVisibility = Visibility.Collapsed;
    radialSlider.LabelVisibility = Visibility.Collapsed

    Concepts--and-Features_img13

    Pointer

    The Pointer that is used for the select the value by dragging in circular track can be customized with the following properties.

    Pointer Radius Factor

    The PointerRadiusFactor property decides the radius of the Pointer from the total radius available to render the SfRadialSlider.

    <syncfusion:SfRadialSlider x:Name="radialSlider"  PointerRadiusFactor="0.5" />
    radialSlider.PointerRadiusFactor = 0.5;
    radialSlider.PointerRadiusFactor = 0.5

    Concepts--and-Features_img14

    Pointer Style

    Style of the Pointer can be customized using the PointerStyle property.

  • XAML
    • <syncfusion:SfRadialSlider>

<syncfusion:SfRadialSlider.PointerStyle>

                <Style TargetType="syncfusion:RadialPointer" >

                    <Setter Property="Height" Value="2"/>

                    <Setter Property="Template">

                        <Setter.Value>

                            <ControlTemplate TargetType="syncfusion:RadialPointer">

                                <Border  Background="Red"/>

                            </ControlTemplate>

                        </Setter.Value>

                    </Setter>

                </Style>

            </syncfusion:SfRadialSlider.PointerStyle>

</syncfusion:SfRadialSlider>

    Concepts--and-Features_img15

    Preview Pointer Style

    The Preview Pointer that appears when hovering over the SfRadialSlider can be customized using the PreviewPointerStyle property.

  • XAML
    • <syncfusion:SfRadialSlider

            Minimum="0" 

            Maximum="100"  >

            <syncfusion:SfRadialSlider.PreviewPointerStyle>

                <Style TargetType="syncfusion:RadialPreviewPointer" >

                    <Setter Property="Height" Value="2"/>

                    <Setter Property="Template">

                        <Setter.Value>

     <ControlTemplate TargetType="syncfusion:RadialPreviewPointer">

                                <Border Opacity="0.2"  Background="Red"/>

                          </ControlTemplate>

                        </Setter.Value>

                    </Setter>

                </Style>

            </syncfusion:SfRadialSlider.PreviewPointerStyle>

</syncfusion:SfRadialSlider>

    Concepts--and-Features_img16