Forum Xamarin Xamarin.Forms

Using DataTrigger in XAML

OrenNovotnyOrenNovotny USMember, Insider, Beta, University ✭✭
edited January 2015 in Xamarin.Forms

Using 1.3, I'm trying to create a data trigger in XAML but I keep getting exceptions related to the TargetType.

I first tried this:

<controls:WImage Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" HeightRequest="150" Aspect="AspectFill">
  <controls:WImage.Source>
    <UriImageSource Uri="{Binding ImageUrl, Converter={StaticResource StringToUriConverter}}" />
  </controls:WImage.Source>
  <controls:WImage.Triggers>
    <DataTrigger TargetType="controls:WImage" Binding="{Binding ImageUrl}" Value="{x:Null}"  >
      <Setter Property="IsVisible" Value="False" />
    </DataTrigger>
  </controls:WImage.Triggers>
</controls:WImage>

But it said Position 161:20. The Property TargetType is required to create a Xamarin.Forms.DataTrigger object.

Then I tried using

<controls:WImage Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" HeightRequest="150" Aspect="AspectFill">
  <controls:WImage.Source>
    <UriImageSource Uri="{Binding ImageUrl, Converter={StaticResource StringToUriConverter}}" />
  </controls:WImage.Source>
  <controls:WImage.Triggers>
    <DataTrigger TargetType="{x:Type controls:WImage}" Binding="{Binding ImageUrl}" Value="{x:Null}"  >
      <Setter Property="IsVisible" Value="False" />
    </DataTrigger>
  </controls:WImage.Triggers>
</controls:WImage>

But it says key not found, so it doesn't seem to like x:Type.

I'm trying to hide the image element if the ImageUrl is null. This is all inside a DataTemplate, any ideas?

FWIW, WImage is my wrapper to fix the OOM exceptions that I mentioned in this thread.

