DropDownButton with MenuItem not working anymore

[wstaelens]

        <Fluent:DropDownButton Header="{x:Static resx:Resources.DateFilter}" ItemsSource="{Binding ActionDateFilters}">
          <Fluent:DropDownButton.LargeIcon>
            <Grid>
              <Rectangle Fill="{StaticResource imgCalendar}"  />
              <Rectangle Fill="{StaticResource imgFunnel}" Width="16" Height="16" HorizontalAlignment="Right" VerticalAlignment="Top" />
            </Grid>
          </Fluent:DropDownButton.LargeIcon>

          <Fluent:DropDownButton.ItemTemplate>
            <DataTemplate>
              <Fluent:MenuItem IsChecked="{Binding IsChecked}" cal:Message.Attach="[Event Click] = [Action UseFilter()]" >
                <Fluent:MenuItem.Header>
                  <StackPanel Orientation="Horizontal">
                    <Rectangle Width="16" Height="16" Margin="0,0,3,0">
                      <Rectangle.Fill>
                        <SolidColorBrush Color="{Binding Color}" />
                      </Rectangle.Fill>
                    </Rectangle>
                    <TextBlock Text="{Binding Title}" />
                  </StackPanel>
                </Fluent:MenuItem.Header>
              </Fluent:MenuItem>
            </DataTemplate>
          </Fluent:DropDownButton.ItemTemplate>
        </Fluent:DropDownButton>

This code above worked in previous fluent.ribbon version.

After updating to 6.1.0.326 it doesn't work anymore:

How can I get this working again? (I have several dropdownbuttons with menuitems that now show the tostring of the first element in the Fluent:MenuItem.Header.)

This code is working, it just binds the header title, slightly different:

        <Fluent:DropDownButton x:Name="DropDownBtnOpenDossier" Header="{x:Static resx:Resources.Open}" ItemsSource="{Binding UserSettings.DossierInfos}">
          <Fluent:DropDownButton.LargeIcon>
            <!--<Rectangle Fill="{StaticResource imgConnectionQuick}" />-->
            <Rectangle Fill="{StaticResource imgDatabaseDossier}" />
          </Fluent:DropDownButton.LargeIcon>
          <Fluent:DropDownButton.ItemTemplate>
            <DataTemplate>
              <Fluent:MenuItem Header="{Binding Title}" 
                               cal:Message.Attach="[Event Click] = [Action OpenDossier($dataContext)]"
                               cal:Action.TargetWithoutContext="{Binding DataContext, ElementName=DropDownBtnOpenDossier}">
                <Fluent:MenuItem.Icon>
                  <Rectangle Fill="{StaticResource imgDatabaseDossier}" Stretch="Uniform" />
                </Fluent:MenuItem.Icon>
              </Fluent:MenuItem>
            </DataTemplate>
          </Fluent:DropDownButton.ItemTemplate>
        </Fluent:DropDownButton>

---

Environment

• Fluent.Ribbon v6.1.0.326
• Windows 10 x64 Pro
• .NET Framework 4.7.1

[batzen]

Will have a look at this when i'm back home in november.

[wstaelens]

I had to revert back to version 5.0.1.10 to get it working. All versions above show just System.Windows.Controls.StackPanel etc...

[batzen]

Could you try to reproduce this issue using the preview version of 7.0? I can't reproduce your issue using that version.

[wstaelens]

sorry for the delay. I've installed pre-release v7.0.0-alpha0456 and confirm that this has been fixed with this version now.

is this production ready?

[wstaelens]

@batzen I reverted back to version 5.x because the BackstageTabItems in the backstage do not highlight anymore when hovering with the mouse. This seems to be broken. Hovering the mouse over the BackstageTabItem's does not change the background of the items (no visual feedback that it is a menu item).

    <Fluent:Ribbon.Menu>
      <Fluent:Backstage>
        <Fluent:BackstageTabControl DataContext="{Binding Path=DataContext, RelativeSource={RelativeSource AncestorType=local:ucRibbonNavView}}">
          <Fluent:BackstageTabItem ….

[batzen]

The item hovering should be fixed in version 7. Do you still have that issue with version 7? If that's the case i would be nice if you could provide a repro for that as it's working in my apps, including the showcase app.

Regarding production ready: I am using the preview in production. The only issues i know of for that version are the ones that are attached to the 7.0 milestone.

[wstaelens]

I used the latest nuget version today (prerelease) and I had the issue there with the backstage. Can't separate it for now in a small solution as it is in a huge project atm.

[batzen]

Do you have any styles/resources overwritten? Especially for the backstage?

[wstaelens]

This:

        <ResourceDictionary Source="pack://application:,,,/Fluent;Component/Themes/Generic.xaml" />

[batzen]

Do the mouse over effects work in the showcase application on your machine? What's the header content for your backstage tabs?

[wstaelens]

didn't test showcase app

 <!-- Backstage Items -->
    <Fluent:Ribbon.Menu>
      <Fluent:Backstage>
        <Fluent:BackstageTabControl DataContext="{Binding Path=DataContext, RelativeSource={RelativeSource AncestorType=local:ucRibbonNavView}}">

          <Fluent:BackstageTabItem Header="Open">
            <Grid Margin="15,0,0,0">
              <Grid.RowDefinitions>
                <RowDefinition Height="auto" />
                <RowDefinition Height="auto" />
                <RowDefinition Height="*" />
              </Grid.RowDefinitions>

              <TextBlock Grid.Row="0" 
                         Text="Open" 
                         FontSize="28"  FontWeight="Light" 
                         Foreground="Black" />

              <TextBlock Grid.Row="1" 
                         Text="foo" 
                         FontSize="20" FontWeight="Light"  
                         Foreground="DodgerBlue" 
                         Margin="3" />

              <ContentControl Grid.Row="2" MinWidth="300" cal:View.Model="{Binding RecentlyUsedVM}" />

            </Grid>
          </Fluent:BackstageTabItem>

          <Fluent:Button Header="{x:Static resx:Resources.New}" IsDefinitive="True"
                         cal:Message.Attach="[Event Click] = [Action FooBar()]" />

          <Fluent:SeparatorTabItem />

          <Fluent:Button Header="{x:Static resx:Resources.Options}"
                         cal:Message.Attach="[Event Click] = [Action ShowOptions()]" />

          <Fluent:SeparatorTabItem />

          <Fluent:Button Header="{x:Static resx:Resources.Help}"
                                   cal:Message.Attach="[Event Click] = [Action ShowHelpOptions()]" />

          <Fluent:Button Header="{x:Static resx:Resources.About}"
                                   cal:Message.Attach="[Event Click] = [Action ShowHelpOptions()]"/>

          <Fluent:SeparatorTabItem />

          <Fluent:Button Header="{x:Static resx:Resources.Exit}" />
        </Fluent:BackstageTabControl>
      </Fluent:Backstage>
    </Fluent:Ribbon.Menu>

  public class ucRibbonNavViewModel :
    PropertyChangedBase,
    IHandle<…>
   { 
//...

[batzen]

That doesn't look special and the showcase looks quite the same. Any chance to get a repro for your issue?

[batzen]

@wstaelens ping

[wstaelens]

sorry I think I will have no time to create any repro. 😞