Gallery with Image and Text

Mar 3, 2010 at 10:32 AM
Edited Mar 3, 2010 at 10:38 AM

Hello,

I am using fluent ribbon control, I have to provide gallery similar to the one in MS Word-->Page Layout --> Themes.. where drop down with a gallery which has both image and text for each gallery item.

It would be really helpful if you could provide me sample to implement using Fluent.

Thanks in advance,

Regards,

Mohan

Coordinator
Mar 3, 2010 at 1:42 PM
Edited Mar 3, 2010 at 1:43 PM

Let me begin by thanking you for using Fluent Ribbon Control Suite.

Actually Gallery is pretty simillar to regular WPF ListBox. So to do what do you want you can:

1) Create your own control and fill the gallery with instancies of that control
2) Create DataTemplate and set Gallery.ItemTemplate = "{DynamicResource yourDataTemplate}"

If you bind items as in the sample (see Samples\Galleries or Samples\Mvvm) the second way fits you (do you see samples by the way?).

For ex., you have data:

public class SampleDataItem:DependencyObject
{
    /// <summary>
    /// Gets or sets large icon
    /// </summary>
    public ImageSource IconLarge { get; set; }

    /// <summary>
    /// Gets or sets text
    /// </summary>
    public string Text { get; set; }
}

 

 Somewhere in Window.cs

public SampleDataItem[] DataItems {...}

DataTemplate:

<DataTemplate x:Key="largeDataItemTemplate">
    <Border ToolTip="{Binding Text}">
       <StackPanel>
          <Image Source="{Binding IconLarge}"/>
          <TextBlock Text="{Binding Text}"/>
       </StackPanel>
    </Border>
</DataTemplate>

 

 Gallery:

<Fluent:InRibbonGallery MinItemsInRow="3" MaxItemsInRow="8" LargeIcon="Images\GrayLarge.png" Text="InRibbonGallery"
           ItemWidth="40" ItemHeight="56"
           ItemsSource ="{Binding DataItems}"
           ItemTemplate="{DynamicResource largeDataItemTemplate}"
           ResizeMode="Both" IsCollapsed="True">
       <!--You can also add items to context menu-->
       <Fluent:InRibbonGallery.MenuItems>
             <Fluent:MenuItem Text="Menu Item 1"></Fluent:MenuItem>
             <Fluent:MenuItem Text="Menu Item 2"></Fluent:MenuItem>
       </Fluent:InRibbonGallery.MenuItems>
</Fluent:InRibbonGallery>       

You will need ItemsInRow property to set count of items in row when gallery is open (this property has not implemented yet, it will in V1).
Is it helpful?
Daniel

Mar 3, 2010 at 1:47 PM

Hello Daniel,

Thank you so much for you prompt and detailed repy.. It really helps me too use it.. Yes I had chance to look at the samples and that helped me to implement the gallery the way i wanted..

I think the ItemsInRow when Gallery opens would also be useful..

It is really a great job.. and the control is verymuch useful.

Regards,

Mohan

Feb 25, 2012 at 10:22 PM

Hi daVinci,

how can i set in this mvvm sample a binded click command to the gallary item.

Thanks for your reply.

Regards

 

Alec