How to bind click command to images in <Fluent:Gallery>?

Jul 19, 2010 at 4:46 AM
Hi everyone, At the moment, in project Fluent.Sample.Galleries in Fluent 1.3, I'd like to add commands to the images in the galleries so that when clicked will run my codes but I'm not sure how to do it. I've tried to add Command properties but that doesn't work. Please help me if you know how to do it. Thank you. Nam.
Coordinator
Jul 19, 2010 at 6:26 AM
Edited Jul 19, 2010 at 6:27 AM

Depending what you need (event handler or command) you may do something like this. The following code is modified part of Fluent.Sample.Galleries:

<!--You can use Gallery in ContextMenu. 
    Below we insert Gallery in DropDownButton's context menu
    We set ItemsSource and ItemTemplate.-->                  
<Fluent:DropDownButton Name="buttonGreen" Text="DropDownButton" Icon="Images\Green.png" LargeIcon="Images\GreenLarge.png">
  <Fluent:Gallery ItemsSource ="{Binding DataItems}" ItemTemplate="{DynamicResource middleDataItemTemplate}" >
    <Fluent:Gallery.ItemContainerStyle>
      <Style TargetType="{x:Type Fluent:GalleryItem}" BasedOn="{StaticResource GalleryItemStyle}">
        <Setter Property="Fluent:GalleryItem.Command" Value="?YourCommand?"/>
        <Setter Property="Fluent:GalleryItem.CommandParameter" Value="{Binding }"/>                      
      </Style>
    </Fluent:Gallery.ItemContainerStyle>
  </Fluent:Gallery>
  <Fluent:MenuItem Icon="Images\Pink.png" Text="Pink"/>
</Fluent:DropDownButton>

<!--Though, you may set children of the Gallery explicitly -->
<Fluent:DropDownButton Text="Pink" Icon="Images\Pink.png" LargeIcon="Images\PinkLarge.png">
  <Fluent:Gallery>
    <Image Source="Images\RedLarge.png" Stretch="None" Click="OnRedClick"/>
    <Image Source="Images\GreenLarge.png" Stretch="None"/>
    <Image Source="Images\BlueLarge.png" Stretch="None"/>
  </Fluent:Gallery>
</Fluent:DropDownButton>
Jul 19, 2010 at 9:14 AM
@daVinci: To your question, my answer is: I need command. In your sample codes for providing Command property to the Gallery Item, it seems that only 1 command is allowed to be bound. How can we bind each gallery item with its own command? Regards, Nam.
Coordinator
Jul 19, 2010 at 9:28 AM
Edited Jul 19, 2010 at 9:30 AM
Usually you need one single command and parameter, this is an usual WPF approach.
Yes you can bind to different commands:
<Fluent:GalleryItem Command="MyCommandA">
   <Image Source="Images\RedLarge.png" Stretch="None" />
</Fluent:GalleryItem>
<Fluent:GalleryItem Command="MyCommandB">
   <Image Source="Images\BlueLarge.png" Stretch="None" />
</Fluent:GalleryItem>
Jul 19, 2010 at 12:28 PM
Edited Jul 19, 2010 at 12:40 PM
@daVinci: I tried below, but it doesn't work. No item showed in the dropdown-button's gallery.

 <Fluent:DropDownButton Text="Pink" Icon="Images\Pink.png" LargeIcon="Images\PinkLarge.png">

 <Fluent:Gallery>

 <Fluent:GalleryItem Command="MyCommandA">

 <Image Source="Images\RedLarge.png" Stretch="None" />

 </Fluent:GalleryItem>

 <Fluent:GalleryItem Command="MyCommandB">

 <Image Source="Images\BlueLarge.png" Stretch="None" />

 </Fluent:GalleryItem>

 </Fluent:Gallery>

  </Fluent:DropDownButton>

Please help.

Nam.

ps. I have difficulties to post syntax-highlighted codes. How did you do it?

Coordinator
Jul 19, 2010 at 1:43 PM
Edited Jul 19, 2010 at 1:46 PM

Sorry, this is the bug. To avoid this bug, add Width="Auto" Height="Auto" to GalleryItem(s).

P.S. to insert highlighted code use button "Insert Code Snippet" in the toolbar. However it looks like the toolbar is hidden in some browsers like Chrome :)

Jul 20, 2010 at 10:22 AM
I got it work now. Thank you.
Nov 5, 2010 at 8:45 PM

OK, here's a question, and forgive me if it seems elementary.

Let's say you have a DropDownButton with a Gallery dynamically populated in code from a data source using its DataContext property. I need to be able to fire a single event that determines which of the items in the gallery was clicked, exactly like you can do on a listbox or combo box. At first glance, it would seem you could use the Click event to point to an event handler, from either the button itself or the gallery, but neither one actually fires an event. Seems like that's where you were headed with the first example but I'm not seeing how to reference my event handler.

Here's the button:

                    <Fluent:DropDownButton Name="btnShowGlossary" 
                                           Text="Select"
                                           Icon="Icons/glossary_select.png"
                                           LargeIcon="Icons/glossary_select.png"
                                           SizeDefinition="Large"
                                           Click="btnShowGlossary_Click">
                        <Fluent:Gallery Name="galleryGlossaries" 
                                        ItemsSource="{Binding}" 
                                        Height="200"  
                                        ItemTemplate="{DynamicResource SelectGlossaryTemplate}" 
                                        Orientation="Vertical"
                                        Click="btnShowGlossary_Click">
                        </Fluent:Gallery>
                    </Fluent:DropDownButton>

The template simply shows a static image and two members of the bound data item.

Any suggestions?

Thanks
Coordinator
Nov 6, 2010 at 6:28 AM

Use SelectionChanged event (similar to ListBox).