Xamarin.Forms Düğme

Makale
07/21/2020

Düğme, bir uygulamayı belirli bir görevi gerçekleştirmeye yönlendiren bir dokunmaya veya tıklamaya yanıt verir.

Button, tüm içindeki en temel etkileşimli denetimdirXamarin.Forms. genellikle Button komutu gösteren kısa bir metin dizesi görüntüler, ancak bit eşlem görüntüsü veya metin ile görüntünün birleşimini de görüntüleyebilir. Kullanıcı bir parmakla tuşuna Button basar veya bu komutu başlatmak için fareyle tıklar.

düğme tıklamalarını işleme

ButtonClicked kullanıcı bir parmak veya fare işaretçisi ile dokunduğunda Button tetiklenen bir olayı tanımlar. Olay, parmak veya fare düğmesi öğesinin yüzeyinden Buttonserbest bırakıldığında tetiklenir. dokunmalara Button yanıt verebilmesi için özelliğinin olarak ayarlanmış true olması gerekirIsEnabled.

Örnekteki Temel Düğme Tıklama sayfası, XAML'de bir Button örneğinin nasıl başlatılıp olayının nasıl işleneceğini Clicked gösterir. BasicButtonClickPage.xaml dosyası hem hem StackLayoutLabelButtonde ile bir içerir:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ButtonDemos.BasicButtonClickPage"
             Title="Basic Button Click">
    <StackLayout>

        <Label x:Name="label"
               Text="Click the Button below"
               FontSize="Large"
               VerticalOptions="CenterAndExpand"
               HorizontalOptions="Center" />

        <Button Text="Click to Rotate Text!"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="Center"
                Clicked="OnButtonClicked" />

    </StackLayout>
</ContentPage>

buna Button izin verilen tüm alanı kaplar. Örneğin, özelliğini Button dışında FillButton bir değere ayarlamazsanız HorizontalOptions , üst öğesinin tam genişliğini kaplar.

varsayılan olarak, Button dikdörtgendir, ancak aşağıda Düğme görünümü bölümünde açıklandığı gibi özelliğini kullanarak CornerRadius yuvarlatılmış köşeler verebilirsiniz.

Text özelliği, Button içinde görüntülenen metni belirtir. Olay Clicked adlı OnButtonClickedbir olay işleyicisine ayarlanır. Bu işleyici arka planda kod dosyasında bulunur BasicButtonClickPage.xaml.cs:

public partial class BasicButtonClickPage : ContentPage
{
    public BasicButtonClickPage ()
    {
        InitializeComponent ();
    }

    async void OnButtonClicked(object sender, EventArgs args)
    {
        await label.RelRotateTo(360, 1000);
    }
}

Button öğesine dokunulduğunda OnButtonClicked yöntemi yürütülür. sender bağımsız değişkeni, bu olaydan sorumlu nesnedirButton. Bunu nesneye erişmek Button veya aynı Clicked olayı paylaşan birden çok Button nesne arasında ayrım yapmak için kullanabilirsiniz.

Bu özel Clicked işleyici, 360 dereceyi Label 1000 milisaniye olarak döndüren bir animasyon işlevini çağırır. iOS ve Android cihazlarda ve Windows 10 masaüstünde Evrensel Windows Platformu (UWP) uygulaması olarak çalışan program aşağıdadır:

Yöntemin OnButtonClicked , olay işleyicisinde kullanıldığından async değiştiriciyi await içerdiğine dikkat edin. Olay Clicked işleyicisi, değiştiriciyi async yalnızca işleyicinin gövdesi kullanıyorsa awaitgerektirir.

Her platform, öğesini Button kendi kendine özel bir şekilde işler. Düğme görünümü bölümünde, renklerin nasıl ayarlandığını ve daha özelleştirilmiş görünümler için kenarlıkların Button nasıl görünür hale getirileceği gösterilir. Button, ve FontAttributes özelliklerini içermesi FontSizeIFontElementFontFamilyiçin arabirimini uygular.

Kodda düğme oluşturma

XAML'de örneği oluşturmak yaygın bir Button durum olsa da kodda da Button oluşturabilirsiniz. Bu, uygulamanızın döngüyle foreach numaralandırılabilen verileri temel alan birden çok düğme oluşturması gerektiğinde kullanışlı olabilir.

Kod Düğmesi Tıklama sayfası, temel düğme tıklama sayfasına eşdeğer ancak tamamen C# dilinde bir sayfanın nasıl oluşturulacağını gösterir:

public class CodeButtonClickPage : ContentPage
{
    public CodeButtonClickPage ()
    {
        Title = "Code Button Click";

        Label label = new Label
        {
            Text = "Click the Button below",
            FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
            VerticalOptions = LayoutOptions.CenterAndExpand,
            HorizontalOptions = LayoutOptions.Center
        };

        Button button = new Button
        {
            Text = "Click to Rotate Text!",
            VerticalOptions = LayoutOptions.CenterAndExpand,
            HorizontalOptions = LayoutOptions.Center
        };
        button.Clicked += async (sender, args) => await label.RelRotateTo(360, 1000);

        Content = new StackLayout
        {
            Children =
            {
                label,
                button
            }
        };
    }
}

Her şey sınıfın oluşturucusunda yapılır. Clicked İşleyici yalnızca bir deyim uzunluğunda olduğundan, olaya çok basit bir şekilde eklenebilir:

button.Clicked += async (sender, args) => await label.RelRotateTo(360, 1000);

Elbette, olay işleyicisini ayrı bir yöntem olarak tanımlayabilir (Temel Düğme Tıklaması'ndaki OnButtonClickyöntem gibi) ve bu yöntemi olaya ekleyebilirsiniz:

button.Clicked += OnButtonClicked;

Düğmeyi devre dışı bırakma

Bazen bir uygulama, belirli bir tıklamanın geçerli bir işlem olmadığı belirli Button bir durumda olur. Bu gibi durumlarda, Button özelliği falseolarak ayarlanarak IsEnabled devre dışı bırakılmalıdır. Klasik örnek, dosya açma Buttonile birlikte bir dosya adı için bir Entry denetimdir: Button yalnızca içine bir metin yazıldıysa Entryetkinleştirilmelidir. Veri Tetikleyicileri makalesinde gösterildiği gibi bu görev için bir DataTrigger kullanabilirsiniz.

Komut arabirimini kullanma

Bir uygulamanın olayı işlemeden Clicked dokunmalara Button yanıt vermesi mümkündür. komutu Button veya komut arabirimi olarak adlandırılan alternatif bir bildirim mekanizması uygular. Bu iki özelliklerden oluşur:

Command türünde ICommand, ad alanında System.Windows.Input tanımlanan bir arabirim.
CommandParameter türünde Objectözelliği.

Bu yaklaşım özellikle veri bağlama ile bağlantılı olarak ve özellikle Model-View-ViewModel (MVVM) mimarisini uygularken uygundur. Bu konular Veri Bağlama, Veri Bağlamadan MVVM'ye ve MVVM makalelerinde ele alınıyor.

Bir MVVM uygulamasında viewmodel, daha sonra veri bağlamalarıyla XAML Button öğelerine bağlanan tür ICommand özelliklerini tanımlar. Xamarin.Formsayrıca arabirimini ICommand uygulayan ve görünüm modeline türünün ICommandözelliklerini tanımlamada yardımcı olan ve Command<T> sınıflarını tanımlarCommand.

Komut oluşturma, Komut Arabirimi makalesinde daha ayrıntılı olarak açıklanmıştır, ancak örnekteki Temel Düğme Komutu sayfası temel yaklaşımı gösterir.

CommandDemoViewModel sınıfı, adlı Numbertürünün double bir özelliğini ve ve türünde iki özelliği tanımlayan çok basit bir görünüm modelidir MultiplyBy2CommandICommandDivideBy2Command:

class CommandDemoViewModel : INotifyPropertyChanged
{
    double number = 1;

    public event PropertyChangedEventHandler PropertyChanged;

    public CommandDemoViewModel()
    {
        MultiplyBy2Command = new Command(() => Number *= 2);

        DivideBy2Command = new Command(() => Number /= 2);
    }

    public double Number
    {
        set
        {
            if (number != value)
            {
                number = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Number"));
            }
        }
        get
        {
            return number;
        }
    }

    public ICommand MultiplyBy2Command { private set; get; }

    public ICommand DivideBy2Command { private set; get; }
}

İki ICommand özellik sınıfının oluşturucusunda türünde Commandiki nesneyle başlatılır. Oluşturucular Command , özelliği ikiye execute katlayan veya yarıya Number indiren küçük bir işlev (oluşturucu bağımsız değişkeni olarak adlandırılır) içerir.

BasicButtonCommand.xaml dosyası dosyasını BindingContext bir örneğine CommandDemoViewModelayarlar. Label öğesi ve iki Button öğe içindeki CommandDemoViewModelüç özelliğe bağlamalar içerir:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ButtonDemos"
             x:Class="ButtonDemos.BasicButtonCommandPage"
             Title="Basic Button Command">

    <ContentPage.BindingContext>
        <local:CommandDemoViewModel />
    </ContentPage.BindingContext>

    <StackLayout>
        <Label Text="{Binding Number, StringFormat='Value is now {0}'}"
               FontSize="Large"
               VerticalOptions="CenterAndExpand"
               HorizontalOptions="Center" />

        <Button Text="Multiply by 2"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="Center"
                Command="{Binding MultiplyBy2Command}" />

        <Button Text="Divide by 2"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="Center"
                Command="{Binding DivideBy2Command}" />
    </StackLayout>
</ContentPage>

İki Button öğeye dokunulduğunda komutlar yürütülür ve sayı değeri değişir:

bu yaklaşımın işleyicilere göre Clicked avantajı, bu sayfanın işlevselliğini içeren tüm mantığın arka planda kod dosyası yerine görünüm modelinde bulunması ve kullanıcı arabiriminin iş mantığından daha iyi ayrılmasıdır.

Nesnelerin öğelerin etkinleştirilmesini ve devre dışı bırakılmasını denetlemesi Button de mümkündürCommand. Örneğin, sayı değerleri aralığını 2 10 ile 2-10 arasında sınırlamak istediğinizi varsayalım. Oluşturucuya başka bir işlev (bağımsız değişken olarak adlandırılırcanExecute) ekleyebilirsiniz. Bu işlev etkinleştirilirse Button döndürülebilirtrue. Oluşturucuda yapılan değişiklik şu şekildedir CommandDemoViewModel :

class CommandDemoViewModel : INotifyPropertyChanged
{
    ···
    public CommandDemoViewModel()
    {
        MultiplyBy2Command = new Command(
            execute: () =>
            {
                Number *= 2;
                ((Command)MultiplyBy2Command).ChangeCanExecute();
                ((Command)DivideBy2Command).ChangeCanExecute();
            },
            canExecute: () => Number < Math.Pow(2, 10));

        DivideBy2Command = new Command(
            execute: () =>
            {
                Number /= 2;
                ((Command)MultiplyBy2Command).ChangeCanExecute();
                ((Command)DivideBy2Command).ChangeCanExecute();
            },
            canExecute: () => Number > Math.Pow(2, -10));
    }
    ···
}

yöntemine ChangeCanExecuteCommand yapılan çağrılar, yöntemin Command yöntemini çağırabilmesi canExecute ve devre dışı bırakılıp Button bırakılmaması gerektiğini belirleyebilmesi için gereklidir. Bu kod değişikliğiyle, sayı sınıra ulaştığında, Button şu devre dışı bırakılır:

İki veya daha fazla Button öğe aynı ICommand özelliğe bağlanabilir. Button öğeleri özelliği Buttonkullanılarak CommandParameter ayırt edilebilir. Bu durumda, genel Command<T> sınıfı kullanmak isteyeceksiniz. Nesne CommandParameter daha sonra ve canExecute yöntemlerine execute bağımsız değişken olarak geçirilir. Bu teknik, Komut Arabirimi makalesinin Temel Komut bölümünde ayrıntılı olarak gösterilir.

Örnek, sınıfında da bu tekniği MainPage kullanır. MainPage.xaml dosyası, örneğin her sayfası için bir Button içerir:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ButtonDemos"
             x:Class="ButtonDemos.MainPage"
             Title="Button Demos">
    <ScrollView>
        <FlexLayout Direction="Column"
                    JustifyContent="SpaceEvenly"
                    AlignItems="Center">

            <Button Text="Basic Button Click"
                    Command="{Binding NavigateCommand}"
                    CommandParameter="{x:Type local:BasicButtonClickPage}" />

            <Button Text="Code Button Click"
                    Command="{Binding NavigateCommand}"
                    CommandParameter="{x:Type local:CodeButtonClickPage}" />

            <Button Text="Basic Button Command"
                    Command="{Binding NavigateCommand}"
                    CommandParameter="{x:Type local:BasicButtonCommandPage}" />

            <Button Text="Press and Release Button"
                    Command="{Binding NavigateCommand}"
                    CommandParameter="{x:Type local:PressAndReleaseButtonPage}" />

            <Button Text="Button Appearance"
                    Command="{Binding NavigateCommand}"
                    CommandParameter="{x:Type local:ButtonAppearancePage}" />

            <Button Text="Toggle Button Demo"
                    Command="{Binding NavigateCommand}"
                    CommandParameter="{x:Type local:ToggleButtonDemoPage}" />

            <Button Text="Image Button Demo"
                    Command="{Binding NavigateCommand}"
                    CommandParameter="{x:Type local:ImageButtonDemoPage}" />

        </FlexLayout>
    </ScrollView>
</ContentPage>

Her Button birinin özelliği adlı NavigateCommandbir özelliğe bağlıdır ve CommandParameter , projedeki sayfa sınıflarından birine karşılık gelen bir TypeCommand nesneye ayarlanır.

Bu NavigateCommand özellik türündedir ICommand ve arka planda kod dosyasında tanımlanır:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        NavigateCommand = new Command<Type>(async (Type pageType) =>
        {
            Page page = (Page)Activator.CreateInstance(pageType);
            await Navigation.PushAsync(page);
        });

        BindingContext = this;
    }

    public ICommand NavigateCommand { private set; get; }
}

