WPF-自定义实现步骤条控件

2021-01-27 00:15

阅读:617

标签:tool   val   aml   技术   not   cal   rop   image   ott   

原文:WPF-自定义实现步骤条控件

步骤条实现的效果:

技术图片

步骤条控件是在listbox的基础上实现的。

一、

xaml代码:

技术图片
  "StepListStepWidthConverter" />
        "NormalItemTemplate" TargetType="ListBoxItem">
            "20" />
                "Center" Content="{TemplateBinding Content}" />
                "1" Margin="2">
                    Ellipse
                        Width="10"
                        Height="10"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Fill="#55DCF5" />
                
"SelectedTemplate" TargetType="ListBoxItem">
            "20" />
                "Center" Content="{TemplateBinding Content}" />
                "1" Margin="2">
                    Ellipse
                        Width="8"
                        Height="8"
                        VerticalAlignment="Center"
                        Panel.ZIndex="3">
                        "#FFFFFF" />
                        Ellipse
                        Width="12"
                        Height="12"
                        VerticalAlignment="Center"
                        Panel.ZIndex="2">
                        "#225BA7" />
                        Ellipse
                        Width="16"
                        Height="16"
                        VerticalAlignment="Center"
                        Panel.ZIndex="1">
                        "#FFFFFF" />
                        "SteelBlue">
        ListBox
            Margin="0 200 0 0"
            x:Name="NavList"
            HorizontalAlignment="Center"
            BorderThickness="0"
            Foreground="#225BA7"
            IsEnabled="False"
            ItemContainerStyle="{StaticResource ListBoxItemStyle}"
            SelectedIndex="4"
            Style="{StaticResource StepListBoxStyle}">
            "False" Orientation="Horizontal" />
                123456"Center" Orientation="Horizontal">
            
            
        
技术图片

各个样式模板介绍:StepListBoxStyle,整个步骤条控件的样式,矩形长条模板。

NormalItemTemplate,未被选中时单个步骤样式。

SelectedTemplate,被选中时单个步骤样式。

ListBoxItemStyle,通过样式和触发器使用模板。

二、需要固定步骤条总长度,根据项数设置步骤条步长,所以需要写个转换器,设置每项长度。

转换器代码:

技术图片
    class StepListBarWidthConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            ListBox listBox = value as ListBox;
            if (listBox==null)
            {
                return Binding.DoNothing;
            }
            if (listBox.Items.Count == 0)
            {
                return 0;
            }
            return 510 / (listBox.Items.Count - 1);
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return Binding.DoNothing;
        }
    }
技术图片

使用的时候对Listbox的ItemSource和SelectedIndex进行绑定即可。

 

WPF-自定义实现步骤条控件

标签:tool   val   aml   技术   not   cal   rop   image   ott   

原文地址:https://www.cnblogs.com/lonelyxmas/p/11964841.html


评论


亲,登录后才可以留言!