Databinding RibbonGallery

Comments (9)

Posted 15 years ago by Actipro Software Support - Cleveland, OH, USA

Hi Roel,

Our samples show some examples of using the gallery's ItemsSource and having a DataTemplate applied to the items. We don't have any examples of binding to a data set from a database, but that concept should work fine (assigning it to an ItemsSource and using a DataTemplate).

This article may help you in terms of working with database data and templates:
http://blogs.msdn.com/wpfsdk/archive/2006/10/19/wpf-basic-data-binding-faq.aspx

Actipro Software Support

Posted 15 years ago by Roel Alblas

Hi,

I think I can bind now :-)

But is it possible to bind the RibbonGallery on runtime (after a treeview is clicked)?

This would be terrific if it could!

Thanks!

Roel

Posted 15 years ago by Actipro Software Support - Cleveland, OH, USA

I would imagine that would work fine too.

Actipro Software Support

Posted 15 years ago by Roel Alblas

:-) Nice, imagination!

I solved not totally, so I think I need your help again.

I've got the following XAML:

            <ribbon:Tab Label="Afbeeldingen" KeyTipAccessText="A">
                <ribbon:Group Label="Modify">
                    <ribbon:Button Label="Add Afbeelding" Name="btnAddImage" Click="btnAddImage_Click" />
                    <ribbon:Button Label="Edit Afbeelding" Name="btnEditImage" />
                    <ribbon:Button Label="Copy Afbeelding" Name="btnCopyImage" />
                    <ribbon:Button Label="Delete Afbeelding" Name="btnDeleteImage" />
                </ribbon:Group>
                <ribbon:Group Label="Images" KeyTipAccessText="ZI">
                    <ribbon:Group.Variants>
                        <ribbon:GroupVariant Priority="20" Size="Medium" />
                        <ribbon:GroupVariant Priority="60" Size="Small" />
                        <ribbon:GroupVariant Priority="70" Size="Collapsed" />
                    </ribbon:Group.Variants>
                    <ribbon:RibbonGallery Name="RG" Label="Images" MinWidth="320" KeyTipAccessText="L" IsSelectionHighlightVisible="True" DataContextChanged="RG_DataContextChanged">
                        <ribbon:RibbonGallery.ItemTemplate>
                            <DataTemplate>
                                <Image Margin="2" Width="80" Height="60" Source="{Binding BindsDirectlyToSource=True, Mode=TwoWay, Path=alimages}" Stretch="None" />
                            </DataTemplate>
                        </ribbon:RibbonGallery.ItemTemplate>
                        <ribbon:RibbonGallery.PopupContent>
                            <StackPanel>
                                <ribbon:PopupGallery InitialColumnCount="4" MinWidth="320" Height="60" IsSelectionHighlightVisible="True"
                                        ItemTemplate="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ribbon:RibbonGallery}}, Path=ItemTemplate}"                                        
                                        ItemsSource="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ribbon:RibbonGallery}}, Path=ItemsSource}"
                                        />
                            </StackPanel>
                        </ribbon:RibbonGallery.PopupContent>
                    </ribbon:RibbonGallery>
                </ribbon:Group>
            </ribbon:Tab>

I've got the following C#:

                foreach (dsTMB.tblImagesRow row in dtImages)
                {
                    MemoryStream s = new MemoryStream(row.ThumbnailBinary);
                    System.Windows.Media.Imaging.BitmapImage img = new System.Windows.Media.Imaging.BitmapImage();
                    img.BeginInit();
                    img.StreamSource = s;
                    img.EndInit();
                    alimages.Add(img);
                    RG.ScreenTipDescription = row.ImageName;
                }

