design problems

Question

Hello
I have my app working, but for some reason when I expand my options and I close it, you can see that the expander will move its position.

here is a link for the video:

https://upm365-my.sharepoint.com/:v:/g/personal/e_gromero_alumnos_upm_es/EbQYI6f6YYtFl3Bs1-8T7hoBOjlW5EEhiEdnUniTOSPvAg?e=ZUChYs

Here is my XAML

<Grid>
        <CollectionView ItemsSource="{Binding FireBaseNotebooks}">
            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="model:Notebook">
                    <StackLayout>
                        <Label Text="{Binding Name, StringFormat='Notebook name: {0}'}" />
                        <Label Text="{Binding CreatedDate, StringFormat='Notebook date: {0}'}" />
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>

        </CollectionView>
        <pancakeview:PancakeView HorizontalOptions="End"
                                 VerticalOptions="End"
                                 Margin="30"
                                 CornerRadius="40"
                                 Padding="15"
                                 BackgroundColor="CornflowerBlue">

            <xct:Expander HorizontalOptions="Start"
                          Rotation="180"
                          VerticalOptions="End">
                <xct:Expander.Header>
                    <Label Text="{Static icon:IconFont.BoxOpen}"
                           Rotation="180"
                           FontSize="Title"
                           FontFamily="fa">
                        <Label.Triggers>
                            <DataTrigger TargetType="Label"
                                         Binding="{Binding Source={RelativeSource AncestorType={x:Type xct:Expander}}, Path=IsExpanded}"
                                         Value="False">
                                <Setter Property="Text"
                                        Value="{Static icon:IconFont.Box}">
                                </Setter>
                            </DataTrigger>
                        </Label.Triggers>
                    </Label>
                </xct:Expander.Header>

                <StackLayout Spacing="30"
                             Margin="0,30,0,0"
                             HorizontalOptions="Center">

                    <Label Text="{Static icon:Material.Add}"
                           Rotation="180"
                           FontSize="Title"
                           community:TouchEffect.Command="{Binding CreateNotebook}"
                           FontFamily="mat" />

                    <Label Text="{Static icon:Material.Person}"
                           Rotation="180"
                           FontSize="Title"
                           FontFamily="mat" />


                    <Label Text="{Static icon:Material.Logout}"
                           Rotation="180"
                           FontSize="Title"
                           Margin="0,20,0,5"
                           TextColor="Black"
                           community:TouchEffect.Command="{Binding Logout}"
                           FontFamily="mat" />



                </StackLayout>
            </xct:Expander>
        </pancakeview:PancakeView>
    </Grid>

app

https://github.com/eduardoagr/DuoNotes

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

