WPF自定义控件之双滑块Slider
<div id="cnblogs_post_body"> 今天写搜索界面，有许多值范围搜索的项，先是做了两个Textbox加两个Slider来实现选择起始->结束值的范围，后来发现这样用户操作性太不好，前台代码又很臃肿，干脆想办法写了个自定义的控件。首先来看下最终效果吧：http://pic002.cnblogs.com/images/2012/327390/2012072223545668.png http://pic002.cnblogs.com/images/2012/327390/2012072300134140.png
具体的交互基本就是左边框是起始值，右边框是终止值，它们数据的是和两个滑块绑定的，会互相更新。左边的滑块是不能拖到右边滑块之外的，同理右边也不能到左边，如果输入的值超出（小于）上限值（下限），则会把值取为上限值（下限）。
我的思路就是定义两个Slider，然后拼起来，哈哈！好吧，来看前台代码：
<div class="cnblogs_code"> 1 <UserControl x:Class="FS.PresentationManagement.Controls.SilderArrange" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 Name="UC_Arrange" Loaded="UC_Arrange_Loaded"> 5 <StackPanel Orientation="Horizontal" Height="{Binding ElementName=UC_Arrange,Path=SilderHeight}" > 6 <TextBox Text="{Binding ElementName=SL_Bat1,Path=Value}" KeyUp="TextBox_KeyUp1" Width="35" Margin="0,3" BorderBrush="CornflowerBlue" /> 7 <Canvas Width="{Binding ElementName=UC_Arrange,Path=SilderWidth}" Margin="0,0,5,0"> 8 <Slider Name="SL_Bat1" 9 Value="{Binding ElementName=UC_Arrange,Path=StartValue}"10 Minimum="{Binding ElementName=UC_Arrange,Path=Minimum}"11 Maximum="{Binding ElementName=UC_Arrange,Path=Maximum}"12 SelectionStart="{Binding ElementName=UC_Arrange,Path=StartValue}"13 SelectionEnd="{Binding ElementName=UC_Arrange,Path=EndValue}"14 Width="{Binding ElementName=UC_Arrange,Path=SilderWidth}"15 TickFrequency="{Binding ElementName=UC_Arrange,Path=SliderTickFrequency}"16 FocusVisualStyle="{x:Null}"17 CacheMode="BitmapCache"18 IsSelectionRangeEnabled="True"19 TickPlacement="BottomRight"20 IsSnapToTickEnabled="True"21 VerticalAlignment="Center"22 Margin="2"23 ValueChanged="SL_Bat1_ValueChanged">24 <Slider.Clip>25 <RectangleGeometry Rect="{Binding ElementName=UC_Arrange,Path=StartRect}" />26 </Slider.Clip>27 </Slider>28 <Slider Name="SL_Bat2" 29 Value="{Binding ElementName=UC_Arrange,Path=EndValue}" 30 Minimum="{Binding ElementName=UC_Arrange,Path=Minimum}" 31 Maximum="{Binding ElementName=UC_Arrange,Path=Maximum}" 32 SelectionStart="{Binding ElementName=UC_Arrange,Path=StartValue}" 33 SelectionEnd="{Binding ElementName=UC_Arrange,Path=EndValue}" 34 Width="{Binding ElementName=UC_Arrange,Path=SilderWidth}"35 TickFrequency="{Binding ElementName=UC_Arrange,Path=SliderTickFrequency}"36 FocusVisualStyle="{x:Null}"37 CacheMode="BitmapCache"38 IsSelectionRangeEnabled="True" 39 TickPlacement="BottomRight"40 IsSnapToTickEnabled="True"41 VerticalAlignment="Center"42 Margin="2"43 ValueChanged="SL_Bat2_ValueChanged">44 <Slider.Clip>45 <RectangleGeometry Rect="{Binding ElementName=UC_Arrange,Path=EndRect}" />46 </Slider.Clip> 47 </Slider>48 </Canvas>49 <TextBox Text="{Binding ElementName=SL_Bat2,Path=Value}" KeyUp="TextBox_KeyUp2" Width="35" Margin="0,3" BorderBrush="CornflowerBlue"/> 50 </StackPanel>51 </UserControl>
页:
[1]