c# - 在 C# wpf 中的 slider 上添加直方图

Question

如何使用 C# WPF 在 Radslider 上绘制直方图，如下图所示？我在网上搜索过，但没有得到信息。

Answer 1

你好，

               <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>

除了自定义 RadSlider，您还可以在我显示的同一列中添加 RadChart & RadSlider。我只是将 Xaml 代码与绑定(bind)放在一起，现在您可以编写直方图的逻辑了。