Oluşturucu, XAML dosyasında ayarlanan nesnenin CommandParameter türü olduğundan Type özelliğini bir Command<Type> nesneye başlatırNavigateCommand. Bu, yöntemin execute bu CommandParameter nesneye karşılık gelen türde Type bir bağımsız değişkeni olduğu anlamına gelir. işlevi sayfayı oluşturur ve sayfaya gider.

Oluşturucunun kendisini ayarlayarak BindingContext sonuç verdiğine dikkat edin. Bu, XAML dosyasındaki özelliklerin özelliğine bağlanması için NavigateCommand gereklidir.

Düğmeye basma ve bırakma

Button öğesi, Clicked olayının yanı sıra Pressed ve Released olaylarını da tanımlar. Olay, Pressed bir parmak üzerine bastığında Buttonveya işaretçi üzerinde konumlandırılmış bir fare düğmesine basıldığında Buttongerçekleşir. Olay, Released parmak veya fare düğmesi serbest bırakıldığında gerçekleşir. Genellikle, olayla aynı anda Released bir Clicked olay da tetiklenir, ancak parmak veya fare işaretçisi yayımlanmadan önce yüzeyinden Button uzaklaşırsa, Clicked olay gerçekleşmeyebilir.

Pressed ve Released olayları genellikle kullanılmaz, ancak Bas ve Bırak Düğmesi sayfasında gösterildiği gibi özel amaçlar için kullanılabilir. XAML dosyası, ve Button olayları için Pressed ekli işleyicileri olan bir Label ve Released içerir:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ButtonDemos.PressAndReleaseButtonPage"
             Title="Press and Release Button">
    <StackLayout>

        <Label x:Name="label"
               Text="Press and hold the Button below"
               FontSize="Large"
               VerticalOptions="CenterAndExpand"
               HorizontalOptions="Center" />

        <Button Text="Press to Rotate Text!"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="Center"
                Pressed="OnButtonPressed"
                Released="OnButtonReleased" />

    </StackLayout>
