InRibbonGallery behind ComboBox issue.

[Yumeryu]

I got a large list of Texts for selection. So the idea is using a combo box front and InRibbonGallery behind for grouping view.

Features:

1. displaying selected item text as combo box text,

2. There is a filter text box next to combo box, and when typing in key words in there, the combo box contents filtered to a smaller list of texts.

3. when user typing in the filter text box, the combo box auto drop down with the filtered texts in grouping view.

4. If user click combo box, it can expand to grouping view (currently only a small view first, and user has to click on expansion button to see the grouping view. ), and user can select item this way.

I mashed a sample project with above features in mind, however, I'm experiencing quite a few issues. I'm not sure if these features are achievable in this way.

Issues:
Feature 1: combo box can't display selected text for some reason, and sometimes it displays combobox "ToString" value, with class name plus the items count number.

Feature 2: This is all back end code, so it's actually working.

Feature 3: When typing in filter text box, the combo box only sometimes drops the panel, not always. Also, when clicked expanding button when panel dropped. And then click the panel. The panel now is stuck inside the combo box. After that, can't select anything in that list anymore, combo box in a broken state.

Feature 4: all mouse action, this also has the above issue, drop down, expand, click on panel, panel stuck.

So please have a look the sample project and let me know. Thanks in advance.

---

Environment

• Fluent.Ribbon v5.0.0.8
• Theme ? (not needed in version 5.0 and upwards)
• Windows 10
• .NET Framework 4.5.2
  WpfApplication1.zip

[Yumeryu]

Also, the drop down always drop down to the items list without grouping first, has to click on expand button to show in grouping mode, is there a way always show grouping view?

Thanks in advance.

[batzen]

1. You set IsEditable="False" which causes your text binding to be ignored and SelectedItem being used instead. If you want your TextBinding to work you have to set IsEditable="True" and to prevent the text from being edited by the user set IsReadOnly="True".

Due to limited time i will have to delay investigation of the remaining points.

[batzen]

Also, the drop down always drop down to the items list without grouping first, has to click on expand button to show in grouping mode, is there a way always show grouping view?
That's currently by design. Only the GalleryPanel contained in the popup is grouped. If you want immediate grouping you would have to use a GalleryPanel instead of InRibbonGallery.

This code should do what you expect and might also fix 3. and 4.

<fluent:ComboBox Grid.Row="1"
                 Grid.Column="0"
                 Header="Select Color"
                 InputWidth="100"
                 Text="{Binding SelectedText, Mode=OneWay}"
                 IsReadOnly="True"
                 HorizontalAlignment="Right"
                 IsManipulationEnabled="True"
                 IsDropDownOpen="{Binding IsDropDownOpen}"
                 IsEditable="True"
                 ItemsSource="{Binding DataItems}"
                 SelectedItem="{Binding SelectedModel}">
    <fluent:ComboBox.ItemsPanel>
        <ItemsPanelTemplate>
            <fluent:GalleryPanel MinItemsInRow="1"
                                 MaxItemsInRow="5"
                                 ItemWidth="50"
                                 ItemHeight="18"
                                 ItemContainerGenerator="{Binding ItemContainerGenerator, RelativeSource={RelativeSource AncestorType=fluent:ComboBox}}"
                                 GroupByAdvanced="{Binding GroupByAdvancedSample}" />
        </ItemsPanelTemplate>
    </fluent:ComboBox.ItemsPanel>

    <fluent:ComboBox.ItemTemplate>
        <DataTemplate DataType="{ x:Type  local:GallerySampleDataItemViewModel}">
            <Border>
                <StackPanel Orientation="Horizontal"
                            HorizontalAlignment="Left">
                    <TextBlock Text="{Binding Path=Text, Mode=OneWay}"
                               FontSize="10"
                               VerticalAlignment="Center" />
                </StackPanel>
            </Border>
        </DataTemplate>
    </fluent:ComboBox.ItemTemplate>
</fluent:ComboBox>

[Yumeryu]

Thanks a lot for the sample code, I did try an approach very similar.

However, using Gallery or GalleryPanel both of them have a fatal issue, there is no scroll bar, as I have a lot of data, both of them are unfit for the task.

And for GalleryPanel, I can't make data to display multi columns, even I set MinItemsInRow="5".

For selected text binding, this is being ignored when you clicked on something other than an item in the list. For example, if you clicked the group name instead of an item. The combo box will display combo box ToString value, ignoring Selected Text.

Function wise, Gallery is the closest one, only missing selected text and scroll bar.

[Yumeryu]

Just add another few variants about combo box Text binding and Gallery.

Text Binding:
I was using Text binding as one way, and view model property only has get. The reason is this Text field is purely temporary for me, I don't need it to feed back any data.

Anyway, after I change it to binding both way and in view model property set is empty. this way, it seems the Text can stay even when I clicked on for example group name instead of an item. Don't know why this is the case.

Gallery:
Another weird issue about gallery, I didn't realize this before.

When I filter the items for gallery, which view model is modifying ObservableCollection. This action actually sends a null to SelectedItem, so it will lose the Text binding as well due to SelectedItem has been set to null.

MS RibbonComboBox and RibbonGallery don't have this issue, the SelectedItem stays when ObservableCollection being modified. Don't know why SelectedItem value can't stay.

It's the same sample project I'm working on.

[batzen]

MultiColumn:
To get MinItemsInRow you have to set Orientation="Horizontal" on your Gallery/GalleryPanel.

SelectedItem:
You call clear on your list, which removes all items from the list, including the selected item. You can't have a selected item which is not part of the list.

[Yumeryu]

Thanks a lot for your reply. I got the multi column GalleryPanel now.

By any chance there is setting to switch on the vertical scroll?

[batzen]

Will have a look during the weekend.

[batzen]

You have to set ScrollViewer.CanContentScroll="False" on the ComboBox`.
I have to add the content of #309 to the documentation.

[Yumeryu]

Thanks a lot for your help. That did the trick.