design problems

Eduardo Gomez 3,196 Reputation points
2021-12-04T21:23:44.91+00:00

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

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

Accepted answer
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 64,006 Reputation points Microsoft Vendor
    2021-12-07T09:10:25.64+00:00

    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.

    1 person found this answer helpful.
    0 comments No comments

0 additional answers

Sort by: Most helpful