</ContentPage>

Arka planda kod dosyası, bir Pressed olay gerçekleştiğinde öğesine animasyon Label oluşturur, ancak bir Released olay gerçekleştiğinde döndürmeyi askıya alır:

public partial class PressAndReleaseButtonPage : ContentPage
{
    bool animationInProgress = false;
    Stopwatch stopwatch = new Stopwatch();

    public PressAndReleaseButtonPage ()
    {
        InitializeComponent ();
    }

    void OnButtonPressed(object sender, EventArgs args)
    {
        stopwatch.Start();
        animationInProgress = true;

        Device.StartTimer(TimeSpan.FromMilliseconds(16), () =>
        {
            label.Rotation = 360 * (stopwatch.Elapsed.TotalSeconds % 1);

            return animationInProgress;
        });
    }

    void OnButtonReleased(object sender, EventArgs args)
    {
        animationInProgress = false;
        stopwatch.Stop();
    }
}

Sonuç olarak Label , bir parmak ile Buttontemas halindeyken yalnızca döndürülür ve parmak serbest bırakıldığında durur:

Bu tür davranışların oyun uygulamaları vardır: Üzerinde tutulan bir Button parmak, ekrandaki bir nesnenin belirli bir yönde hareket etmesini sağlayabilir.

Düğme görünümü

, Button görünümünü etkileyen çeşitli özellikleri devralır veya tanımlar:

TextColormetnin rengidir Button
BackgroundColor bu metnin arka planının rengidir
BorderColor , Button
FontFamily metin için kullanılan yazı tipi ailesidir
FontSize metnin boyutudur
FontAttributes metnin italik mi yoksa kalın mı olduğunu gösterir
BorderWidth kenarlık genişliğidir
CornerRadius köşe yarıçapıdır Button
CharacterSpacing , metnin karakterleri arasındaki aralıktır Button .
TextTransform metnin büyük Button /küçük harflerini belirler.

Not

sınıfında Button ayrıca düzeninin davranışını Buttondenetleen ve Padding özellikleri vardırMargin. Daha fazla bilgi için bkz. Kenar Boşlukları ve Doldurma.

Bu özelliklerden altısının (ve hariçFontFamily) etkileri Düğme Görünümü sayfasında gösterilmiştir.FontAttributes Başka bir özelliği olan Image, düğmesiyle bit eşlemleri kullanma bölümünde ele alınmaktadır.

