Xamarin.Forms Imagebutton
ImageButton bir görüntü görüntüler ve bir uygulamayı belirli bir görevi gerçekleştirmeye yönlendiren bir dokunmaya veya tıklamaya yanıt verir.
Görünüm, ImageButton
içeriği resim olan bir düğme oluşturmak için görünümü ve Image
görünümü birleştirirButton
. Kullanıcı, uygulamayı belirli bir görevi gerçekleştirmeye ImageButton
yönlendirmek için bir parmakla basıyor veya fareyle tıklar. Ancak, görünümden Button
farklı olarak, görünümde ImageButton
metin ve metin görünümü kavramı yoktur.
Not
Button
Görünüm üzerinde görüntü görüntülemenizi sağlayan bir Image
Button
özellik tanımlasa da, bu özellik metnin yanında Button
küçük bir simge görüntülenirken kullanılmak üzere tasarlanmıştır.
Görüntü kaynağını ayarlama
ImageButton
, görüntü kaynağı bir Source
dosya, URI, kaynak veya akış olacak şekilde düğmede görüntülenecek görüntüye ayarlanması gereken bir özelliği tanımlar. Farklı kaynaklardan görüntü yükleme hakkında daha fazla bilgi için bkz . içindeki Xamarin.Formsgörüntüler.
Aşağıdaki örnekte XAML'de örneği ImageButton
oluşturma gösterilmektedir:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FormsGallery.XamlExamples.ImageButtonDemoPage"
Title="ImageButton Demo">
<StackLayout>
<Label Text="ImageButton"
FontSize="50"
FontAttributes="Bold"
HorizontalOptions="Center" />
<ImageButton Source="XamarinLogo.png"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage>
Source
özelliği içinde ImageButton
görüntülenen görüntüyü belirtir. Bu örnekte, her platform projesinden yüklenecek yerel bir dosyaya ayarlanır ve bu da aşağıdaki ekran görüntüleriyle sonuçlanır:
varsayılan olarak dikdörtgendir ImageButton
, ancak özelliğini kullanarak CornerRadius
yuvarlatılmış köşeler verebilirsiniz. Görünüm hakkında ImageButton
daha fazla bilgi için bkz . ImageButton görünümü.
Not
Bir ImageButton
animasyonlu GIF'i yükleyebilirken, GIF'in yalnızca ilk karesini görüntüler.
Aşağıdaki örnekte, işlevsel olarak önceki XAML örneğine eşdeğer ancak tamamen C# dilinde olan bir sayfanın nasıl oluşturulacağı gösterilmektedir:
public class ImageButtonDemoPage : ContentPage
{
public ImageButtonDemoPage()
{
Label header = new Label
{
Text = "ImageButton",
FontSize = 50,
FontAttributes = FontAttributes.Bold,
HorizontalOptions = LayoutOptions.Center
};
ImageButton imageButton = new ImageButton
{
Source = "XamarinLogo.png",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.CenterAndExpand
};
// Build the page.
Title = "ImageButton Demo";
Content = new StackLayout
{
Children = { header, imageButton }
};
}
}
ImageButton tıklamalarını işleme
ImageButton
Clicked
kullanıcı bir parmak veya fare işaretçisi ile dokunduğunda ImageButton
tetiklenen bir olayı tanımlar. Olay, parmak veya fare düğmesi öğesinin yüzeyinden ImageButton
serbest bırakıldığında tetiklenir. özelliğinin ImageButton
IsEnabled
dokunmalara true
yanıt verecek şekilde ayarlanmış olması gerekir.
Aşağıdaki örnekte, XAML'de bir ImageButton
örneğinin nasıl başlatılıp olayının nasıl işleneceğini gösterilmektedir Clicked
:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FormsGallery.XamlExamples.ImageButtonDemoPage"
Title="ImageButton Demo">
<StackLayout>
<Label Text="ImageButton"
FontSize="50"
FontAttributes="Bold"
HorizontalOptions="Center" />
<ImageButton Source="XamarinLogo.png"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"
Clicked="OnImageButtonClicked" />
<Label x:Name="label"
Text="0 ImageButton clicks"
FontSize="Large"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage>
Olay Clicked
, arka planda kod dosyasında bulunan adlı OnImageButtonClicked
bir olay işleyicisine ayarlanır:
public partial class ImageButtonDemoPage : ContentPage
{
int clickTotal;
public ImageButtonDemoPage()
{
InitializeComponent();
}
void OnImageButtonClicked(object sender, EventArgs e)
{
clickTotal += 1;
label.Text = $"{clickTotal} ImageButton click{(clickTotal == 1 ? "" : "s")}";
}
}
ImageButton
öğesine dokunulduğunda OnImageButtonClicked
yöntemi yürütülür. sender
Bağımsız değişken bu olayın sorumlusudurImageButton
. Bunu nesneye erişmek ImageButton
veya aynı Clicked
olayı paylaşan birden çok ImageButton
nesne arasında ayrım yapmak için kullanabilirsiniz.
Bu belirli Clicked
işleyici bir sayacı artırır ve sayaç değerini içinde Label
görüntüler:
Aşağıdaki örnekte, işlevsel olarak önceki XAML örneğine eşdeğer ancak tamamen C# dilinde olan bir sayfanın nasıl oluşturulacağı gösterilmektedir:
public class ImageButtonDemoPage : ContentPage
{
Label label;
int clickTotal = 0;
public ImageButtonDemoPage()
{
Label header = new Label
{
Text = "ImageButton",
FontSize = 50,
FontAttributes = FontAttributes.Bold,
HorizontalOptions = LayoutOptions.Center
};
ImageButton imageButton = new ImageButton
{
Source = "XamarinLogo.png",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.CenterAndExpand
};
imageButton.Clicked += OnImageButtonClicked;
label = new Label
{
Text = "0 ImageButton clicks",
FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.CenterAndExpand
};
// Build the page.
Title = "ImageButton Demo";
Content = new StackLayout
{
Children =
{
header,
imageButton,
label
}
};
}
void OnImageButtonClicked(object sender, EventArgs e)
{
clickTotal += 1;
label.Text = $"{clickTotal} ImageButton click{(clickTotal == 1 ? "" : "s")}";
}
}
ImageButton'i devre dışı bırakma
Bazen bir uygulama, belirli bir tıklamanın geçerli bir işlem olmadığı belirli ImageButton
bir durumda olur. Bu gibi durumlarda, ImageButton
özelliği false
olarak ayarlanarak IsEnabled
devre dışı bırakılmalıdır.
Komut arabirimini kullanma
Bir uygulamanın olayı işlemeden Clicked
dokunmalara ImageButton
yanıt vermesi mümkündür. komutu ImageButton
veya komut arabirimi olarak adlandırılan alternatif bir bildirim mekanizması uygular. Bu iki özelliklerden oluşur:
Command
türündeICommand
, ad alanındaSystem.Windows.Input
tanımlanan bir arabirim.CommandParameter
türündeObject
özelliği.
Bu yaklaşım, veri bağlamayla ve özellikle Model-View-ViewModel (MVVM) mimarisini uygularken uygundur.
Komut arabirimini kullanma hakkında daha fazla bilgi için Düğme kılavuzundaki Komut arabirimini kullanma bölümüne bakın.
ImageButton tuşuna basma ve bırakma
ImageButton
öğesi, Clicked
olayının yanı sıra Pressed
ve Released
olaylarını da tanımlar. Olay, Pressed
bir parmak üzerine bastığında ImageButton
veya işaretçi üzerinde konumlandırılmış bir fare düğmesine basıldığında ImageButton
gerçekleşir. Olay, Released
parmak veya fare düğmesi serbest bırakıldığında gerçekleşir. Genellikle olay Clicked
, olayla aynı anda Released
tetiklenir, ancak parmak veya fare işaretçisi yayımlanmadan önce yüzeyinden ImageButton
uzaklaşırsa, Clicked
olay gerçekleşmeyebilir.
Bu olaylar hakkında daha fazla bilgi için Düğme kılavuzundaki düğmeye basma ve bırakma bölümüne bakın.
ImageButton görünümü
sınıfından devralan ImageButton
View
özelliklere ek olarak, ImageButton
görünümünü etkileyen çeşitli özellikleri de tanımlar:
Aspect
görüntünün görüntü alanına sığacak şekilde nasıl ölçeklendirileceğidir.BorderColor
, öğesini çevreleyen bir alanın rengidirImageButton
.BorderWidth
kenarlık genişliğidir.CornerRadius
, köşe yarıçapıdırImageButton
.
Aspect
özelliği, numaralandırmanın üyelerinden Aspect
birine ayarlanabilir:
Fill
- görüntüyü tamamen genişletir ve tam olarak doldururImageButton
. Bu, görüntünün bozulmasına neden olabilir.AspectFill
- görüntüyü, en boy oranını korurken dolduracak şekilde klipslerImageButton
.AspectFit
- Resmin tamamının içine sığmasıImageButton
için resmi (gerekirse) letterbox'lar; resmin geniş mi yoksa uzun mu olduğuna bağlı olarak üst/alt veya yanlara boş alan eklenir. Bu, numaralandırmanınAspect
varsayılan değeridir.
Not
sınıfında ImageButton
ayrıca düzeninin davranışını ImageButton
denetleen ve Padding
özellikleri vardırMargin
. Daha fazla bilgi için bkz. Kenar Boşlukları ve Doldurma.
ImageButton görsel durumları
ImageButton
Pressed
VisualState
etkin olması koşuluyla, kullanıcı tarafından basıldığında görsel bir değişiklik başlatmak için ImageButton
kullanılabilecek bir öğesine sahiptir.
Aşağıdaki XAML örneğinde durum için görsel durumun nasıl tanımlanacağı gösterilmektedir Pressed
:
<ImageButton Source="XamarinLogo.png"
...>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="Scale"
Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Property="Scale"
Value="0.8" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</ImageButton>
Pressed
VisualState
, tuşuna basıldığında ImageButton
Scale
özelliğinin varsayılan değeri olan 1'den 0,8'e değiştirileceğini belirtir. , Normal
VisualState
normal bir durumda Scale
olduğunda ImageButton
özelliğinin 1 olarak ayarlandığını belirtir. Bu nedenle, genel etki, tuşuna basıldığında ImageButton
biraz daha küçük olacak şekilde yeniden ölçeklendirilir ve serbest bırakıldığında ImageButton
varsayılan boyutuna yeniden ölçeklendirilir.
Görsel durumlar hakkında daha fazla bilgi için bkzXamarin.Forms. Visual State Manager.