WPF篇（13）-ScrollViewer控件+ScrollBar滚动条+Slider滑动条

news2024/9/22 11:29:40

ScrollViewer控件

如果某个控件的尺寸太大，当前界面无法全部显示，则可以将这个控件包含在ScrollViewer中，因为ScrollViewer控件封装了一个水平滚动条ScrollBar和一个垂直滚动条ScrollBar，所以，ScrollViewer就是一个包含其它可视元素的可滚动区域控件。

ScrollViewer继承于ContentControl，所以它也是一个内容控件，只能在Content属性中设置一个子元素，如果要在ScrollViewer中显示多个子元素，请设置一个集合控件。
ScrollViewer 控件既响应鼠标命令，也响应键盘命令，并定义许多可用于按预设的增量滚动内容的方法。 可以使用 ScrollChanged 事件来检测 ScrollViewer 状态的变化。

属性成员

  • HorizontalScrollBarVisibility：是否隐藏水平滚动条，为true表示隐藏，此时水平方向不可滚动。
  • VerticalScrollBarVisibility：是否隐藏垂直滚动条，为true表示隐藏，此时垂直方向不可滚动。

事件成员

  • ScrollChanged：当控件的滚动位置发生变化时将触发此事件。

示例

<ScrollViewer VerticalScrollBarVisibility="Auto">
        <WrapPanel>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
                        <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
        </WrapPanel>
    </ScrollViewer>

在这里插入图片描述

如上所示，我们在WrapPanel中增加了许多子元素，然后在外面套了一层ScrollViewer，由于WrapPanel是自动换行显示所有子元素（图片），所以，ScrollViewer会做出相应适配，只显示垂直滚动条。

<ScrollViewer HorizontalScrollBarVisibility="Auto">
        <WrapPanel>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
                        <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
        </WrapPanel>
    </ScrollViewer>

在这里插入图片描述

ScrollBar滚动条

ScrollBar表示一个滚动条，该滚动条具有一个滑动 Thumb，其位置对应于一个值。它继承于RangeBase抽象基类，RangeBase基类继承于Control基类。带滚动特质的还有两个控件，也继承于RangeBase抽象基类，它们分别是ProgressBar（进度条）和Slider（滑动条）。

RangeBase属性

  • LargeChange：表示给Value属性加减的最大值。默认为1。
  • SmallChange：表示给Value属性加减的最小值。默认为0.1。
  • Value：获取或设置范围控件的当前数量。默认为0。
  • Maximum：获取或设置Value属性的最大值。
  • Minimum：获取或设置Value属性的最小值。

RangeBase事件成员

ValueChanged：当前Value属性发生改变时触发的事件。

注意：ScrollBar、ProgressBar和Slider都将继承上面的属性、方面与事件成员。

ScrollBar自身属性

ScrollBar自身有两个属性，Orientation 和ViewportSize 。

  • Orientation ：表示当前滚动条是水平的还是垂直的。
  • ViewportSize：获取或设置当前可见的可滚动内容的数量。默认值为0。

另外，它还有一个滚动事件Scroll可以使用。

举例

前端代码

<Grid x:Name="viewport" >
        <Grid.RowDefinitions>
            <RowDefinition Height="115"/>
            <RowDefinition Height="auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Canvas>
            <StackPanel x:Name="element" Orientation="Horizontal" Canvas.Left="{Binding CanvasLeft}">
               <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
                        <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" Width="100" Height="100"/>
            </Border>
            </StackPanel>
        </Canvas>        
        <ScrollBar Grid.Row="1" Orientation="Horizontal" 
                   Maximum="{Binding Maximum}"
                   Value="{Binding X}"
                   ViewportSize="{Binding ElementName=viewport,Path=ActualWidth}"/>
        <TextBlock Grid.Row="2" Text="ScrollBar" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24"/>
    </Grid>

观察这个UI设计，在StackPanel控件中增加了多张图片，使其不能完全在Canvas中显示出来，然后在下面实例化了一根水平滚动条。注意滚动条的其中三个参数使用了绑定。

  • Maximum：表示这根滚动条的最大值。

  • Value：表示滚动条的当前值。

  • ViewportSize：表示滚动条要作用于某个控件的宽度（这里实际上指Grid的宽度）。

最后，我们将StackPanel控件的Canvas.Left依赖属性绑定到一个CanvasLeft属性。只要CanvasLeft属性的值发生改变，那么StackPanel相对于Canvas水平位置就发生改变。

那么CanvasLeft属性是怎样发生改变的呢？这一切将在后台代码中实现。