Düğme Görünümü sayfasındaki tüm görünümler ve veri bağlamaları XAML dosyasında tanımlanır:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ButtonDemos"
             x:Class="ButtonDemos.ButtonAppearancePage"
             Title="Button Appearance">
    <StackLayout>
        <Button x:Name="button"
                Text="Button"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="Center"
                TextColor="{Binding Source={x:Reference textColorPicker},
                                    Path=SelectedItem.Color}"
                BackgroundColor="{Binding Source={x:Reference backgroundColorPicker},
                                          Path=SelectedItem.Color}"
                BorderColor="{Binding Source={x:Reference borderColorPicker},
                                      Path=SelectedItem.Color}" />

        <StackLayout BindingContext="{x:Reference button}"
                     Padding="10">

            <Slider x:Name="fontSizeSlider"
                    Maximum="48"
                    Minimum="1"
                    Value="{Binding FontSize}" />

            <Label Text="{Binding Source={x:Reference fontSizeSlider},
                                  Path=Value,
                                  StringFormat='FontSize = {0:F0}'}"
                   HorizontalTextAlignment="Center" />

            <Slider x:Name="borderWidthSlider"
                    Minimum="-1"
                    Maximum="12"
                    Value="{Binding BorderWidth}" />

            <Label Text="{Binding Source={x:Reference borderWidthSlider},
                                  Path=Value,
                                  StringFormat='BorderWidth = {0:F0}'}"
                   HorizontalTextAlignment="Center" />

            <Slider x:Name="cornerRadiusSlider"
                    Minimum="-1"
                    Maximum="24"
                    Value="{Binding CornerRadius}" />

            <Label Text="{Binding Source={x:Reference cornerRadiusSlider},
                                  Path=Value,
                                  StringFormat='CornerRadius = {0:F0}'}"
                   HorizontalTextAlignment="Center" />

            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <Grid.Resources>
                    <Style TargetType="Label">
                        <Setter Property="VerticalOptions" Value="Center" />
                    </Style>
                </Grid.Resources>

                <Label Text="Text Color:"
                       Grid.Row="0" Grid.Column="0" />

                <Picker x:Name="textColorPicker"
                        ItemsSource="{Binding Source={x:Static local:NamedColor.All}}"
                        ItemDisplayBinding="{Binding FriendlyName}"
                        SelectedIndex="0"
                        Grid.Row="0" Grid.Column="1" />

                <Label Text="Background Color:"
                       Grid.Row="1" Grid.Column="0" />

                <Picker x:Name="backgroundColorPicker"
                        ItemsSource="{Binding Source={x:Static local:NamedColor.All}}"
                        ItemDisplayBinding="{Binding FriendlyName}"
                        SelectedIndex="0"
                        Grid.Row="1" Grid.Column="1" />

                <Label Text="Border Color:"
                       Grid.Row="2" Grid.Column="0" />

                <Picker x:Name="borderColorPicker"
                        ItemsSource="{Binding Source={x:Static local:NamedColor.All}}"
                        ItemDisplayBinding="{Binding FriendlyName}"
                        SelectedIndex="0"
                        Grid.Row="2" Grid.Column="1" />
            </Grid>
        </StackLayout>
    </StackLayout>
</ContentPage>

Button Sayfanın üst kısmındaki öğesinin, sayfanın en altındaki öğelere Picker bağlı üç Color özelliği vardır. Öğelerdeki Picker öğeler, projeye dahil edilen sınıftaki NamedColor renklerdir. Üç Slider öğe, öğesinin FontSize, BorderWidthve CornerRadius özelliklerine Buttoniki yönlü bağlamalar içerir.

Bu program, tüm bu özelliklerin birleşimleriyle deneme yapmanıza olanak tanır:

Kenarlık değerini Button görmek için , dışında Defaultbir BorderColor değere ve BorderWidth pozitif bir değere ayarlamanız gerekir.

iOS'ta, büyük kenarlık genişliklerinin öğesinin içine Button girildiğini ve metnin görüntülenmesini engellediğini fark edeceksiniz. iOS Buttonile kenarlık kullanmayı seçerseniz, büyük olasılıkla görünürlüğünü korumak için özelliği boşluklarla başlayıp sonlandırmak Text istersiniz.

UWP'de, yüksekliğinin Button yarısını aşan bir CornerRadius seçildiğinde özel durum oluşturulur.

Düğme görsel durumları

ButtonPressedVisualState etkin olması koşuluyla, kullanıcı tarafından basıldığında görsel bir değişiklik başlatmak için Button kullanılabilecek bir öğesine sahiptir.

Aşağıdaki XAML örneğinde durum için görsel durumun nasıl tanımlanacağı gösterilmektedir Pressed :

<Button Text="Click me!"
        ...>
    <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>
</Button>

PressedVisualState, tuşuna basıldığında ButtonScale özelliğinin varsayılan değeri olan 1'den 0,8'e değiştirileceğini belirtir. , NormalVisualState normal bir durumda Scale olduğunda Button özelliğinin 1 olarak ayarlandığını belirtir. Bu nedenle, genel etki, tuşuna basıldığında Button biraz daha küçük olacak şekilde yeniden ölçeklendirilir ve serbest bırakıldığında Button varsayılan boyutuna yeniden ölçeklendirilir.

