3

I have Fluent Ribbon control. The Ribbon menu item Keytips are showing incorrectly,

before, enter image description here

after, enter image description here

I have fixed row height for ribbon menu.. how to solve the prob, thanks

Here is my code:

<Fluent:Ribbon AutomaticStateManagement="True" x:Name="ribbon" IsAutomaticCollapseEnabled="False" IsMinimized="True">
  <Fluent:Ribbon.ContextualGroups>
      <Fluent:RibbonContextualTabGroup x:Name="tabGroup1"  
           BorderBrush="#FF9D00" Background="#FF9D00" Foreground="#C45300"
           Header="FIRST" Visibility="Visible" />
  </Fluent:Ribbon.ContextualGroups>

  <Fluent:Ribbon.Menu>
     <Grid>
       <Fluent:ApplicationMenu Header="File" Visibility="{Binding IsChecked, ElementName=UseApplicationMenu, Converter={StaticResource boolToVisibilityConverter}}">
           <Fluent:ApplicationMenu.RightPaneContent>
              <StackPanel HorizontalAlignment="Stretch"   
                 VerticalAlignment="Stretch" Orientation="Vertical" Width="1000">
                   <Border HorizontalAlignment="Stretch"                                            BorderBrush="#64647F" BorderThickness="0,0,0,0">    
                       <TextBlock Text="Recent files" Background="#F6F7F8" TextAlignment="Left" Padding="12,4,4,4" Foreground="#64647F" FontWeight="SemiBold" FontSize="12" />
                   </Border>
             <StackPanel HorizontalAlignment="Stretch" Height="2">
                 <Border Height="1" BorderThickness="1" HorizontalAlignment="Stretch" BorderBrush="#DCDDDE" />
                 <Border Height="1" BorderThickness="1" HorizontalAlignment="Stretch" BorderBrush="#FEFEFF" />
               </StackPanel>
             </StackPanel>
          </Fluent:ApplicationMenu.RightPaneContent>

         <Fluent:MenuItem Header="New" Icon="pack://application:,,,/WpfSwastik;component/Images/GreenLarge.png">
         <Fluent:MenuItem Header="Text document" Icon="pack://application:,,,/WpfSwastik;component/Images/GreenLarge.png" />
         <Fluent:MenuItem Header="Spreadsheet" Icon="pack://application:,,,/WpfSwastik;component/Images/GreenLarge.png" />
         </Fluent:MenuItem>
         <Fluent:MenuItem Header="Save As" IsSplited="True" Icon="pack://application:,,,/WpfSwastik;component/Images/BlueLarge.png">
         <Fluent:MenuItem Header="Standard format" Description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna." ToolTip="Save something in standard format"                                                 Icon="pack://application:,,,/WpfSwastik;component/Images/BlueLarge.png" />
       <Fluent:MenuItem Header="Export" ToolTip="Export something" Icon="pack://application:,,,/WpfSwastik;component/Images/BlueLarge.png" />
       /Fluent:MenuItem>
       <Fluent:MenuItem Header="Open" Description="CTRL + O"                                            ToolTip="Open object" Icon="pack://application:,,,/WpfSwastik;component/Images/YellowLarge.png" />

       <Separator />
         <Fluent:MenuItem Header="Exit" Icon="pack://application:,,,/WpfSwastik;component/Images/RedLarge.png"                                              KeyTip="X" Command="{Binding ExitCommand}" />
         </Fluent:ApplicationMenu>
       </Grid>
    </Fluent:Ribbon.Menu>

    <Fluent:RibbonTabItem x:Name="masterTabItem"                                      Header="Master" KeyTip="M" Group="{Binding ElementName=tabGroup1, Mode=OneWay}">
    <Fluent:RibbonGroupBox Icon="pack://application:,,,/WpfSwastik;component/Images/Default.png" x:Name="accountInfo" Header="Acount Info" CanAddToQuickAccessToolBar="False" IsLauncherVisible="False" Padding="25,25,25,24">
        <Fluent:Button Header="Bank" Click="BankMaster" Icon="Images\Green.png" LargeIcon="Images\GreenLarge.png" />
        <Fluent:Button Header="Cash" Click="CashAccount" Icon="Images\Green.png" LargeIcon="Images\GreenLarge.png" />
        <Fluent:Button Header="Customer" Click="CustomersMaster"                                       Icon="Images\Green.png" LargeIcon="Images\GreenLarge.png" />
        <Fluent:Button Header="Supplier" Click="SupplierMaster"                                       Icon="Images\Green.png" LargeIcon="Images\GreenLarge.png" />
        <Fluent:Button Header="Ledger" Click="LedgerMaster"                                          
         Icon="Images\Green.png" LargeIcon="Images\GreenLarge.png" />
        <Fluent:Button Header="Other Charges" Click="OtherExpanses" Icon="Images\Green.png" LargeIcon="Images\GreenLarge.png" />
       <Fluent:Button Header="Annoncements"                                      Icon="Images\Green.png" LargeIcon="Images\GreenLarge.png" />
        <Fluent:Button Header="Alerts" Icon="Images\Green.png" LargeIcon="Images\GreenLarge.png" />
      </Fluent:RibbonGroupBox>
   </Fluent:RibbonTabItem>
</Fluent:Ribbon>
0

1 Answer 1

1

You can see an example of KeyTip in FluentRibbon:

<Grid.RowDefinitions>
        <RowDefinition Height="5*"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Fluent:Ribbon>
        <!--Backstage-->
        <Fluent:Ribbon.Menu>
            <Fluent:Backstage>
            </Fluent:Backstage>
        </Fluent:Ribbon.Menu>
        <!--Tabs-->
        <Fluent:RibbonTabItem Header="Tab">
            <Fluent:RibbonGroupBox Header="Group">
                <Fluent:Button Name="buttonGreen" Header="Green"  Icon="Images\cut.jpg" LargeIcon="Images\cut.jpg"
                           Fluent:KeyTip.AutoPlacement="False" Fluent:KeyTip.HorizontalAlignment="Center" Fluent:KeyTip.VerticalAlignment="Center"
    Fluent:KeyTip.Keys="C" />
                <Fluent:Button Name="buttonGray" Header="Grey" Icon="Images\cut.jpg" LargeIcon="Images\cut.jpg" Fluent:KeyTip.AutoPlacement="False"
    Fluent:KeyTip.HorizontalAlignment="Left" Fluent:KeyTip.VerticalAlignment="Center"  Fluent:KeyTip.Keys="L" />
            </Fluent:RibbonGroupBox>
        </Fluent:RibbonTabItem>
    </Fluent:Ribbon>

    <Button Content="1" Grid.Row="1"/>
</Grid>

Update:

I've just set Height=Auto and it works okay:

<StackPanel HorizontalAlignment="Stretch" Height="Auto">
   <Border Height="Auto" BorderThickness="1" HorizontalAlignment="Stretch" BorderBrush="#DCDDDE" />
   <Border Height="Auto" BorderThickness="1" HorizontalAlignment="Stretch" BorderBrush="#FEFEFF" />
</StackPanel>
2
  • I am added keytip for Robbon tab item. I am pressing Alt key it shows correctly. But again I am pressing Alt key when expanding ribbon menu shows 2nd picture(above). I want second time I am pressing Alt key the menu should collapsed. Feb 23, 2016 at 4:28
  • @KirubaBlaze please post your the whole XAML. It is hard to say withou code. I cannot reproduce your behavior.
    – StepUp
    Feb 24, 2016 at 10:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.