Expander and ForceUpdateSizeCommand

jseffel 21 Reputation points
2020-11-24T15:54:38.577+00:00

Could anyone please describe the ForceUpdateSizeCommand attribute for the Expander?

I have this:
<StackLayout BindableLayout.ItemsSource="{Binding VARIABLE, Mode=TwoWay}">
<Expander>
<Expander.Header>....</Expander.header>
... more stacklayouts with bindable.layout which iterates over elements inside VARIABLE.

The single example I've seen regarding ForceUpdateSizeCommand adds this to the view-model:
public ICommand UpdateSizeCommand { get; set; }

And then perform UpdateSizeCommand.Execute(null) when a given variable is (for example ViewModel.VARIABLE[0].IsExpanded). That seems to work, but if I try to execute the command upon another triggered command or via Message.Send / Message.Subscribe it fails without notice - the Expander does not change its size. I tried the Message.Send/Subscribe thing because my VARIABLE is a composite of 2 different classes and those classes do not have access to the UpdateSizeCommand.

The problem I am trying to solve: The expander does not auto-resize when elements are hidden via IsVisible={Binding Foobar}. I've tried to convert to Grid etc but finally found out that the expander is the culprit.

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,297 questions
0 comments No comments
{count} votes

Accepted answer
  1. JarvanZhang 23,951 Reputation points
    2020-11-25T05:44:41.19+00:00

    Hello,​

    Welcome to our Microsoft Q&A platform!

    The expander does not auto-resize when elements are hidden via IsVisible={Binding Foobar}

    To resize the Expander, try calling the ForceUpdateSize method to update the size of the expander. For example, the size of the font is changed, it's necessary to call the method update the size.

    Check the code:

       <Expander x:Name="expander">  
           <Expander.Header>  
               <Label Text="Testing for Expander"  
                   FontAttributes="Bold"  
                   FontSize="Medium" />  
           </Expander.Header>  
           <Grid Padding="10">  
               <Grid.ColumnDefinitions>  
                   <ColumnDefinition Width="Auto" />  
                   <ColumnDefinition Width="Auto" />  
               </Grid.ColumnDefinitions>  
               <Image Source="https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/Golden_lion_tamarin_portrait3.jpg/220px-Golden_lion_tamarin_portrait3.jpg"   
                       Aspect="AspectFill"  
                       HeightRequest="120"   
                       WidthRequest="120" />  
               <Label  
                       Text="The details of the expander's content,The details of the expander's content,The details of the expander's content,The details of the expander's content,The details of the expander's content,The details of the expander's content,The details of the expander's content"  
                       FontAttributes="Italic">  
                   <Label.GestureRecognizers>  
                       <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />  
                   </Label.GestureRecognizers>  
               </Label>  
           </Grid>  
       </Expander>  
    

    Tap gesture event:

       private void TapGestureRecognizer_Tapped(object sender, EventArgs e)  
       {  
           var label = sender as Label;  
         
           if (label.FontSize == Device.GetNamedSize(NamedSize.Default, label))  
           {  
               label.FontSize = Device.GetNamedSize(NamedSize.Large, label);  
           }  
           else  
           {  
               label.FontSize = Device.GetNamedSize(NamedSize.Default, label);  
           }  
         
           expander.ForceUpdateSize();  
       }  
    

    Effect gif: https://us.v-cdn.net/5019960/uploads/editor/3b/85d2wpveijbb.gif

    Check the link:
    https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/expander#resize-an-expander-at-runtime


    If the response is helpful, please click "Accept Answer" and upvote it.

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments No comments

1 additional answer

Sort by: Most helpful
  1. jseffel 21 Reputation points
    2020-11-25T10:51:02.157+00:00

    Worked. My solution:

    The ViewModel:
    public bool IsExpanded
    {
    get {
    return _isExpanded;
    }
    set {
    _isExpanded = value;
    OnpropertyChanged();
    MessagingCenter.Send(this, "RefreshView");
    }
    }

    Then in min Page-code-behind:
    MessagingCenter.Subscribe<RiskSet>(this, "RefreshView", (sender) =>
    {
    foreach(Expander myExpander in MainStackLayout.Children)
    {
    myExpander.ForceUpdateSize();
    }
    });

    As the expanders were created dynamically I couldnt give them I name so I had to fetch them from the MainStackLayout via Children().

    0 comments No comments