Search code examples
c#wpfrad-controls

Adding histogram on slider in C# wpf

How can I draw a histogram on the Radslider like the image shown below using C# WPF? I've searched on net but not getting info.

enter image description here

Solution

  • Hi,

                   <StackPanel  Grid.Column="1"  Margin="7,-72,7.5,0">
                     <telerik:RadCartesianChart Palette="Summer" >
                          <telerik:RadCartesianChart.HorizontalAxis>
                             <telerik:CategoricalAxis Visibility="Hidden"/>
                        </telerik:RadCartesianChart.HorizontalAxis>
                        <telerik:RadCartesianChart.VerticalAxis>
                         <telerik:LinearAxis Visibility="Hidden" MajorStep="20" />
                    </telerik:RadCartesianChart.VerticalAxis>
                    <telerik:RadCartesianChart.Series>
                        <telerik:BarSeries ItemsSource="{Binding KeyValue, Mode=TwoWay}" CategoryBinding="Key" ValueBinding="Value">
                            <telerik:BarSeries.PointTemplates>
                                <DataTemplate>
                                    <Rectangle Width="3" Fill="SkyBlue"/>
                                </DataTemplate>
                            </telerik:BarSeries.PointTemplates>
                        </telerik:BarSeries>
                    </telerik:RadCartesianChart.Series>
                </telerik:RadCartesianChart>
            </StackPanel>

           <telerik:RadSlider Minimum="{Binding LowValue,Mode=TwoWay}"  Height="13" 
            Margin="5" Grid.Column="1" Maximum="{Binding HighValue,Mode=TwoWay}" 
            SelectionEnd="{Binding SelectionHigh,Mode=TwoWay}" 
            SelectionStart="  {Binding SelectionLow,Mode=TwoWay}"
            TickPlacement="TopLeft"  
            SelectionChanged="RadSlider_SelectionChanged" SelectionRangeEnabled="True" 
            IsDirectionReversed="False" SmallChange="10" VerticalAlignment="Bottom">                        
             </telerik:RadSlider>

    Instead of customizing RadSlider you can add a RadChart & RadSlider in the same column as I've shown. I am just putting the Xaml code With the bindings, Now you can write the logic for histogram.