none
如何让ComboBox的选项看起来跟ListView一样? RRS feed

  • 问题

  • 如上图所示,如何实现ComboBox的选项分组+横向排列?类似WindowsExplorer的效果,但是选中(单击)之后只在ComboBox里面显示名称(Test Analysis、Test Calibration等纯文字)




    2017年10月9日 0:54

答案

  • Hi,

    尝试根据你的需求实现,但是效果不好,如果你有兴趣,你可以参考并修改下面的代码,如果你有更好的解决方案欢迎你在这里分享。

       public partial class sample4 : Window
        {
            public ObservableCollection<Report> Reports { get; set; }
    
            public class Report : PropertyNotifyBaseClass
            {
                private string reportName;
                public string ReportName
                {
                    get { return reportName; }
                    set { reportName = value; RaisePropertyChanged("ReportName"); }
                }
                private string reportImage;
                public string ReportImage
                {
                    get { return reportImage; }
                    set { reportImage = value; RaisePropertyChanged("ReportImage"); }
                }
    
                private string reportType;
                public string ReportType
                {
                    get { return reportType; }
                    set { reportType = value; RaisePropertyChanged("ReportType"); }
                }
            }
            public sample4()
            {
                InitializeComponent();
                Reports = new ObservableCollection<Report>()
                {
                    new Report{ ReportName = "test Analysis",  ReportType="Analysis", ReportImage = @"..\Images\China.jpg" },
                    new Report{ ReportName = "test Calibration",  ReportType="Calibration", ReportImage = @"..\Images\China.jpg" },
                    new Report{ ReportName = "test Other",  ReportType="Other", ReportImage = @"..\Images\China.jpg" },
                     new Report{ ReportName = "test rien",  ReportType="Other", ReportImage = @"..\Images\China.jpg" },
                      new Report{ ReportName = "test 11",  ReportType="Other", ReportImage = @"..\Images\China.jpg" },
                       new Report{ ReportName = "test 44",  ReportType="Other", ReportImage = @"..\Images\China.jpg" },
                        new Report{ ReportName = "test 33",  ReportType="Other", ReportImage = @"..\Images\China.jpg" },
                       new Report{ ReportName = "test XXX",  ReportType="Other", ReportImage = @"..\Images\China.jpg" }
                };
    
    
                ICollectionView cv = CollectionViewSource.GetDefaultView(Reports);
                cv.GroupDescriptions.Add(new PropertyGroupDescription("ReportType"));
                Combo.ItemsSource = cv;
    
            }
     <ComboBox x:Name="Combo"
                      Height="30"         
                      Margin="10"
                      MaxDropDownHeight="300"
                      IsDropDownOpen="True"
                      ItemsSource="{Binding Reports}">
                <ComboBox.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.Panel>
                            <ItemsPanelTemplate>
                                <UniformGrid Columns="2"/>
                            </ItemsPanelTemplate>
                        </GroupStyle.Panel>
                        <GroupStyle.ContainerStyle>
                            <Style TargetType="{x:Type GroupItem}">
                                <Setter Property="Margin" Value="0,0,0,5"/>
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="{x:Type GroupItem}">
                                            <Border Margin="2"
                                                    BorderBrush="Gray"
                                                    BorderThickness="1"
                                                    CornerRadius="1">
                                                <Viewbox>
                                                    <Expander IsExpanded="True">
                                                    <Expander.Header>
                                                        <StackPanel HorizontalAlignment="Stretch"
                                                                    Background="LightBlue"
                                                                    Orientation="Horizontal">
                                                            <TextBlock Margin="2,5,0,2"
                                                                       FontSize="14"
                                                                       FontWeight="Bold"
                                                                       Text="{Binding Name}"/>
                                                            <TextBlock Margin="2,5,0,2"
                                                                       FontSize="14"
                                                                       FontWeight="Bold"
                                                                       Text=":"/>
                                                            <TextBlock Margin="2,5,0,2"
                                                                       FontSize="14"
                                                                       FontWeight="Bold"
                                                                       Text="{Binding Items.Count}"/>
                                                            <TextBlock Margin="2,5,0,2"
                                                                       FontSize="14"
                                                                       FontWeight="Bold"
                                                                       Text=" items"/>
                                                        </StackPanel>
                                                    </Expander.Header>
                                                    <Expander.Content>
                                                        <Border BorderBrush="Red" BorderThickness="3">
                                                            <ItemsPresenter/>
                                                        </Border>
                                                    </Expander.Content>
                                                </Expander>
                                                </Viewbox>
                                            </Border>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </GroupStyle.ContainerStyle>
                    </GroupStyle>
                </ComboBox.GroupStyle>
                <ComboBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <UniformGrid Height="200" Columns="2"/>
                    </ItemsPanelTemplate>
                </ComboBox.ItemsPanel>
                <ComboBox.ItemTemplate>
                    <DataTemplate>
                        <Grid Width="100" Height="50">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="30"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Image Grid.Column="0" Source="{Binding ReportImage}"/>
                            <StackPanel Grid.Column="1">
                                <TextBlock Margin="3"
                                           Foreground="Black"
                                           Text="{Binding ReportName}"/>
                                <TextBlock Margin="3"
                                           Foreground="Black"
                                           Text="{Binding ReportType}"/>
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </ComboBox.ItemTemplate>
    
            </ComboBox>

    如果这样效果不好,建议你使用硬编码,后台分好组,再一个组一个组的使用Expander来绑定,Expander的内容可以放置一个listBox。

    Best Regards,

    Bob


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.



    2017年10月9日 7:58
    版主

全部回复

  • Hi,

    尝试根据你的需求实现,但是效果不好,如果你有兴趣,你可以参考并修改下面的代码,如果你有更好的解决方案欢迎你在这里分享。

       public partial class sample4 : Window
        {
            public ObservableCollection<Report> Reports { get; set; }
    
            public class Report : PropertyNotifyBaseClass
            {
                private string reportName;
                public string ReportName
                {
                    get { return reportName; }
                    set { reportName = value; RaisePropertyChanged("ReportName"); }
                }
                private string reportImage;
                public string ReportImage
                {
                    get { return reportImage; }
                    set { reportImage = value; RaisePropertyChanged("ReportImage"); }
                }
    
                private string reportType;
                public string ReportType
                {
                    get { return reportType; }
                    set { reportType = value; RaisePropertyChanged("ReportType"); }
                }
            }
            public sample4()
            {
                InitializeComponent();
                Reports = new ObservableCollection<Report>()
                {
                    new Report{ ReportName = "test Analysis",  ReportType="Analysis", ReportImage = @"..\Images\China.jpg" },
                    new Report{ ReportName = "test Calibration",  ReportType="Calibration", ReportImage = @"..\Images\China.jpg" },
                    new Report{ ReportName = "test Other",  ReportType="Other", ReportImage = @"..\Images\China.jpg" },
                     new Report{ ReportName = "test rien",  ReportType="Other", ReportImage = @"..\Images\China.jpg" },
                      new Report{ ReportName = "test 11",  ReportType="Other", ReportImage = @"..\Images\China.jpg" },
                       new Report{ ReportName = "test 44",  ReportType="Other", ReportImage = @"..\Images\China.jpg" },
                        new Report{ ReportName = "test 33",  ReportType="Other", ReportImage = @"..\Images\China.jpg" },
                       new Report{ ReportName = "test XXX",  ReportType="Other", ReportImage = @"..\Images\China.jpg" }
                };
    
    
                ICollectionView cv = CollectionViewSource.GetDefaultView(Reports);
                cv.GroupDescriptions.Add(new PropertyGroupDescription("ReportType"));
                Combo.ItemsSource = cv;
    
            }
     <ComboBox x:Name="Combo"
                      Height="30"         
                      Margin="10"
                      MaxDropDownHeight="300"
                      IsDropDownOpen="True"
                      ItemsSource="{Binding Reports}">
                <ComboBox.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.Panel>
                            <ItemsPanelTemplate>
                                <UniformGrid Columns="2"/>
                            </ItemsPanelTemplate>
                        </GroupStyle.Panel>
                        <GroupStyle.ContainerStyle>
                            <Style TargetType="{x:Type GroupItem}">
                                <Setter Property="Margin" Value="0,0,0,5"/>
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="{x:Type GroupItem}">
                                            <Border Margin="2"
                                                    BorderBrush="Gray"
                                                    BorderThickness="1"
                                                    CornerRadius="1">
                                                <Viewbox>
                                                    <Expander IsExpanded="True">
                                                    <Expander.Header>
                                                        <StackPanel HorizontalAlignment="Stretch"
                                                                    Background="LightBlue"
                                                                    Orientation="Horizontal">
                                                            <TextBlock Margin="2,5,0,2"
                                                                       FontSize="14"
                                                                       FontWeight="Bold"
                                                                       Text="{Binding Name}"/>
                                                            <TextBlock Margin="2,5,0,2"
                                                                       FontSize="14"
                                                                       FontWeight="Bold"
                                                                       Text=":"/>
                                                            <TextBlock Margin="2,5,0,2"
                                                                       FontSize="14"
                                                                       FontWeight="Bold"
                                                                       Text="{Binding Items.Count}"/>
                                                            <TextBlock Margin="2,5,0,2"
                                                                       FontSize="14"
                                                                       FontWeight="Bold"
                                                                       Text=" items"/>
                                                        </StackPanel>
                                                    </Expander.Header>
                                                    <Expander.Content>
                                                        <Border BorderBrush="Red" BorderThickness="3">
                                                            <ItemsPresenter/>
                                                        </Border>
                                                    </Expander.Content>
                                                </Expander>
                                                </Viewbox>
                                            </Border>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </GroupStyle.ContainerStyle>
                    </GroupStyle>
                </ComboBox.GroupStyle>
                <ComboBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <UniformGrid Height="200" Columns="2"/>
                    </ItemsPanelTemplate>
                </ComboBox.ItemsPanel>
                <ComboBox.ItemTemplate>
                    <DataTemplate>
                        <Grid Width="100" Height="50">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="30"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Image Grid.Column="0" Source="{Binding ReportImage}"/>
                            <StackPanel Grid.Column="1">
                                <TextBlock Margin="3"
                                           Foreground="Black"
                                           Text="{Binding ReportName}"/>
                                <TextBlock Margin="3"
                                           Foreground="Black"
                                           Text="{Binding ReportType}"/>
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </ComboBox.ItemTemplate>
    
            </ComboBox>

    如果这样效果不好,建议你使用硬编码,后台分好组,再一个组一个组的使用Expander来绑定,Expander的内容可以放置一个listBox。

    Best Regards,

    Bob


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.



    2017年10月9日 7:58
    版主
  • 效果已经很好了,谢谢!
    2017年10月14日 2:10