Databinding RibbonGallery

Ribbon for WPF Forum

Posted 10 years ago by Roel Alblas
Version: 9.1.0500
Avatar
Hi,

I like to databind the images of a ribbongallery. Is this possible? When yes, could you provide an example? When no, are there any othere suggestions? Databinding as I meant is binding to a sql database with eg a datatable or dataset.

Thanks!

Roel

[Modified at 06/07/2009 10:53 AM]

Comments (9)

Posted 10 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
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 10 years ago by Roel Alblas
Avatar
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 10 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
I would imagine that would work fine too.


Actipro Software Support

Posted 10 years ago by Roel Alblas
Avatar
:-) 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 10 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
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 10 years ago by Roel Alblas
Avatar
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 10 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
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 10 years ago by Roel Alblas
Avatar
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 10 years ago by Roel Alblas
Avatar
Solved by using ObservableCollection.

Thanks for the quick and good respons!

Roel
The latest build of this product (v2018.1 build 0675) was released 1 month ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.