I write a simple code about your needs from your screenshot. I add this layout in your pancakeview:PancakeView , I use DataTrigger to control the Gird appear or disappear. When Box button is appear, Gird is disappear, the reverse is also the same.

   <pancakeview:PancakeView HorizontalOptions="End"  
                                    VerticalOptions="End"  
                                    Margin="30"  
                                    CornerRadius="40"  
                                    Padding="15"  
                                    BackgroundColor="CornflowerBlue">  
               <Grid>  
                   <Button IsVisible="{Binding IsAppear}" Command="{Binding IconShow}"   WidthRequest="40"  HeightRequest="40" CornerRadius="20"  >  
     
                       <Button.ImageSource>  
                           <FontImageSource   
                                FontFamily="fa"  
                                    Glyph="{x:Static icon:IconFont.Box}"   
                                    Size="20"  
                                   />  
                       </Button.ImageSource>  
                   </Button>  
                   <Grid>  
                       <Grid.Triggers>  
                           <DataTrigger TargetType="Grid" Binding="{Binding IsAppear}" Value="True">  
                               <Setter Property="IsVisible" Value="False" />  
                           </DataTrigger>  
                       </Grid.Triggers>  
                       <Grid.RowDefinitions>  
                           <RowDefinition Height="40" />  
                           <RowDefinition Height="40" />  
                           <RowDefinition Height="40" />  
                           <RowDefinition Height="40" />  
                       </Grid.RowDefinitions>  
                       <Grid.ColumnDefinitions>  
                           <ColumnDefinition Width="*" />  
                           <ColumnDefinition Width="40" />  
                       </Grid.ColumnDefinitions>  
     
                       <Label Text="Person" HorizontalOptions="End" Grid.Row="0" VerticalOptions="Center"></Label>  
                       <Button Grid.Row="0" Grid.Column="1"  WidthRequest="40"  HeightRequest="40" CornerRadius="20"  >  
     
                           <Button.ImageSource>  
                               <FontImageSource   
                                FontFamily="mat"  
                                    Glyph="{x:Static  icon:Material.Person}"   
                                    Size="20"  
                                   />  
                           </Button.ImageSource>  
                       </Button>  
     
                       <Label Text="Log out" HorizontalOptions="End" Grid.Row="1" VerticalOptions="Center"></Label>  
                       <Button Grid.Row="1" Grid.Column="1"  WidthRequest="70"  HeightRequest="70" CornerRadius="35"  >  
     
                           <Button.ImageSource>  
                               <FontImageSource   
                                FontFamily="mat"  
                                    Glyph="{x:Static  icon:Material.Logout}"   
                                    Size="20"  
                                   />  
                           </Button.ImageSource>  
                       </Button>  
     
     
                       <Label Text="Add" HorizontalOptions="End" Grid.Row="2" VerticalOptions="Center"></Label>  
                       <Button Grid.Row="2" Grid.Column="1"  WidthRequest="70"  HeightRequest="70" CornerRadius="35"  >  
     
                           <Button.ImageSource>  
                               <FontImageSource   
                                FontFamily="mat"  
                                    Glyph="{x:Static icon:Material.Add}"   
                                    Size="20"  
                                   />  
                           </Button.ImageSource>  
                       </Button>  
     
                       <Label Text="New conversation" HorizontalOptions="End" Grid.Row="3" VerticalOptions="Center"></Label>  
                       <Button Grid.Row="3" Grid.Column="1"  WidthRequest="70"  HeightRequest="70" CornerRadius="35"  Command="{Binding IconShow}" >  
     
                           <Button.ImageSource>  
                               <FontImageSource   
                                FontFamily="fa"  
                                    Glyph="{x:Static icon:IconFont.BoxOpen}"   
                                    Size="20"  
                                   />  
                           </Button.ImageSource>  
                       </Button>  
                   </Grid>  
     
               </Grid>  
           </pancakeview:PancakeView>  

And I edit your MainPageViewModel.cs, I add the IsAppear Property and IconShow command. IsAppear Property to control the layout is appear or disappear when you click the Box Button.

   [AddINotifyPropertyChangedInterface]  
       public class MainPageViewModel {  
     
           [JsonIgnore]  
           public Action OnAnyPropertiesChanged { get; set; }  
           private void OnPropertyChanged()  
           {  
               OnAnyPropertiesChanged?.Invoke();  
           }  
     
           [OnChangedMethod(nameof(OnPropertyChanged))]  
           public bool IsAppear { get; set; }  
     
           readonly FirebaseServices Servces;  
     
           readonly Notebook Notebook;  
     
           public ICommand CreateNotebook { get; set; }  
           public ICommand IconShow { get; set; }  
     
           public ObservableCollection<Notebook> Notebooks { get; set; }  
     
           public ICommand Logout { get; set; }  
     
     
           public MainPageViewModel() {  
               IsAppear = true;  
               Notebooks = new ObservableCollection<Notebook>();  
     
               // Logout = new Command(LogOut);  
     
               // CreateNotebook = new Command(NewNotebook);  
     
               //    CallNotebooks();  
     
               IconShow = new Command(()=> {  
     
                   IsAppear = !IsAppear;  
               });  
     
           }  

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

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.