Using a nested data binding on a layout

PaulRiehlePaulRiehle ✭✭USMember ✭✭

I am attempting a nested binding where the topmost level represents pages of the book (PageList), while the children are items on the page (Deploy). The idea is that they are all part of the same layout, with the background image being positioned first, and then the children on top of it. The children can consist of any number of things, such as buttons or images. I was able to achieve this without bindings, but instead looping through the data model and adding the children to the layout. However, I'd like to get it to work with a CarouselView, which requires using bindings. Also, if I'm not mistaken, a CarouselView would virtualize the pages, so that it would handle dynamic loading (very useful with a large book).

Anyway, using bindings, I was able to get the top level to work without an issue, but I can't figure out how to do the nested binding.

  <?xml version="1.0" encoding="UTF-8"?>
  <ContentView xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="OurReader.Views.BookView"
                 x:Name="BookView"
                 xmlns:cv="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView"
                 xmlns:local="clr-namespace:OurReader;assembly=OurReader">
    <ContentView.Resources>
      <ResourceDictionary>
        <local:PathAppender x:Key="pathAppender" />
      </ResourceDictionary>
    </ContentView.Resources>
    <ContentView.Content>
      <cv:CarouselView x:Name="pageCarousel" ItemsSource="{Binding Path=BindingContext.PageList, Source={x:Reference BookView}}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
        <cv:CarouselView.ItemTemplate>
          <DataTemplate>
            <AbsoluteLayout>
              <Image x:Name="backgroundImage" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Source="{Binding PageImage, Converter={StaticResource pathAppender}, ConverterParameter={x:Static local:StaticVariables.contentPath}}" />


              <Label BindingContext="{Binding Deploy}" Text="{Binding ObjectDisplayName}"/>


              <!--RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, Property=X, ElementName=backgroundImage, Factor={Binding ObjectLeft}}"
                       RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, Property=X, ElementName=backgroundImage, Factor={Binding ObjectTop}}"
                       RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, Property=Width, ElementName=backgroundImage, Factor={Binding ObjectWidth}}"
                       RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, Property=Height, ElementName=backgroundImage, Factor={Binding ObjectWidth}}"/>

        </AbsoluteLayout>
      </DataTemplate>
    </cv:CarouselView.ItemTemplate>
  </cv:CarouselView>
</ContentView.Content>

With the XAML as it is, I would at least expect to see multiple overlapping labels to show up at the topleft, but no text appears (the background image works, though). Clearly I'm not understanding how to do nested bindings. I also tried to make a nested DataTemplate, but no syntax seems to work for that. Can someone please take the time to explain how I can achieve what I'm trying to do?

Another problem is that trying to use a binding in the RelativeLayout constraint (the one commented out) causes an error: Xamarin.Forms.Xaml.XamlParseException: Position 20:13. Cannot assign property "Factor": Property does not exists, or is not assignable, or mismatching type between value and property. I realize the binding isn't correct as is, but it's a moot point since it doesn't work no matter what I've tried. I read that I might be able to achieve it with AbsoluteLayouts, but I couldn't find any example how. I also read I could use RelativeLayouts, but only in the code-behind. Again, I couldn't find any example so I'm not really sure how.

Answers

  • PaulRiehlePaulRiehle ✭✭ USMember ✭✭
    edited March 2017

    Anyone have any idea if it is possible to accomplish this?

Sign In or Register to comment.