Cara memperbesar kolom Entry yang aktif. Aktif - tempat yang akan memicu pengaktifan tempat ini setelah ditekan
Cara memperbesar kolom Entry yang aktif (Xamarin)
Jawaban (3)
Anda dapat menggunakan metode Skala untuk memperbesar ukuran Entri. Setiap tampilan memiliki properti Skala yang dapat digunakan untuk memperbesar ukuran;
entry.Scale =2;
Lihat Visual State Manager baru untuk Xamarin Forms 3.0 https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/visual-state-manager Ini memungkinkan Anda mengatur gaya entri Anda untuk negara bagian yang berbeda. Negara bagian yang umum adalah Normal
, Focused
, Disabled
. Anda dapat mis. tingkatkan FontSize
dan lakukan hal-hal dengan negara bagian lain juga. (lihat tautan yang diberikan)
Status yang Anda inginkan adalah 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>
Ada banyak cara untuk mencapainya.
Salah satunya adalah mengubah properti posisi, seperti 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>
Dan pada kode di belakangnya, GrowEntry
dan 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);
}
Anda akan mendapatkan sesuatu seperti itu: