Как увеличить активное поле ввода (Xamarin)

Как увеличить активное поле ввода. Active - место, которое вызовет активацию этого места после нажатия

Пример изображения


person Community    schedule 10.05.2018    source источник
comment
Помогло ли вам одно решение, проголосуйте и примите его как полезный ответ... stackoverflow.com/help/someone-answers   -  person Johannes    schedule 16.05.2018


Ответы (3)


Вы можете использовать метод Scale для увеличения размера Entry. Каждое представление имеет свойство Scale, которое можно использовать для увеличения размера;

entry.Scale =2;
person Kalp    schedule 10.05.2018

Взгляните на новый диспетчер визуальных состояний для Xamarin Forms 3.0 https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/visual-state-manager Позволяет вам стилизовать запись для разных состояний. Общие состояния: Normal, Focused, Disabled. Вы можете, например. увеличьте FontSize и сделайте что-нибудь с другими состояниями. (посмотрите по указанной ссылке)

Ваше желаемое состояние Focused.

<Entry FontSize="18">
<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Normal">
            <VisualState.Setters>
                <Setter Property="BackgroundColor" Value="Lime" />
            </VisualState.Setters>
        </VisualState>

        <VisualState x:Name="Focused">
            <VisualState.Setters>
                <Setter Property="FontSize" Value="36" />
            </VisualState.Setters>
        </VisualState>

        <VisualState x:Name="Disabled">
            <VisualState.Setters>
                <Setter Property="BackgroundColor" Value="Pink" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Entry>
person Johannes    schedule 10.05.2018

Есть много способов добиться этого.

Одним из них является изменение позиционных свойств, таких как Margin:

<ContentPage.Resources>
    <ResourceDictionary>
        <Style TargetType="Entry">
            <Style.Setters>
                <Setter Property="Margin" Value="20,30,30,30"/>
                <Setter Property="HorizontalOptions" Value="FillAndExpand"/>
                <Setter Property="VerticalOptions" Value="Center"/>
                <Setter Property="BackgroundColor" Value="AliceBlue"/>
            </Style.Setters>
        </Style>
        <Style TargetType="Image">
            <Style.Setters>
                <Setter Property="HorizontalOptions" Value="Center"/>
                <Setter Property="VerticalOptions" Value="Center"/>
                <Setter Property="Margin" Value="10"/>
                <Setter Property="Source" Value="icon"/>
            </Style.Setters>
        </Style>
    </ResourceDictionary>
</ContentPage.Resources>
<StackLayout>
    <Grid BackgroundColor="Silver">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Image Grid.Column="0" Grid.Row="0"/>
        <Entry Grid.Column="1" Grid.Row="0"
               x:Name="txtName"
               Placeholder="Name"
               Focused="GrowEntry"
               Unfocused="ShrinkEntry"/>

        <Image Grid.Column="0" Grid.Row="1"/>
        <Entry Grid.Column="1" Grid.Row="1"
               x:Name="txtEmail"
               Placeholder="E-mail"
               BackgroundColor="AliceBlue"
               Focused="GrowEntry"
               Unfocused="ShrinkEntry"/>

        <Image Grid.Column="0" Grid.Row="2"/>
        <Entry Grid.Column="1" Grid.Row="2"
               x:Name="txtPassword"
               Placeholder="Password"
               Focused="GrowEntry"
               Unfocused="ShrinkEntry"/>
    </Grid>
    <BoxView Color="White"
             VerticalOptions="FillAndExpand"/>
</StackLayout>

И в коде позади GrowEntry и ShrinkEntry:

private void GrowEntry(object sender, EventArgs args)
{
    var entry = (Entry)sender;

    entry.Margin = new Thickness(6, 12, 12, 12);
}

private void ShrinkEntry(object sender, EventArgs args)
{
    var entry = (Entry)sender;

    entry.Margin = new Thickness(20, 30, 30, 30);
}

Вы получите что-то вроде этого:

На примере

person Diego Rafael Souza    schedule 10.05.2018