后端代码

 /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : INotifyPropertyChanged
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = this;//将当前窗体作为ViewModel赋值给当前窗体的DataContext
            Loaded += (s, e) =>
            {
                //计算滚动条的最大值
                Maximum = element.ActualWidth - viewport.ActualWidth;
            };
        }
 
        private double maximum = 0;
        /// <summary>
        /// 滚动条的最大值
        /// </summary>
        public double Maximum
        {
            get { return maximum; }
            set { maximum = value; NotifyPropertyChanged("Maximum"); }
        }
 
        private double x = 0;
        /// <summary>
        /// 滚动条的当前值
        /// </summary>
        public double X
        {
            get { return x; }
            set { x = value; CanvasLeft = -x; NotifyPropertyChanged("X"); }
        }
 
        private double canvasLeft = 0;
        /// <summary>
        /// 相对于Canvas控件Left边距
        /// </summary>
        public double CanvasLeft
        {
            get { return canvasLeft; }
            set { canvasLeft = value; NotifyPropertyChanged("CanvasLeft"); }
        }
 
        public event PropertyChangedEventHandler PropertyChanged;
 
        /// <summary>
        /// 属性通知方法
        /// </summary>
        /// <param name="propertyName"></param>
        protected virtual void NotifyPropertyChanged(string propertyName)
        {
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

在这里插入图片描述

如果把下面这段代码换成Slider控件，也是可以用的：

更换前

<ScrollBar Grid.Row="1" Orientation="Horizontal" 
                   Maximum="{Binding Maximum}"
                   Value="{Binding X}"
                   ViewportSize="{Binding ElementName=viewport,Path=ActualWidth}"/>

更换后

<Slider Grid.Row="1" Maximum="{Binding Maximum}" Value="{Binding X}"/>

Slider滑动条

Slider滑动条与ScrollBar滚动条有点相似，甚至某些情况下，两者还可以互换使用。Slider也继承于RangeBase基类，其功能是提供一个可以滑动取值的控件。

属性成员

  • IsSnapToTickEnabled：Slider会有一些刻度线，如果要求Thumb移动到最近的刻度线，则可将该值设置为true。
  • AutoToolTipPrecision：获取或设置Slider的值的小数点位数。
  • AutoToolTipPlacement ：获取或设置按下Thumb时是否显示提示工具。
  • Interval ：获取或设置用户按下RepeatButton时执行增加减少命令的时间间隔（毫秒）。
  • Delay ：获取或设置用户按下RepeatButton时延时多少毫秒后执行命令
  • IsDirectionReversed： 获取或设置增加值的方向。
  • Orientation ：获取或设置Slider的方向。水平或垂直。
  • TickFrequency： 获取或设置刻度线之间的间隔。默认为1.0
  • Ticks： 获取或设置为 System.Windows.Controls.Slider 显示的刻度线的位置。
  • SelectionStart： 获取或设置 System.Windows.Controls.Slider 的指定选择内容的最大值。
  • TickPlacement： 获取或设置刻度线的位置
  • IsSelectionRangeEnabled： 获取或设置显示选择范围
  • IsMoveToPointEnabled： 如果Thumb 立即移动到鼠标单击的位置，则为true。
  • SelectionEnd ：获取或设置 System.Windows.Controls.Slider 的指定选择内容的最大值。

示例

 <Grid x:Name="viewport" >
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <Canvas>
            <Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Padding="3" Margin="3">
                <Image Source="pack://application:,,,/Images/R-C.jpg" 
                       Width="{Binding ElementName=slider,Path=Value}" 
                       Height="{Binding ElementName=slider,Path=Value}"/>
            </Border>
        </Canvas>
        <DockPanel Grid.Row="1">
            <TextBlock Text="滑动改变图片大小" Margin="3" FontSize="14"/>
            <Slider x:Name="slider" Minimum="50" Maximum="500" Value="50" Margin="3"/>
        </DockPanel>        
    </Grid>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1997134.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

基于llama.cpp实现Llama3模型的guff格式转换、4bit量化以及GPU推理加速（海光DCU）

基于llama.cpp实现Llama3模型的guff格式转换、4bit量化以及GPU推理加速（海光DCU）

重要说明&#xff1a;本文从网上资料整理而来&#xff0c;仅记录博主学习相关知识点的过程&#xff0c;侵删。 序言 本文使用llama.cpp框架&#xff0c;对 Llama3-8B-Instruct 模型进行gguf格式转换&#xff0c;8bit量化&#xff0c;并在CPU和GPU上对8bit模型进行推理。 测试…
阅读更多...
5.5.transformer

5.5.transformer

Transformer ​ Transformer是由编码器和解码器组成的&#xff0c;基于自注意力的模块叠加而成的&#xff0c;源(输入)序列和目标(输出)序列的嵌入(embedding)表示将加上位置编码在分别输入到编码器和解码器中&#xff1a; ​ ​ 从宏观角度来看&#xff0c;Transformer的编码…
阅读更多...
Elastic 8.15：更好的语义搜索、新的 OTel 分布、SIEM 数据导入

Elastic 8.15：更好的语义搜索、新的 OTel 分布、SIEM 数据导入

作者&#xff1a;来自 Elastic Brian Bergholm 今天&#xff0c;我们很高兴地宣布 Elastic 8.15 正式发布。 有什么新功能&#xff1f; 8.15 版本包含大量新功能&#xff0c;包括更多工具来优化相关性、增强模型的灵活性和改进向量搜索&#xff0c;以及在 AI 驱动的安全分析方…
阅读更多...
学习大数据DAY35 利用 echarts 的开源图表和 python 异常处理优化网站

学习大数据DAY35 利用 echarts 的开源图表和 python 异常处理优化网站

目录 根据分数统计电影数量来生成图表 上机练习 14 添加异常 添加电影类型判断是整数及正整数异常 部署项目到 Nginx 上机练习 15 根据分数统计电影数量来生成图表 Echarts 官网&#xff1a; https://echarts.apache.org/examples/zh/index.html 下载柱状图和饼图 可以…
阅读更多...
访问网站显示不安全如何处理

访问网站显示不安全如何处理

当访问网站时浏览器提示“不安全”&#xff0c;这通常是由于多种原因造成的。下面是一些常见的原因及其解决办法&#xff1a; 未启用HTTPS协议 如果网站仅使用HTTP协议&#xff0c;数据传输没有加密&#xff0c;会被浏览器标记为“不安全”。解决办法是启用HTTPS协议&#xff…
阅读更多...
C++(4):基类-派生类

C++(4):基类-派生类

基类—>派生类 先构造基类再构造派生类 匿名对象形式向基类传参&#xff0c;基类先构造先传参 复制构造函数&#xff0c;采用类型兼容性规则即用派生类代替基类 使用protect派生类可访问其它地方不能访问 private只能自己访问 p访问的是自己类里的showTime 类型兼容性规则&…
阅读更多...
HCIP | 实验二

HCIP | 实验二

概述 要求&#xff1a; 1.如图连接&#xff0c;合理规划IP地址&#xff0c;所有路由器各自创建一个loopback接口 2.R1再创建三个接口IP地址为201.1.1.1/24、201.1.2.1/24、201.1.3.1/24 R5再创建三个接口IP地址为202.1.1.1/24、202.1.2.1/24、202.1.3.1/24 R7再创建三个接口…
阅读更多...
Mac平台M1PRO芯片MiniCPM-V-2.6网页部署跑通

Mac平台M1PRO芯片MiniCPM-V-2.6网页部署跑通

Mac平台M1PRO芯片MiniCPM-V-2.6网页部署跑通 契机 ⚙ 2.6的小钢炮可以输入视频了&#xff0c;我必须拉到本地跑跑。主要解决2.6版本默认绑定flash_atten问题&#xff0c;pip install flash_attn也无法安装&#xff0c;因为强制依赖cuda。主要解决的就是这个问题&#xff0c;还…
阅读更多...
批发行业进销存-入库单表格识别 源码CyberWinApp-SAAS 本地化及未来之窗行业应用跨平台架构

批发行业进销存-入库单表格识别 源码CyberWinApp-SAAS 本地化及未来之窗行业应用跨平台架构

一、进销存入库进货单单识别意义 对个人、商品、公示内容等纸质信息登记表进行识别&#xff0c;用于登记信息的结构化整理和统计&#xff0c;大幅度降低人力录入成本&#xff0c;提升信息管理的便捷性 1. 提高效率&#xff1a;自动转换节省了手动录入的时间和精力&#xff0c;…
阅读更多...
实景视频可视化的结构化脚本，脚本分为三类：文字脚本，分镜头脚本和动态脚本

实景视频可视化的结构化脚本，脚本分为三类：文字脚本，分镜头脚本和动态脚本

在视频创作的世界中&#xff0c;脚本是创作的基础和核心。无论是简短的广告视频&#xff0c;还是复杂的电影制作&#xff0c;脚本都扮演着不可或缺的角色。随着视频内容需求的多样化&#xff0c;结构化脚本逐渐成为确保创作效率和质量的重要工具。结构化脚本不仅帮助创作者清晰…
阅读更多...
PythonStudio 控件使用常用方式（十八）TCategoryButtons

PythonStudio 控件使用常用方式（十八）TCategoryButtons

PythonStudio是一个极强的开发Python的IDE工具&#xff0c;它使用的是Delphi的控件&#xff0c;常用的内容是与Delphi一致的。但是相关文档并一定完整。现在我试试能否逐步把它的控件常用用法写一点点&#xff0c;也作为PythonStudio的参考。 从1.2.1版开始&#xff0c;Python…
阅读更多...
Elastic Search 8.15：通过语义文本和重新排序实现可访问的语义搜索

Elastic Search 8.15：通过语义文本和重新排序实现可访问的语义搜索

作者&#xff1a;来自 Elastic Nick Chow, Sunayana Vatassery 在 8.15 中&#xff0c;我们的客户可以更轻松地获得出色的搜索结果。我们的最新版本带来了语义重新排名&#xff08;semantic reranking&#xff09;、额外的向量搜索工具和更多第三方模型提供商&#xff0c;并将我…
阅读更多...
告别焦虑：使用 acme 实现 ssl 免费证书到期自动更新

告别焦虑：使用 acme 实现 ssl 免费证书到期自动更新

文章目录 前言什么是 ACME 协议&#xff1f;ACME 使用指南安装下载使用 gitee 下载设置别名&#xff08;非必要&#xff09;注册账号更改证书生成方式生成证书重新生成证书并认证安装 SSL 证书 使用 SSL 证书验证 配置证书自动续期证书续期命令自动续期查看添加的定时任务 cron…
阅读更多...
haproxy基础

haproxy基础

目录 1 HAProxy介绍 1.1 版本对比 1.2 HAProxy功能 2 参数介绍与实践 2.1 global参数说明 2.2 真实代码格式实例 2.3 常用全局参数 2.3.1 nbproc -- 开启几个进程 2.3.2 cpu-map(CUP绑定) 2.3.3 nbthread 2 --开启2个线程 3 Proxies配置 3.1 Proxies配置-defaults 3.2 Proxi…
阅读更多...
dolphinscheduler版本差异的配置造成的故障处理

dolphinscheduler版本差异的配置造成的故障处理

dolphinscheduler1.3.4的common.properties的配置 [root@dbos-bigdata-test003 conf]# vim /opt/dolphinscheduler/conf/common.properties 下面的这个配置中8088直接在配置成端口即可 yarn.application.status.address=http://yarnIp1:8088/ws/v1/cluster/apps/%s dolphin…
阅读更多...
守护历史文化瑰宝，RFID藏品管理系统助力文物保护

守护历史文化瑰宝，RFID藏品管理系统助力文物保护

在中国悠久的历史长河中&#xff0c;有一座蕴藏着千年文化的古老建筑。这座建筑曾经是伟大文人杜甫的居所&#xff0c;承载着他卓越的文学成就和丰富的人生经历。然而&#xff0c;这样一座历史文化瑰宝的保护和管理一直面临着诸多挑战。 为了解决这一难题&#xff0c;我…
阅读更多...
运维工具的衍化对运维工作的新挑战

运维工具的衍化对运维工作的新挑战

运维工具的衍化对运维工作产生了深远的影响&#xff0c;这些影响体现在多个方面&#xff0c;包括提升运维效率、优化资源配置、增强故障应对能力、促进团队协作与沟通&#xff0c;以及面临新的挑战如数据安全和隐私保护等。运维工具的衍化对运维工作带来了多方面的新挑战&#…
阅读更多...
用户体验至上：9款软件界面设计工具分享

用户体验至上：9款软件界面设计工具分享

你知道如何选择正确的UI设计软件吗&#xff1f;您知道哪些界面设计软件需要设计美观的用户界面&#xff0c;以及带来良好用户体验的APP吗&#xff1f;根据APP界面的不同功能&#xff0c;制作软件界面的选择也会有所不同。但是&#xff0c;并非要非常精通所有的制作软件界面&…
阅读更多...
k8s集群管理 Pod管理命令

k8s集群管理 Pod管理命令

k8s集群管理命令 信息查询命令 子命令说明help用于查看命令及子命令的帮助信息cluster-info显示集群的相关配置信息api-resources查看当前服务器上所有的资源对象api-versions查看当前服务器上所有资源对象的版本config管理当前节点上的认证信息 资源对象概述 Pod概述 Pod 管…
阅读更多...
vscode 快速生成vue 格式

vscode 快速生成vue 格式

1.用快捷Ctrl Shift P唤出控制台 输入“Snippets”并选择 Snippets: Configure User Snippets 2.输入vue&#xff0c;选中vue.json vs code自动生成vue.json文件 3.在 vue.json 中添加模板 {"Print to console": {"prefix": "vue2","b…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023