WPF 一种带有多个子集的类ComBox 解决方法

2021-02-05 05:16

阅读：618

标签：one add button 其他 pen nbsp format pop tor

　　在最近的工作中遇到很多，类似这种layUI风格的Combox：

技术图片

　　因为WPF原本的控件，并不具备这种功能，尝试重写Combox的模板，发现无从下手。

　　于是尝试从多个控件组合来实现这个功能。

　　这里使用了Popup 来存放数据，发现还不错。

　　将popup分为三列，每个列的列宽设置位自动，当点击其中一个选项的时候，检索所选，根据字典查到数据，再加载其他列。

　　即可实现这种效果

　　代码如下：

　　UI：

Button x:Name="btn1"
                    Height="54"
                    Margin="0,10,0,0"
                    Click="Button_Click">
                    Button.Template>
                        ControlTemplate TargetType="{x:Type Button}">
                            Border
                                Background="Transparent"
                                CornerRadius="15"
                                BorderBrush="#6B778D"
                                BorderThickness="1">
                                Grid>
                                    TextBlock
                                        Text="▼"
                                        Margin="0,0,5,0"
                                        HorizontalAlignment="Right"
                                        VerticalAlignment="Center"
                                        Foreground="White"
                                        FontSize="20" />
                                    TextBlock
                                        Text="{Binding Shell6PageModel.DetailedAddress}"
                                        Margin="10,0,0,0"
                                        VerticalAlignment="Center"
                                        Foreground="White"
                                        FontSize="32" />
                                Grid>
                            Border>
                        ControlTemplate>
                    Button.Template>
                Button>
                Popup x:Name="pop1"
                    Width="{Binding ElementName=btn1, Path=ActualWidth}"
                    Height="260"
                    AllowsTransparency="True"
                    IsOpen="False"
                    Placement="Bottom"
                    PlacementTarget="{Binding ElementName=btn1}"
                    PopupAnimation="Slide"
                    StaysOpen="False">
                    Grid>
                        Border
                            Background="Gray"
                            Opacity="0.9"
                            BorderBrush="Gray"
                            BorderThickness="1"
                            CornerRadius="8" />

                        Border>
                            Grid HorizontalAlignment="Center">
                                Grid>
                                    Grid.ColumnDefinitions>
                                        ColumnDefinition Width="Auto" />
                                        ColumnDefinition Width="Auto" />
                                        ColumnDefinition Width="Auto" />
                                        ColumnDefinition Width="Auto" />
                                    Grid.ColumnDefinitions>

                                    Grid Grid.Column="0">
                                        ListBox
                                            ItemsSource="{Binding Countries}"
                                            ScrollViewer.VerticalScrollBarVisibility="Hidden"
                                            BorderThickness="0">

                                            ListBox.ItemContainerStyle>
                                                Style TargetType="ListBoxItem">
                                                    Setter Property="HorizontalAlignment" Value="Stretch" />
                                                    Setter Property="Template">
                                                        Setter.Value>
                                                            ControlTemplate TargetType="{x:Type ListBoxItem}">
                                                                Grid>
                                                                    Border x:Name="bord1" />
                                                                    ContentPresenter />
                                                                Grid>
                                                                ControlTemplate.Triggers>
                                                                    Trigger Property="IsSelected" Value="True">
                                                                        Setter TargetName="bord1" Property="Background" Value="Transparent" />
                                                                    Trigger>
                                                                ControlTemplate.Triggers>
                                                            ControlTemplate>
                                                        Setter.Value>
                                                    Setter>
                                                Style>
                                            ListBox.ItemContainerStyle>

                                            ListBox.ItemTemplate>
                                                DataTemplate>
                                                    RadioButton
                                                        Content="{Binding DetailedCountry}"
                                                        Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Shell6Page}}, Path=DataContext.countryCommand}"
                                                        CommandParameter="{Binding}"
                                                        Width="100"
                                                        Height="35"
                                                        Margin="0,5,0,5"
                                                        VerticalAlignment="Center"
                                                        Foreground="White"
                                                        FontSize="36"
                                                        GroupName="0" />
                                                DataTemplate>
                                            ListBox.ItemTemplate>

                                        ListBox>


                                    Grid>

                                    Grid Grid.Column="1">
                                        ListBox
                                            ItemsSource="{Binding Shengs}"
                                            ScrollViewer.VerticalScrollBarVisibility="Hidden"
                                            BorderThickness="0">

                                            ListBox.ItemContainerStyle>
                                                Style TargetType="ListBoxItem">
                                                    Setter Property="HorizontalAlignment" Value="Stretch" />
                                                    Setter Property="Template">
                                                        Setter.Value>
                                                            ControlTemplate TargetType="{x:Type ListBoxItem}">
                                                                Grid>
                                                                    Border x:Name="bord1" />
                                                                    ContentPresenter VerticalAlignment="Center" />
                                                                Grid>
                                                                ControlTemplate.Triggers>
                                                                    Trigger Property="IsSelected" Value="True">
                                                                        Setter TargetName="bord1" Property="Background" Value="Transparent" />
                                                                    Trigger>
                                                                ControlTemplate.Triggers>
                                                            ControlTemplate>
                                                        Setter.Value>
                                                    Setter>
                                                Style>
                                            ListBox.ItemContainerStyle>

                                            ListBox.ItemTemplate>
                                                DataTemplate>
                                                    RadioButton
                                                        Content="{Binding DetailedSheng}"
                                                        Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Shell6Page}}, Path=DataContext.shengCommand}"
                                                        CommandParameter="{Binding}"
                                                        Width="100"
                                                        Height="35"
                                                        Margin="0,5,0,5"
                                                        VerticalAlignment="Center"
                                                        Foreground="White"
                                                        FontSize="36"
                                                        GroupName="1" />
                                                DataTemplate>
                                            ListBox.ItemTemplate>

                                        ListBox>


                                    Grid>

                                    Grid Grid.Column="2">
                                        ListBox
                                            ItemsSource="{Binding Cities}"
                                            ScrollViewer.VerticalScrollBarVisibility="Hidden"
                                            BorderThickness="0">
                                            ListBox.ItemContainerStyle>
                                                Style TargetType="ListBoxItem">
                                                    Setter Property="HorizontalAlignment" Value="Stretch" />
                                                    Setter Property="Template">
                                                        Setter.Value>
                                                            ControlTemplate TargetType="{x:Type ListBoxItem}">

                                                                Grid>
                                                                    Border x:Name="bord1" />
                                                                    ContentPresenter />
                                                                Grid>

                                                                ControlTemplate.Triggers>
                                                                    Trigger Property="IsSelected" Value="True">
                                                                        Setter TargetName="bord1" Property="Background" Value="Transparent" />
                                                                    Trigger>
                                                                ControlTemplate.Triggers>
                                                            ControlTemplate>
                                                        Setter.Value>
                                                    Setter>
                                                Style>
                                            ListBox.ItemContainerStyle>

                                            ListBox.ItemTemplate>
                                                DataTemplate>
                                                    RadioButton
                                                        Content="{Binding DetailedCity}"
                                                        Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Shell6Page}}, Path=DataContext.cityCommand}"
                                                        CommandParameter="{Binding}"
                                                        Width="100"
                                                        Height="35"
                                                        Margin="0,5,0,5"
                                                        VerticalAlignment="Center"
                                                        Foreground="White"
                                                        FontSize="36"
                                                        GroupName="2" />
                                                DataTemplate>
                                            ListBox.ItemTemplate>

                                        ListBox>


                                    Grid>

                                    Grid Grid.Column="3">
                                        ListBox
                                            ItemsSource="{Binding Areas}"
                                            ScrollViewer.VerticalScrollBarVisibility="Hidden"
                                            BorderThickness="0">
                                            ListBox.ItemContainerStyle>
                                                Style TargetType="ListBoxItem">
                                                    Setter Property="HorizontalAlignment" Value="Stretch" />
                                                    Setter Property="Template">
                                                        Setter.Value>
                                                            ControlTemplate TargetType="{x:Type ListBoxItem}">

                                                                Grid>
                                                                    Border x:Name="bord1" />
                                                                    ContentPresenter />
                                                                Grid>

                                                                ControlTemplate.Triggers>
                                                                    Trigger Property="IsSelected" Value="True">
                                                                        Setter TargetName="bord1" Property="Background" Value="Transparent" />
                                                                    Trigger>
                                                                ControlTemplate.Triggers>
                                                            ControlTemplate>
                                                        Setter.Value>
                                                    Setter>
                                                Style>
                                            ListBox.ItemContainerStyle>

                                            ListBox.ItemTemplate>
                                                DataTemplate>
                                                    RadioButton
                                                        Content="{Binding DetailedArea}"
                                                        Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:Shell6Page}}, Path=DataContext.areaCommand}"
                                                        CommandParameter="{Binding}"
                                                        Width="100"
                                                        Height="35"
                                                        Margin="0,5,0,5"
                                                        Foreground="White"
                                                        FontSize="36"
                                                        Click="RadioButton_Click"
                                                        GroupName="3" />
                                                DataTemplate>
                                            ListBox.ItemTemplate>

                                        ListBox>


                                    Grid>

                                Grid>


                            Grid>

                        Border>

                    Grid>
                Popup>

