2 years ago
#62880

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):
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