Görsel durumlar hakkında daha fazla bilgi için bkzXamarin.Forms. Visual State Manager.

İki durumlu düğme oluşturma

Kapalı anahtar gibi çalışması için alt sınıfa Button almak mümkündür: Düğmeyi açmak için düğmeye bir kez dokunun ve kapatmak için yeniden dokunun.

Aşağıdaki ToggleButton sınıf öğesinden Button türetilir ve adlı yeni bir olay ve adlı ToggledIsToggledbir Boole özelliği tanımlar. Bunlar, tarafından tanımlanan iki özelliktir Xamarin.FormsSwitch:

class ToggleButton : Button
{
    public event EventHandler<ToggledEventArgs> Toggled;

    public static BindableProperty IsToggledProperty =
        BindableProperty.Create("IsToggled", typeof(bool), typeof(ToggleButton), false,
                                propertyChanged: OnIsToggledChanged);

    public ToggleButton()
    {
        Clicked += (sender, args) => IsToggled ^= true;
    }

    public bool IsToggled
    {
        set { SetValue(IsToggledProperty, value); }
        get { return (bool)GetValue(IsToggledProperty); }
    }

    protected override void OnParentSet()
    {
        base.OnParentSet();
        VisualStateManager.GoToState(this, "ToggledOff");
    }

    static void OnIsToggledChanged(BindableObject bindable, object oldValue, object newValue)
    {
        ToggleButton toggleButton = (ToggleButton)bindable;
        bool isToggled = (bool)newValue;

        // Fire event
        toggleButton.Toggled?.Invoke(toggleButton, new ToggledEventArgs(isToggled));

        // Set the visual state
        VisualStateManager.GoToState(toggleButton, isToggled ? "ToggledOn" : "ToggledOff");
    }
}

Oluşturucu, ToggleButton özelliğin Clicked değerini IsToggled değiştirebilmesi için olaya bir işleyici ekler. OnIsToggledChanged yöntemi olayı tetiklerToggled.

Yönteminin OnIsToggledChanged son satırı statik VisualStateManager.GoToState yöntemi "ToggledOn" ve "ToggledOff" metin dizeleriyle çağırır. Bu yöntem ve uygulamanızın görsel durumlara nasıl yanıt verebildiği hakkında bilgi edinmek için Bkz Xamarin.Forms . Visual State Manager.

ToggleButton çağrısı VisualStateManager.GoToStateyaptığından, sınıfın kendi durumuna göre düğmenin görünümünü değiştirmek için ek olanaklar içermesi IsToggled gerekmez. Bu, öğesini barındıran XAML'nin sorumluluğudur ToggleButton.

Geçiş Düğmesi Tanıtım sayfası, görsel durumuna göre düğmenin ToggleButton, BackgroundColorve TextColor değerlerini ayarlayan TextVisual State Manager işaretlemesi de dahil olmak üzere iki örneğini içerir:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ButtonDemos"
             x:Class="ButtonDemos.ToggleButtonDemoPage"
             Title="Toggle Button Demo">

    <ContentPage.Resources>
        <Style TargetType="local:ToggleButton">
            <Setter Property="VerticalOptions" Value="CenterAndExpand" />
            <Setter Property="HorizontalOptions" Value="Center" />
        </Style>
    </ContentPage.Resources>

    <StackLayout Padding="10, 0">
        <local:ToggleButton Toggled="OnItalicButtonToggled">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup Name="ToggleStates">
                    <VisualState Name="ToggledOff">
                        <VisualState.Setters>
                            <Setter Property="Text" Value="Italic Off" />
                            <Setter Property="BackgroundColor" Value="#C0C0C0" />
                            <Setter Property="TextColor" Value="Black" />
                        </VisualState.Setters>
                    </VisualState>

                    <VisualState Name="ToggledOn">
                        <VisualState.Setters>
                            <Setter Property="Text" Value=" Italic On " />
                            <Setter Property="BackgroundColor" Value="#404040" />
                            <Setter Property="TextColor" Value="White" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </local:ToggleButton>

        <local:ToggleButton Toggled="OnBoldButtonToggled">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup Name="ToggleStates">
                    <VisualState Name="ToggledOff">
                        <VisualState.Setters>
                            <Setter Property="Text" Value="Bold Off" />
                            <Setter Property="BackgroundColor" Value="#C0C0C0" />
                            <Setter Property="TextColor" Value="Black" />
                        </VisualState.Setters>
                    </VisualState>

                    <VisualState Name="ToggledOn">
                        <VisualState.Setters>
                            <Setter Property="Text" Value=" Bold On " />
                            <Setter Property="BackgroundColor" Value="#404040" />
                            <Setter Property="TextColor" Value="White" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </local:ToggleButton>

        <Label x:Name="label"
               Text="Just a little passage of some sample text that can be formatted in italic or boldface by toggling the two buttons."
               FontSize="Large"
               HorizontalTextAlignment="Center"
               VerticalOptions="CenterAndExpand" />

    </StackLayout>
