How to arrange components?

ViktorBylbasViktorBylbas UAMember ✭✭
edited November 2018 in Xamarin.Forms

I need that when I click on the search button, the input panel goes out.
My search component in cell. It cannot overlap into other components.
How can I fix this?

<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" ColumnSpacing="0" RowSpacing="0"
                    Padding="{StaticResource ContentPagePadding}" BackgroundColor="#000017">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="9*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="10" />
                    <ColumnDefinition Width="3*" />
                    <ColumnDefinition Width="2*" />
                    <ColumnDefinition Width="3*" />
                </Grid.ColumnDefinitions>

                <ContentPresenter VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Grid.Row="1" Grid.ColumnSpan="4"
                                  Padding="5, 0" />

                <BoxView Grid.Column="0" Color="{Binding MainColor, Source={x:Static theme:ThemeManager.Theme}}" />

                <Image Grid.Column="1" Source="logo.png" Margin="20, 0, 0, 0" />

                <Grid Grid.Column="3" HorizontalOptions="End" ColumnSpacing="20" Padding="0, 0, 20, 0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <Image Grid.Column="0" Source="bookmark.png" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
                           IsVisible="{TemplateBinding IsOpenSettings, Converter={StaticResource InverseBooleanConverter}}">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Command="{TemplateBinding BookmarkCommand}" />
                        </Image.GestureRecognizers>
                    </Image>

                    <ctrl:SearchView Grid.Column="1" /> <!-- my search component -->

                    <Image Grid.Column="2" Source="Cross.png" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
                           IsVisible="{TemplateBinding IsOpenSettings}">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Command="{TemplateBinding SettingsCommand}" />
                        </Image.GestureRecognizers>
                    </Image>
                    <Image Grid.Column="2" Source="settings.png" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
                           IsVisible="{TemplateBinding IsOpenSettings, Converter={StaticResource InverseBooleanConverter}}">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Command="{TemplateBinding SettingsCommand}" />
                        </Image.GestureRecognizers>
                    </Image>
                </Grid>

            </Grid>

My SearchView:

   <Grid VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand" x:Name="grid">
        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
        </Grid.RowDefinitions>
        <Entry Grid.Row="0" x:Name="textField" Keyboard="Text" BackgroundColor="#a6ffffff"
               Placeholder="{ext:Translate Search_placeholder}" HeightRequest="30" IsVisible="false" />

        <Image Source="Search.png" HorizontalOptions="EndAndExpand" HeightRequest="30" WidthRequest="30">
            <Image.GestureRecognizers>
                <TapGestureRecognizer Tapped="Image_Tapped" />
            </Image.GestureRecognizers>
        </Image>
    </Grid>

Animation slide:

textField.IsVisible = true;
img.Source = "Search_active.png";
new Animation(v => textField.WidthRequest = v, 0, 300)
    .Commit(this, "Slide", 16, 2000, Easing.SinOut, 
        (v, c) => textField.WidthRequest = 300);

Help me please

Answers

  • BillyLiuBillyLiu Member, Xamarin Team Xamurai

    @ViktorBylbas

    Do you want to hide other components when the input panel goes out?
    If so you could try to set their IsVisible property to false when you click the search button. And you could use MessagingCenter to do that.
    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/messaging-center

  • ViktorBylbasViktorBylbas UAMember ✭✭
    edited November 2018

    @BillyLiu
    I changed xaml:

    <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" ColumnSpacing="0" RowSpacing="0"
                        Padding="{StaticResource ContentPagePadding}" BackgroundColor="#000017">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="9*" />
                    </Grid.RowDefinitions>
    
    <ContentPresenter VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Grid.Row="1"
                                      Padding="5, 0" />
    
                    <AbsoluteLayout>
                        <BoxView Color="{Binding MainColor, Source={x:Static theme:ThemeManager.Theme}}"
                                 AbsoluteLayout.LayoutBounds="0, 0, .03, 1" AbsoluteLayout.LayoutFlags="All" />
    
                        <Image Source="logo.png"
                                 AbsoluteLayout.LayoutBounds=".1, 0, .3, 1" AbsoluteLayout.LayoutFlags="All" />
    
                        <Image Source="bookmark.png"
                               IsVisible="{TemplateBinding IsOpenSettings, Converter={StaticResource InverseBooleanConverter}}"
                               AbsoluteLayout.LayoutBounds=".8, .5, .1, .4" AbsoluteLayout.LayoutFlags="All" >
                            <Image.GestureRecognizers>
                                <TapGestureRecognizer Command="{TemplateBinding BookmarkCommand}" />
                            </Image.GestureRecognizers>
                        </Image>
    
                        <AbsoluteLayout AbsoluteLayout.LayoutBounds=".9, .4, .1, .4" AbsoluteLayout.LayoutFlags="All">
                            <ctrl:SearchView />
                        </AbsoluteLayout>
    
                        <Image Source="Cross.png"
                               IsVisible="{TemplateBinding IsOpenSettings}"
                               AbsoluteLayout.LayoutBounds="1, .5, .1, .4" AbsoluteLayout.LayoutFlags="All">
                            <Image.GestureRecognizers>
                                <TapGestureRecognizer Command="{TemplateBinding SettingsCommand}" />
                            </Image.GestureRecognizers>
                        </Image>
                        <Image Source="settings.png"
                               IsVisible="{TemplateBinding IsOpenSettings, Converter={StaticResource InverseBooleanConverter}}"
                               AbsoluteLayout.LayoutBounds="1, .5, .1, .4" AbsoluteLayout.LayoutFlags="All">
                            <Image.GestureRecognizers>
                                <TapGestureRecognizer Command="{TemplateBinding SettingsCommand}" />
                            </Image.GestureRecognizers>
                        </Image>
                    </AbsoluteLayout>
                </Grid>
    

    Edited animation:

    void Image_Tapped(object sender, EventArgs e)
    {
          var img = sender as Image;
    
        textField.IsVisible = true;
          var animation = new Animation();
    
          var textFieldTranslate = new Animation(v => textField.TranslationX = v, img.Width img.Width - 300);
          var textFieldChangeWidth = new Animation(v => textField.WidthRequest = v, 0, 300);
    
          animation.Add(0, 1, textFieldTranslate);
          animation.Add(0, 1, textFieldChangeWidth);
    
          animation.Commit(this, "Slide", 1000, 500, Easing.Linear);
    }
    

    But Entry not clickable. Why?

Sign In or Register to comment.