2 years ago

#62880

test-img

Razvan Emil

Xamarin.Forms How to set expansion indicator in code-behind for Expander

I am trying to set an arrow image (up = is expanded, down = is NOT expanded) as the indicator for the true or false values for the IsExpanded property of an Expander like in the image below (which is expanded):

enter image description here

I need to set this expander code in code-behind, but the documentation offers the xaml code. Basically i am just trying to write the docs xaml into code.

My code-behind below (my attempt to write the xaml from docs into code) results in this error:

[mono-rt] [ERROR] FATAL UNHANDLED EXCEPTION: System.InvalidOperationException: Operation is not valid due to the current state of the object. [mono-rt] at Xamarin.Forms.Binding.ApplyRelativeSourceBinding (Xamarin.Forms.BindableObject targetObject, Xamarin.Forms.BindableProperty targetProperty) [0x00041] in D:\a\1\s\Xamarin.Forms.Core\Binding.cs:158 [mono-rt] at (wrapper dynamic-method) Android.Runtime.DynamicMethodNameCounter.42(intptr,intptr) [mono-rt]
at (wrapper native-to-managed) Android.Runtime.DynamicMethodNameCounter.42(intptr,intptr)

This is the xaml code from the documentation:

<Expander>
    <Expander.Header>
        <Grid>
            <Label Text="{Binding Name}"
                   FontAttributes="Bold"
                   FontSize="Medium" />
            <Image Source="expand.png"
                   HorizontalOptions="End"
                   VerticalOptions="Start">
                <Image.Triggers>
                    <DataTrigger TargetType="Image"
                                 Binding="{Binding Source={RelativeSource AncestorType={x:Type Expander}}, Path=IsExpanded}"
                                 Value="True">
                        <Setter Property="Source"
                                Value="collapse.png" />
                    </DataTrigger>
                </Image.Triggers>
            </Image>
        </Grid>
    </Expander.Header>
    <Expander.ContentTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Image Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="120"
                       WidthRequest="120" />
                <Label Grid.Column="1"
                       Text="{Binding Details}"
                       FontAttributes="Italic" />
            </Grid>
        </DataTemplate>
    </Expander.ContentTemplate>
</Expander>

And this is my code translation for the xaml above (something wrong with the RelativeSource binding):

    Label lblName = new Label
    {
        Text = categoryName,
        FontFamily = "OpenSansSemiBold",
        FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label)),
        TextColor = Color.Black,
        VerticalTextAlignment = TextAlignment.Center,
       
    };

    Image imgExpansionIndicator = new Image
    {
        Source = "expand.png",              
        HorizontalOptions = LayoutOptions.End,
        VerticalOptions =  LayoutOptions.Start
    };
    
    DataTrigger trigger = new DataTrigger(typeof(Image));

    RelativeBindingSource bindingSource = new RelativeBindingSource(RelativeBindingSourceMode.FindAncestor, typeof(Expander));

    trigger.SetBinding(DataTrigger.BindingContextProperty, new Binding("IsExpanded", BindingMode.Default, null, null, null, bindingSource));
    trigger.Value = true;

    Setter dataSetter = new();
    dataSetter.Property = Image.SourceProperty;
    dataSetter.Value = "collapse.png";

    trigger.Setters.Add(dataSetter);       
    imgExpansionIndicator.Triggers.Add(trigger);

    Grid gridHeader = new();
    gridHeader.Children.Add(lblName);
    gridHeader.Children.Add(imgExpansionIndicator);


    Expander expander = new Expander
    {
        Header = gridHeader,
        IsExpanded = shouldExpand
    };

Link for the Xamarin Expander doc page: https://learn.microsoft.com/en-us/xamarin/community-toolkit/views/expander

xamarin

xamarin.forms

xamarin.android

xamarin.ios

expander

0 Answers

Your Answer

Accepted video resources