</ContentPage>

Olay Toggled işleyicileri arka planda kod dosyasındadır. Düğmelerin FontAttributes durumuna göre özelliğini Label ayarlamak onların sorumluluğundadır:

public partial class ToggleButtonDemoPage : ContentPage
{
    public ToggleButtonDemoPage ()
    {
        InitializeComponent ();
    }

    void OnItalicButtonToggled(object sender, ToggledEventArgs args)
    {
        if (args.Value)
        {
            label.FontAttributes |= FontAttributes.Italic;
        }
        else
        {
            label.FontAttributes &= ~FontAttributes.Italic;
        }
    }

    void OnBoldButtonToggled(object sender, ToggledEventArgs args)
    {
        if (args.Value)
        {
            label.FontAttributes |= FontAttributes.Bold;
        }
        else
        {
            label.FontAttributes &= ~FontAttributes.Bold;
        }
    }
}

iOS, Android ve UWP üzerinde çalışan program şu şekildedir:

Bit eşlemleri düğmelerle kullanma

sınıfı, Button üzerinde Buttontek başına veya metinle birlikte bir bit eşlem görüntüsü görüntülemenizi sağlayan bir ImageSource özellik tanımlar. Ayrıca, metin ve resmin nasıl düzenleneceğini de belirtebilirsiniz.

ImageSource özelliği türündedirImageSource; bu da bit eşlemlerin bir dosyadan, eklenmiş kaynaktan, URI'den veya akıştan yüklenebileceği anlamına gelir.

Not

Bir Button animasyonlu GIF'i yükleyebilir ancak gif'in yalnızca ilk karesini görüntüler.

tarafından Xamarin.Forms desteklenen her platform, uygulamanın üzerinde çalışabileceği çeşitli cihazların farklı piksel çözünürlükleri için görüntülerin birden çok boyutta depolanmasını sağlar. Bu birden çok bit eşlem, işletim sisteminin cihazın video görüntü çözünürlüğü için en iyi eşleşmeyi seçebileceği şekilde adlandırılır veya depolanır.

üzerindeki bit Buttoneşlem için en iyi boyut, ne kadar büyük olmasını istediğinize bağlı olarak genellikle cihazdan bağımsız 32 ile 64 birim arasındadır. Bu örnekte kullanılan görüntüler 48 cihazdan bağımsız birim boyutuna dayanır.

iOS projesinde Resources klasörü bu görüntünün üç boyutunu içerir:

/Resources/MonkeyFace.png olarak depolanan 48 piksel kare bit eşlem
/Resource/ olarak depolanan 96 piksel kare bit eşlemMonkeyFace@2x.png
/Resource/ olarak depolanan 144 piksel kare bit eşlemMonkeyFace@3x.png

Üç bit eşlem de BundleResource Derleme Eylemine verildi.

Android projesi için bit eşlemlerin tümü aynı ada sahiptir, ancak Resources klasörünün farklı alt klasörlerinde depolanır:

/Resources/drawable-hdpi/MonkeyFace.png olarak depolanan 72 piksel kare bit eşlem
/Resources/drawable-xhdpi/MonkeyFace.png olarak depolanan 96 piksel kare bit eşlem
/Resources/drawable-xxhdpi/MonkeyFace.png olarak depolanan 144 piksel kare bit eşlem
/Resources/drawable-xxxhdpi/MonkeyFace.png olarak depolanan 192 piksel kare bit eşlem

Bunlara AndroidResource Derleme Eylemiverildi.

UWP projesinde bit eşlemler projenin herhangi bir yerinde depolanabilir, ancak bunlar genellikle özel bir klasörde veya Var olan Varlıklar klasöründe depolanır. UWP projesi şu bit eşlemleri içerir:

/Assets/MonkeyFace.scale-100.png olarak depolanan 48 piksel kare bit eşlem
/Assets/MonkeyFace.scale-200.png olarak depolanan 96 piksel kare bit eşlem
/Assets/MonkeyFace.scale-400.png olarak depolanan 192 piksel kare bit eşlem

Hepsine İçerik Derleme Eylemiverildi.

özelliğini Buttonkullanarak ContentLayout ve ImageSource özelliklerinin üzerinde Button nasıl Text düzenleneceğini belirtebilirsiniz. Bu özellik, içinde eklenmiş bir sınıf Buttonolan türündedirButtonContentLayout. Oluşturucunun iki bağımsız değişkeni vardır:

