This project is read-only.

Binding Image data to XML Data Provider

Nov 18, 2012 at 5:25 PM

Hi Guys,

I have an XML template like this:

<?xml version="1.0" encoding="utf-8" ?>
<NewDataset>
  <Products>
    <Product>
    "Images\Brown.png"
    <LImg>"Images\BrownLarge.png"</LImg>
    <Txt>Om</Txt>
    <Grp>Group Om</Grp>
    </Product>

...
  </Products>
  </NewDataset>

and I would like to bind it to ribbongallery to display a list of images so that the user can select one. My XAML Looks like this:

<Fluent:RibbonWindow x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Fluent="clr-namespace:Fluent;assembly=Fluent"
Title="Fluent.Sample.Foundation" Width="500" Height="250" >

    <!--Data Templates-->
    <Fluent:RibbonWindow.Resources>
        <XmlDataProvider x:Key="OMXML" Source="om.xml" XPath="/Products"></XmlDataProvider>
    </Fluent:RibbonWindow.Resources>

    <Grid>
        <Fluent:Ribbon>
          
            <!--Tabs-->
            <Fluent:RibbonTabItem Header="Tab">
                  <Fluent:RibbonGroupBox Header="Om">
                   
                    <Fluent:DropDownButton Name="om" Header="DropDownButton" Icon="Images\Green.png" LargeIcon="Images\GreenLarge.png">
                        <Fluent:Gallery ItemsSource="{Binding Source={StaticResource OMXML}}" DisplayMemberPath="Product" MaxItemsInRow="3">
                            <Fluent:GalleryItem>
                                <DataTemplate>
                                 <Border>
                                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                                    <Image Source="{Binding XPath=Img}" Stretch="UniformToFill"/>
                                    <TextBlock Text="{Binding XPath=Txt}" FontSize="10" VerticalAlignment="Center"/>
                                </StackPanel>
                            </Border>
                            </DataTemplate>
                            </Fluent:GalleryItem>
                        </Fluent:Gallery>
                        <Fluent:MenuItem Icon="Images\Pink.png" Header="Pink"/>
                    </Fluent:DropDownButton>
                  </Fluent:RibbonGroupBox>
            </Fluent:RibbonTabItem>
        </Fluent:Ribbon>
          </Grid>
    </Fluent:RibbonWindow>

However I get the runtime error like this:

Items collection must be empty before using ItemsSource.

please help me out. Am a noob in wpf.

Nov 18, 2012 at 9:50 PM

Instead of placing an GalleryItem directly in the Gallery, you have to define the ItemTemplate/ItemContainerStyle of the Gallery.

In fact you are binding ItemsSource and adding one item via XAML, this is not allowed in WPF.

I never tried doing this with the Gallery control, but this is the way it has to be done for all ItemsControls in WPF.

Nov 19, 2012 at 1:56 AM

Hi Batzen. Thanks for the quick reply. I tried modifying the XAML like this:

<Fluent:RibbonWindow x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Fluent="clr-namespace:Fluent;assembly=Fluent"
Title="Fluent.Sample.Foundation" Width="500" Height="250" >

    <!--Data Templates-->
    <Fluent:RibbonWindow.Resources>
        <XmlDataProvider x:Key="OMXML" Source="om.xml" XPath="/Products"></XmlDataProvider>
        <DataTemplate x:Key="middleDataItemTemplate">
            <Border>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                    <Image Source="{Binding XPath=Img}" Stretch="UniformToFill"/>
                    <TextBlock Text="{Binding XPath=Txt, Mode=OneWay}" FontSize="10" VerticalAlignment="Center"/>
                </StackPanel>
            </Border>
        </DataTemplate>
    </Fluent:RibbonWindow.Resources>

    <Grid>
        <Fluent:Ribbon>
          
            <!--Tabs-->
            <Fluent:RibbonTabItem Header="Tab">
                  <Fluent:RibbonGroupBox Header="Om">
                                        <Fluent:DropDownButton Name="om" Header="DropDownButton" Icon="Images\Green.png" LargeIcon="Images\GreenLarge.png">
                        <Fluent:Gallery ItemsSource="{Binding Source={StaticResource OMXML}}" MaxItemsInRow="3" ItemTemplate="{DynamicResource middleDataItemTemplate}"/>
              
                        <Fluent:MenuItem Icon="Images\Pink.png" Header="Pink"/>
                    </Fluent:DropDownButton>
                  </Fluent:RibbonGroupBox>
            </Fluent:RibbonTabItem>
        </Fluent:Ribbon>
          </Grid>
    </Fluent:RibbonWindow>

No I get no errors. However, the images are not getting displayed in the ribbon gallery. I don't know what I did wrongly now.

Nov 19, 2012 at 6:51 AM

A Quick Update. Solved the Issue by removing the quotation marks in the XML. Thanks a lot batzen!