Splitbutton w. Menu like in the Showcase App

Nov 12, 2010 at 11:43 PM

 

Hello,

i have downloaded v2.0 and so far i am really happy with it! The showcase app .net 4.0 / Fluent.Test.exe show a splitbutton (Paste) with menu underneath it. The menu contains further buttons on top. Can anybody show me, how to accomplish this ? 

thanks

Coordinator
Nov 13, 2010 at 5:35 AM
Edited Nov 13, 2010 at 5:35 AM

The following code produces the mentioned result:

<Fluent:SplitButton x:Name="pasteButton" Fluent:KeyTip.Keys="V" Header="Paste" Icon="Images\Paste.png" LargeIcon="Images\PasteLarge.png" SizeDefinition="Large" Command="Paste">
  <Fluent:SplitButton.ToolTip>
      <Fluent:ScreenTip
        Title="Paste (Ctrl+V)"
        Text="Paste the contents of the Clipboard."
        Width="190"
        />
  </Fluent:SplitButton.ToolTip>
  <Fluent:Gallery ScrollViewer.VerticalScrollBarVisibility="Hidden" Orientation="Horizontal" GroupBy="Tag" Selectable="False" ItemWidth="32" ItemHeight="32">    
    <Image Source="Images\PasteImage.png" Width="24" Height="24" Fluent:KeyTip.Keys="K" Tag="Paste Options:"/>
      <Image Source="Images\PasteText.png" Width="24" Height="24" Fluent:KeyTip.Keys="M" Tag="Paste Options:"/>
      <Image Source="Images\PasteTextOnly.png" Width="24" Height="24" Fluent:KeyTip.Keys="T" Tag="Paste Options:"/>
      <Image Source="Images\PasteFormating.png" Width="24" Height="24" Fluent:KeyTip.Keys="L" Tag="Paste Options:"/>
      <Image Source="Images\PasteSourceFormating.png" Width="24" Height="24" Fluent:KeyTip.Keys="E" Tag="Paste Options:"/>
  </Fluent:Gallery>
  <Fluent:MenuItem Header="Paste Special..." Fluent:KeyTip.Keys="S" />
  <Separator/>
  <Fluent:MenuItem Header="Set Default Paste..." Fluent:KeyTip.Keys="A" IsSplited="True"/>
</Fluent:SplitButton>

In other words you can use Gallery with Selectable = False

Daniel

Nov 13, 2010 at 11:57 AM

Thank you!

Nov 14, 2010 at 2:15 PM
daVinci wrote:

The following code produces the mentioned result:

<Fluent:SplitButton x:Name="pasteButton" Fluent:KeyTip.Keys="V" Header="Paste" Icon="Images\Paste.png" LargeIcon="Images\PasteLarge.png" SizeDefinition="Large" Command="Paste">
  <Fluent:SplitButton.ToolTip>
      <Fluent:ScreenTip
        Title="Paste (Ctrl+V)"
        Text="Paste the contents of the Clipboard."
        Width="190"
        />
  </Fluent:SplitButton.ToolTip>
  <Fluent:Gallery ScrollViewer.VerticalScrollBarVisibility="Hidden" Orientation="Horizontal" GroupBy="Tag" Selectable="False" ItemWidth="32" ItemHeight="32">    
    <Image Source="Images\PasteImage.png" Width="24" Height="24" Fluent:KeyTip.Keys="K" Tag="Paste Options:"/>
      <Image Source="Images\PasteText.png" Width="24" Height="24" Fluent:KeyTip.Keys="M" Tag="Paste Options:"/>
      <Image Source="Images\PasteTextOnly.png" Width="24" Height="24" Fluent:KeyTip.Keys="T" Tag="Paste Options:"/>
      <Image Source="Images\PasteFormating.png" Width="24" Height="24" Fluent:KeyTip.Keys="L" Tag="Paste Options:"/>
      <Image Source="Images\PasteSourceFormating.png" Width="24" Height="24" Fluent:KeyTip.Keys="E" Tag="Paste Options:"/>
  </Fluent:Gallery>
  <Fluent:MenuItem Header="Paste Special..." Fluent:KeyTip.Keys="S" />
  <Separator/>
  <Fluent:MenuItem Header="Set Default Paste..." Fluent:KeyTip.Keys="A" IsSplited="True"/>
</Fluent:SplitButton>

In other words you can use Gallery with Selectable = False

Daniel

I have one more problem:

I would like to bind a command to the Images inside the gallery. The images already seem "clickable" (bg color when i move the mouse above an image, etc.) - how can i bind an icommand to the image ? thanks

 

Nov 14, 2010 at 2:43 PM

solved:

 

<fl:GalleryItem Command="{Binding YourCommand}">
          <Image Source="..." ..../>
</fl:GalleryItem>