Numaralandırmanın ImagePosition bir üyesi: Left, Top, Rightveya Bottom bit eşleminin metne göre nasıl göründüğünü gösterir.
double Bit eşlem ile metin arasındaki aralığın değeri.

Varsayılan değerler ve 10 birimdir Left . adlı Position öğesinin ButtonContentLayout salt okunur iki özelliğidir ve Spacing bu özelliklerin değerlerini sağlar.

Kodda, bir Button oluşturabilir ve özelliğini şu şekilde ayarlayabilirsiniz ContentLayout :

Button button = new Button
{
    Text = "button text",
    ImageSource = new FileImageSource
    {
        File = "image filename"
    },
    ContentLayout = new Button.ButtonContentLayout(Button.ButtonContentLayout.ImagePosition.Right, 20)
};

XAML'de yalnızca numaralandırma üyesini veya aralığı ya da her ikisini virgülle ayrılmış herhangi bir sırada belirtmeniz gerekir:

<Button Text="button text"
        ImageSource="image filename"
        ContentLayout="Right, 20" />

Görüntü Düğmesi Tanıtım sayfası, iOS, Android ve UWP bit eşlem dosyaları için farklı dosya adları belirtmek için kullanırOnPlatform. Her platform için aynı dosya adını kullanmak ve kullanmaktan OnPlatformkaçınmak istiyorsanız UWP bit eşlemlerini projenin kök dizininde depolamanız gerekir.

Görüntü Düğmesi Tanıtım sayfasındaki ilk Buttonsayfa özelliği ayarlar ancak özelliği ayarlamaz TextImage:

<Button>
    <Button.ImageSource>
        <OnPlatform x:TypeArguments="ImageSource">
            <On Platform="iOS, Android" Value="MonkeyFace.png" />
            <On Platform="UWP" Value="Assets/MonkeyFace.png" />
        </OnPlatform>
    </Button.ImageSource>
</Button>

UWP bit eşlemleri projenin kök dizininde depolanıyorsa, bu işaretleme önemli ölçüde basitleştirilmiş olabilir:

<Button ImageSource="MonkeyFace.png" />

ImageButtonDemo.xaml dosyasında çok fazla yinelemeli işaretlemeyi önlemek için, özelliğini ayarlamak ImageSource için örtük Style bir de tanımlanır. Bu Style , diğer Button beş öğeye otomatik olarak uygulanır. XAML dosyasının tamamı aşağıdadır:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ButtonDemos.ImageButtonDemoPage">

    <FlexLayout Direction="Column"
                JustifyContent="SpaceEvenly"
                AlignItems="Center">

        <FlexLayout.Resources>
            <Style TargetType="Button">
                <Setter Property="ImageSource">
                    <OnPlatform x:TypeArguments="ImageSource">
                        <On Platform="iOS, Android" Value="MonkeyFace.png" />
                        <On Platform="UWP" Value="Assets/MonkeyFace.png" />
                    </OnPlatform>
                </Setter>
            </Style>
        </FlexLayout.Resources>

        <Button>
            <Button.ImageSource>
                <OnPlatform x:TypeArguments="ImageSource">
                    <On Platform="iOS, Android" Value="MonkeyFace.png" />
                    <On Platform="UWP" Value="Assets/MonkeyFace.png" />
                </OnPlatform>
            </Button.ImageSource>
        </Button>

        <Button Text="Default" />

        <Button Text="Left - 10"
                ContentLayout="Left, 10" />

        <Button Text="Top - 10"
                ContentLayout="Top, 10" />

        <Button Text="Right - 20"
                ContentLayout="Right, 20" />

        <Button Text="Bottom - 20"
                ContentLayout="Bottom, 20" />
    </FlexLayout>
</ContentPage>

Son dört Button öğe, metin ve bit eşlem konumunu ve aralığını belirtmek için özelliğini kullanır ContentLayout :

Şimdi olayları işlemenin Button ve görünümü değiştirmenin Button çeşitli yollarını gördünüz.

Düğme API'si

Aracılığıyla paylaş

Xamarin.Forms Düğme

düğme tıklamalarını işleme

Kodda düğme oluşturma

Düğmeyi devre dışı bırakma

Komut arabirimini kullanma

Düğmeye basma ve bırakma

Düğme görünümü

Düğme görsel durumları

İki durumlu düğme oluşturma

Bit eşlemleri düğmelerle kullanma

Ek kaynaklar

Aracılığıyla paylaş

Xamarin.Forms Düğme

düğme tıklamalarını işleme

Kodda düğme oluşturma

Düğmeyi devre dışı bırakma

Komut arabirimini kullanma

Düğmeye basma ve bırakma

Düğme görünümü

Düğme görsel durumları

İki durumlu düğme oluşturma

Bit eşlemleri düğmelerle kullanma

İlgili bağlantılar

Ek kaynaklar