WPF中Slider控件的用法与详解

Wangzhe910113

已于 2024-04-17 10:07:52 修改

阅读量713

点赞数 27

分类专栏： WPF学习文章标签： wpf c#

于 2024-04-17 09:59:34 首次发布

本文链接：https://blog.csdn.net/Wangzhe910113/article/details/137859220

版权

WPF学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

正在学习WPF，做个简单的记录

<Slider Maximun="100/> 最大行程

TickPlacement 属性：可以增加刻度，可以控制在上方还是下方；

TickFrequency 属性：刻度值默认为1 可以更改刻度数值；

IsSnapToTickEnabled 属性：默认值双精度小数，设置为true可以确保每次值都在对应的刻度值上；

2.联合textbox控件一起使用

<StackPanel>
    <TextBox x:Name="textBox1"  Text="{Binding Path=Value, 
ElementName=slider1,UpdateSourceTrigger=PropertyChanged}"
BorderBrush="Black"  Margin="5"/>
    <Slider x:Name="slider1"  Maximum="100"  Minimum="0"  Margin="5"
            TickFrequency="1" IsSnapToTickEnabled="True"/>
</StackPanel>

TickPlacement="BottomRight" 此属性可以不进行设置，就不在显示刻度， TickFrequency="5"属性改为1，即可实现整数

Textbox中UpdateSourceTrigger=PropertyChanged属性如果不设置，在Textbox中更改数值Slider的控件不会根据数值进行移动；

最后来看一下我们的实际使用效果吧！

<Window x:Class="WPF.Learn.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:local="clr-namespace:WPF.Learn"
        mc:Ignorable="d"
        Title="MainWindow" Height="200" Width="300">
    <Grid>
        <StackPanel Margin="10" VerticalAlignment="Center">
            <DockPanel VerticalAlignment="Center" Margin="10">
                <TextBlock Text="R" FontWeight="Bold" DockPanel.Dock="Left" VerticalAlignment="Center"/>
                <TextBox   Text="{Binding Path=Value, ElementName=slColorR,UpdateSourceTrigger=PropertyChanged}"
                          Margin="5" DockPanel.Dock="Right" TextAlignment="Right" Width="40"/>
                <Slider x:Name="slColorR"  Maximum="255"  Minimum="0"  Margin="5" 
                     TickFrequency="1" IsSnapToTickEnabled="True" ValueChanged="ColorSlider_ValueChanged"/>
            </DockPanel>
            
            <DockPanel VerticalAlignment="Center" Margin="10">
                <TextBlock Text="G" FontWeight="Bold" DockPanel.Dock="Left" VerticalAlignment="Center"/>
                <TextBox Text="{Binding Path=Value, ElementName=slColorG,UpdateSourceTrigger=PropertyChanged}"
              Margin="5" DockPanel.Dock="Right" TextAlignment="Right" Width="40"/>
                <Slider x:Name="slColorG"  Maximum="255"  Minimum="0"  Margin="5" 
         TickFrequency="1" IsSnapToTickEnabled="True" ValueChanged="ColorSlider_ValueChanged"/>
            </DockPanel>
            
            <DockPanel VerticalAlignment="Center" Margin="10">
                <TextBlock Text="B" FontWeight="Bold" DockPanel.Dock="Left" VerticalAlignment="Center"/>
                <TextBox Text="{Binding Path=Value, ElementName=slColorB,UpdateSourceTrigger=PropertyChanged}"
              Margin="5" DockPanel.Dock="Right" TextAlignment="Right" Width="40"/>
                <Slider x:Name="slColorB"  Maximum="255"  Minimum="0"  Margin="5" 
         TickFrequency="1" IsSnapToTickEnabled="True" ValueChanged="ColorSlider_ValueChanged"/>
            </DockPanel>
        </StackPanel>
    </Grid>
</Window>

Xaml界面的代码，下面是Cs的代码；

namespace WPF.Learn
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {

        public MainWindow()
        {
            InitializeComponent();
        }
        private void ColorSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            Color color = Color.FromRgb((byte)slColorR.Value, (byte)slColorG.Value, (byte)slColorB.Value);
            this.Background = new SolidColorBrush(color);
        }
    }

效果图：