View Code

Model：

public class Shell6PageModel:ViewModelBase
    {
        private string detailedAddress;
        /// 
        /// 详细地址
        /// 
        public string DetailedAddress
        {
            get { return detailedAddress; }
            set
            {
                detailedAddress = value;
                
            }
        }

        private string area;
        /// 
        /// 所在地区
        /// 
        public string Area
        {
            get { return area; }
            set { area = value;
                

            }
        }
    }

View Code

ViewModel：

public class Shell6PageViewModel : ViewModelBase
    {
        Dictionarystring, string> AddressCity = new Dictionarystring, string>();
        Dictionarystring, string> AddressArea = new Dictionarystring, string>();
        Dictionarystring, string> AddressSheng = new Dictionarystring, string>();
        Dictionarystring, string> AddressCountry = new Dictionarystring, string>();
        string[] ad;


        public Shell6PageViewModel()
        {
            countryCommand = new RelayCommand(t => GetCountry(t));
            shengCommand = new RelayCommand(t => GetSheng(t));
            cityCommand = new RelayCommand(t => GetCity(t));
            areaCommand = new RelayCommand(t => GetArea(t));


            Shell6PageModel = new Shell6PageModel()
            {
                Area = EAppEnvironment.informationInfo.Area,

                DetailedAddress = EAppEnvironment.informationInfo.DetailedAddress

            };
            InitDictionary();
        }


        private void GetArea(Area t)
        {
            ad[3] = t.DetailedArea;
            Shell6PageModel.DetailedAddress = "";
            foreach (var item in ad)
            {
                Shell6PageModel.DetailedAddress += item;
            }
           
        }

        private void GetCity(City t)
        {
            Areas.Clear();

            ad[2] = t.DetailedCity;
            Shell6PageModel.DetailedAddress = "";
            foreach (var item in ad)
            {
                Shell6PageModel.DetailedAddress += item;
            }

            foreach (var item in AddressArea)
            {
                if (t.DetailedCity == item.Value)
                {
                    Areas.Add(new Area { DetailedArea = item.Key });

                }
            }
        }

        private void GetSheng(Sheng t)
        {
            Cities.Clear();
            Areas.Clear();
            ad[1] = t.DetailedSheng;
            Shell6PageModel.DetailedAddress = "";
            foreach (var item in ad)
            {
                Shell6PageModel.DetailedAddress += item;
            }
            foreach (var item in AddressCity)
            {
                if (t.DetailedSheng == item.Value)
                {
                    Cities.Add(new City() { DetailedCity = item.Key });

                }
            }

        }

        private void GetCountry(Country t)
        {
            Shengs.Clear();
            Cities.Clear();
            Areas.Clear();
            ad = null;
            ad = new string[4];
            ad[0] = t.DetailedCountry;
            Shell6PageModel.DetailedAddress = "";
            foreach (var item in ad)
            {
                Shell6PageModel.DetailedAddress += item;
            }
            foreach (var item in AddressSheng)
            {
                if (t.DetailedCountry == item.Value)
                {
                    Shengs.Add(new Sheng() { DetailedSheng = item.Key });
                }
            }
        }


        private Shell6PageModel shell6PageModel;

        public Shell6PageModel Shell6PageModel
        {
            get { return shell6PageModel; }
            set { shell6PageModel = value; RaisePropertyChanged(); }
        }




        public RelayCommand shengCommand { get; set; }

        public RelayCommand countryCommand { get; set; }

        public RelayCommand cityCommand { get; set; }
        public RelayCommand areaCommand { get; set; }



        private ObservableCollection countries;

        public ObservableCollection Countries
        {
            get { return countries; }
            set { countries = value; RaisePropertyChanged(); }
        }


        private ObservableCollection shengs;

        public ObservableCollection Shengs
        {
            get { return shengs; }
            set { shengs = value; RaisePropertyChanged(); }
        }


        private ObservableCollection cities;

        public ObservableCollection Cities
        {
            get { return cities; }
            set { cities = value; RaisePropertyChanged(); }
        }


        private ObservableCollection areas;

        public ObservableCollection Areas
        {
            get { return areas; }
            set { areas = value; RaisePropertyChanged(); }
        }


        public void InitDictionary()
        {
            Countries = new ObservableCollection();
            Shengs = new ObservableCollection();
            Cities = new ObservableCollection();
            Areas = new ObservableCollection();

            Countries.Add(new Country() { DetailedCountry = "中国" });
            Countries.Add(new Country() { DetailedCountry = "国外" });



            AddressSheng.Add("湖北1", "中国");
            AddressSheng.Add("湖北2", "中国");
            AddressSheng.Add("湖北3", "中国");
            AddressSheng.Add("湖北4", "中国");
            AddressSheng.Add("湖北5", "中国");
            AddressSheng.Add("湖北6", "中国");
            AddressSheng.Add("湖北7", "中国");
            AddressSheng.Add("湖北8", "中国");
            AddressSheng.Add("纽约1", "国外");
            AddressSheng.Add("纽约2", "国外");
            AddressSheng.Add("纽约3", "国外");
            AddressSheng.Add("纽约4", "国外");
            AddressSheng.Add("纽约5", "国外");
            AddressSheng.Add("纽约6", "国外");
            AddressSheng.Add("纽约7", "国外");
            AddressSheng.Add("纽约8", "国外");




            AddressCity.Add("孝感", "湖北1");
            AddressCity.Add("武汉", "湖北1");
            AddressCity.Add("襄阳", "湖北1");
            AddressCity.Add("十堰", "湖北1");
            AddressCity.Add("仙桃", "湖北1");
            AddressCity.Add("鄂州", "湖北2");
            AddressCity.Add("黄冈", "湖北2");
            AddressCity.Add("神农架", "湖北2");
            AddressCity.Add("黄石", "湖北2");
            AddressCity.Add("恩施", "湖北2");
            AddressCity.Add("湖南1", "湖北3");
            AddressCity.Add("湖南2", "湖北3");
            AddressCity.Add("湖南3", "湖北3");
            AddressCity.Add("湖南4", "湖北3");
            AddressCity.Add("湖南5", "湖北3");
            AddressCity.Add("湖南6", "湖北3");
            AddressCity.Add("湖南7", "湖北3");




            AddressArea.Add("孝感1", "孝感");
            AddressArea.Add("孝感2", "孝感");
            AddressArea.Add("孝感3", "孝感");
            AddressArea.Add("孝感4", "孝感");
            AddressArea.Add("孝感5", "孝感");
            AddressArea.Add("孝感6", "孝感");
            AddressArea.Add("孝感7", "孝感");
            AddressArea.Add("孝感8", "孝感");


        }
    }

View Code

WPF 一种带有多个子集的类ComBox 解决方法

标签：one add button 其他 pen nbsp format pop tor

原文地址：https://www.cnblogs.com/ganbei/p/14363577.html

上一篇：C# 压缩Excel中的图片

下一篇：搬家第五天-118.Wincc V7.3 ListView控件初步使用11-导出到自定义路径excel文件

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：WPF 一种带有多个子集的类ComBox 解决方法
文章链接：http://soscw.com/index.php/essay/51192.html

亲，登录后才可以留言！

WPF 一种带有多个子集的类ComBox 解决方法

评论

热门文章

推荐文章

最新文章

置顶文章