Posts

  • ScottMaskielScottMaskiel AUMember ✭✭

    I've asked a similar question here but no answer as yet: http://forums.xamarin.com/discussion/30353/datatrigger-in-xaml-throwing-an-error#latest

    Very keen on getting a response!

  • StephaneDelcroixStephaneDelcroix USInsider, Beta ✭✭✭✭

    @OrenNovotny the second issue, regarding the x:Type syntax, is known. But I don't have any issue with the first syntax at all.

  • TheRealJasonSmithTheRealJasonSmith USXamarin Team Xamurai

    This will be resolved in 1.3.4-pre1

  • zurbaszurbas ESMember

    XF 1.4.0

    <Image> <Image.Triggers> <DataTrigger TargetType="Image" Binding="{Binding Path=Status}" Value="Identified"> <Setter Property="Source" Value="Icon_Identified.png"/> </DataTrigger> <DataTrigger TargetType="Image" Binding="{Binding Path=Status}" Value="Unidentified"> <Setter Property="Source" Value="Icon_Unidentified.png"/> </DataTrigger> </Image.Triggers> </Image>

    The Property TargetType is required to create a Xamarin.Forms.DataTrigger object.

    Any Ideas?

  • TiborEbnerTiborEbner HUMember
    edited March 2015

    @TheRealJasonSmith I have this issue too by the way (in the latest 1.4.0).

  • JeremyHerbisonJeremyHerbison CAMember ✭✭
    edited April 2015

    Same issue here with 1.4.1. Looks like Tibor logged a bug 28719, where he indicated that this only happens inside a datatemplate. That's my experience as well.

    I'm trying to display one of two images based on whether the current item in a listview is selected or not. Anyone have a viable workaround?

  • JoshuaThongJoshuaThong USMember

    @TheRealJasonSmith This is still not working in DataTemplates as of Xamarin 3.9. Is there a scheduled fix in the works?

  • JoshuaThongJoshuaThong USMember

    @JeremyHerbison A possible workaround is to move your DataTemplate XAML into a separate ContentView class

    Eg. MyCustomView.xaml

    <?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="MyCustomView"> <Label Text="{Binding Text}"> <Label.Triggers> <DataTrigger TargetType="Label" Binding="{Binding IsSelected}" Value="True"> <Setter Property="BackgroundColor" Value="White" /> </DataTrigger> </Label.Triggers> </Label> </ContentView>

    Then in your DataTemplate, you use your custom view:

    <DataTemplate> <MyCustomView /> </DataTemplate>

  • PriyabrataDashPriyabrataDash USMember ✭✭

    @TheRealJasonSmith : Any fix for this ? Still getting the same error with latest Forms package.

  • MaximilianMantzMaximilianMantz DEMember

    @JoshuaThong Your workaround made my day! I am still experiencing this issue, albeit in a slightly different manner. Whenever I use DataTriggers inside a DataTemplate I get an exception with the message "Property Triggers not found".

    This seems to indicate that the bug is not quite resolved yet. Your workaround, however is getting the job done!

  • NicolasHotterbeekxNicolasHotterbeekx USMember ✭✭✭

    This bug has been reopened with a demo project: https://bugzilla.xamarin.com/show_bug.cgi?id=28719
    I don't understand that the bug was marked as resolved as even the most simple case did not work.
    Anyway, nice workaround @JoshuaThong! :smile:

  • NicolasHotterbeekxNicolasHotterbeekx USMember ✭✭✭
    edited June 2015

    @AndreiNitescu, it show how to use it in a normal case. Which does work. But unfortunatly is does not work in a DataTemplate

  • AndrewMobileAndrewMobile USMember ✭✭✭✭

    @NicolasHotterbeekx sorry, you're right, I didn't see the issue is in a DataTemplate

  • BlueRajaBlueRaja USMember ✭✭
    edited June 2015

    I finally got this to work by moving the entire Style out of the DataTemplate and into a static resource.

    So for instance, if we want to set a ListView item's TextColor=Black when SetToBlack == true, we'd normally do something like this:

    <ContentPage xmlns="blahblahblah">
        <ListView>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Label Text="{Binding SomeProperty}">
                            <Label.Style>
                                <Style TargetType="Label">
                                    <Style.Triggers>
                                        <!-- This doesn't work because we're in a DataTemplate! -->
                                        <DataTrigger TargetType="Label" Binding="{Binding SetToBlack}" Value="True">
                                            <Setter Property="TextColor" Value="Black" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </Label.Style>
                        </Label>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentPage>
    

    To work around this Xamarin Forms bug, do this instead:

    <ContentPage xmlns="blahblahblah">
        <ContentPage.Resources>
            <ResourceDictionary>
                <Style x:Key="MyLabelStyle" TargetType="Label">
                    <Style.Triggers>
                        <DataTrigger TargetType="Label" Binding="{Binding SetToBlack}" Value="True" >
                            <Setter Property="TextColor" Value="Black" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </ResourceDictionary>
        </ContentPage.Resources>
    
        <ListView>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Label Text="{Binding SomeProperty}" Style="{StaticResource MyLabelStyle}"/>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentPage>
    

    I think that's cleaner anyways, it keeps the styling and layout separate (similar to CSS and HTML)

    Also make sure you define TargetType="Label" on both the Style and the DataTrigger. It's not necessary in normal XAML, but for some reason it is in Xamarin-XAML.

  • BlueRajaBlueRaja USMember ✭✭

    FYI, this bug has been fixed in the latest pre-release version of Xamarin.Forms: http://forums.xamarin.com/discussion/45656/xamarin-forms-1-4-4-pre1-released#latest

  • AroglDarthuAroglDarthu USMember

    Concerning the DataTemplate issue... make sure you are referencing the correct DataContext. Controls inside of the DataTemplate will have one of the items in the ListView's ItemsSource as their DataContext. This threw me off for a while ;-)

    So you probably want to trigger on a property in the DataContext of the parent of the ListView. For instance the page. You can do that by naming the page and then use a binding like:
    <DataTrigger TargetType="Label" Binding="{Binding Path=BindingContext.SomeProperty, Source={x:Reference pageQuestionDetails}}" Value="True" > <Setter Property="BackgroundColor" Value="#00FF00" /> </DataTrigger>

  • huangjinshehuangjinshe USMember ✭✭✭

    if your Trigger or DataTrigger missing the attribute: TargetType="Button" (the Button is your control). you may will also get this exception.
    Just for you note.

Sign In or Register to comment.