But the pictures does not show up all the time. Could this be visuals I read about? (I don't know what visuals are....)

When I reload the software from scratch, it will show up. So is there some event I can call?

Thanks!

Roel

Posted 15 years ago by Actipro Software Support - Cleveland, OH, USA

Roel,

Your single Image in a template seems to be binding to a collection (alimages) of image sources, not a single image source. That is likely your issue here.

Actipro Software Support

Posted 15 years ago by Roel Alblas

I sorry to bother you again, I'm still searching :-(

I think the XAML is OK now! Here it is:

<ribbon:Group Label="Images" KeyTipAccessText="ZI">
                    <ribbon:Group.Variants>
                        <ribbon:GroupVariant Priority="20" Size="Medium" />
                        <ribbon:GroupVariant Priority="60" Size="Small" />
                        <ribbon:GroupVariant Priority="70" Size="Collapsed" />
                    </ribbon:Group.Variants>
                    <ribbon:RibbonGallery x:Name="RG" Label="Images" ItemsSource="{Binding}" Width="200" KeyTipAccessText="L" IsSelectionHighlightVisible="True">
                        <ribbon:RibbonGallery.ItemTemplate>
                            <DataTemplate>
                                <Image Margin="2" Width="80" Height="60" Source="{Binding BindsDirectlyToSource=True}" Stretch="UniformToFill" />
                            </DataTemplate>
                        </ribbon:RibbonGallery.ItemTemplate>
                        <ribbon:RibbonGallery.PopupContent>                            
                            <StackPanel>
                                <ribbon:PopupGallery IsSelectionHighlightVisible="True" Name="RGPG" ItemsSource="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ribbon:RibbonGallery}}, Path=ItemsSource}">
                                    <ribbon:PopupGallery.ItemTemplate>
                                        <DataTemplate>
                                            <Image Margin="2" Width="80" Height="60" Source="{Binding BindsDirectlyToSource=True}" Stretch="UniformToFill" />
                                        </DataTemplate>
                                    </ribbon:PopupGallery.ItemTemplate>
                                </ribbon:PopupGallery>
                            </StackPanel>
                        </ribbon:RibbonGallery.PopupContent>
                    </ribbon:RibbonGallery>
                </ribbon:Group>

Here is the C#:

        void FillImagesControls(int i)
        {
            if (i == 0)
            {
                return;
            }
            
            ClearFields();

            TreeViewItem tvi = new TreeViewItem();
            tvi = (TreeViewItem)tvMenu.SelectedItem;
            TreeViewItem parent = (TreeViewItem)tvi.Parent;
            
            if ((string)parent.Header == "Bonsai's")
            {
                taImages.FillByBonsaiID(dtImages, i);

                foreach (dsTMB.tblImagesRow row in dtImages)
                {
                    MemoryStream s = new MemoryStream(row.ImageBinary);
                    MemoryStream slarge = new MemoryStream(row.ImageBinary);
                    System.Windows.Media.Imaging.BitmapImage img = new System.Windows.Media.Imaging.BitmapImage();
                    System.Windows.Media.Imaging.BitmapImage imglarge = new System.Windows.Media.Imaging.BitmapImage();
                    img.BeginInit();
                    img.StreamSource = s;
                    img.EndInit();
                    imglarge.BeginInit();
                    imglarge.StreamSource = slarge;
                    imglarge.EndInit();
                    alimageslarge.Add(imglarge);
                    alimages.Add(img);

                    RG.ScreenTipDescription = row.ImageName;                   
                }
            }
            else if ((string)parent.Header == "Potten")
            {
                taImages.FillByPotID(dtImages, i);

                foreach (dsTMB.tblImagesRow row in dtImages)
                {
                }
            }

            RG.ItemsSource = alimages;
            RG.DataContext = alimages;
            RGPG.ItemsSource = alimages;
            RGPG.DataContext = alimages;
        }

I've got some questions now.

The base is that the code gives one image in the ribongallery while there are two. Why
would that be?

The popup gives two so that is OK!

I load the images when a menu is clicked this works ok. But when I navigate away the images don't dissapear. I should remove the items but the control is in use. How can I do that?

When a other item in the menu is clicked the gallery should show other images. How can solve this?

Could you please give me answers with code. I'm very visual in this and tired of searching..

Roel

Posted 15 years ago by Actipro Software Support - Cleveland, OH, USA

Roal,

For more complex questions like this, please email us a simple sample project that shows the problem(s) since we can debug what you wrote then. In your email, please include the questions again and reference this post. Thanks!

Actipro Software Support

Posted 15 years ago by Roel Alblas

Hi,

Thanks! it is on his way. Only I have forgotten to include the url to this post :-(

The ticketnumber ends with 633F-9D25.

Kind regards!

Roel

Posted 15 years ago by Roel Alblas

Solved by using ObservableCollection.

Thanks for the quick and good respons!

Roel

The latest build of this product (v24.1.2) was released 2 days ago, which was after the last post in this thread.

Comments (9)

Add Comment