Xamarin.Forms Bu

Makale
12/02/2021
Okumak için 16 dakika

Düğme, uygulamayı belirli bir görevi yürütmek için yönlendiren bir dokunarak veya tıklamasına yanıt verir.

, Button Tümünde en temel etkileşimli denetimdir Xamarin.Forms . ButtonGenellikle bir komutu gösteren kısa bir metin dizesi görüntüler, ancak bir bit eşlem görüntüsünü veya metin ve görüntü birleşimini de gösterebilir. Kullanıcı Button bir parmakla ister bir parmağınızla ister bir fareyle tıkladığından bu komutu başlatabilir.

Aşağıda ele alınan konuların çoğu, Buttondemoları örneğindeki sayfalara karşılık gelir.

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

ButtonClickedKullanıcı Button bir parmak ya da fare işaretçisi ile dokunduğunda tetiklenen bir olay tanımlar. Bu olay, parmak veya fare düğmesi ' ın yüzeyinden bırakıldığında tetiklenir Button . ButtonXamarin_Forms Button _VisualElement_IsEnabled "Data-LinkType =" Absolute-path ">IsEnabled özelliğinin true dokunmasına yanıt vermesi için ayarlanmış olması gerekir.

Buttondemoları örneğinde temel düğme tıklama sayfası XAML içinde bir örneğini oluşturma ve olayını işleme işlemlerinin nasıl yapılacağını gösterir . Basicbuttonclickpage. xaml dosyası hem a hem de içeren bir içerir LabelButton :

<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>

ButtonBunun için izin verilen tüm alanı kaplayamaz. Örneğin, özelliğini dışında bir öğesine ayarlamazsanız, HorizontalOptions üst öğesinin ButtonFillButton tam genişliğini kaplayacaktır.

Varsayılan olarak, Button dikdörtgen olur ancak ButtonCornerRadius bölüm aşağıda açıklandığı gibi Xamarin_Forms _Button_CornerRadius "Data-linktype =" Absolute-path ">özelliğini kullanarak yuvarlatılmış köşeler sağlayabilirsiniz.

Xamarin_Forms _Button_Text "Data-LinkType =" Absolute-path ">Text özelliği içinde görüntülenen metni belirtir Button . ClickedOlay adlı bir olay işleyicisine ayarlanır OnButtonClicked . Bu işleyici arka plan 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. senderBağımsız değişkeni Button Bu olaydan sorumlu nesnedir. Bu Button nesneyi nesnesine erişmek veya Button aynı olayı paylaşan birden çok nesne arasında ayrım yapmak için kullanabilirsiniz Clicked .

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

Temel düğme temel tıklayın

OnButtonClickedasync Olay işleyicisi içinde kullanıldığı için yönteminin değiştiricisini içerdiğine dikkat edin await . ClickedOlay işleyicisi async yalnızca işleyicinin gövdesi kullanıyorsa değiştirici gerektirir await .

Her platform, Button kendi belirli bir biçimde işler. Düğme görünümü bölümünde, renkleri ayarlamayı ve kenarlığı daha özelleştirilmiş görünümler için görünür hale getirme hakkında bilgi edineceksiniz. Button, IFontElement Xamarin_Forms Button _Button_FontFamily "Data-LinkType =" mutlak yol ">FontFamily , Xamarin_Forms IFontElement _Button_FontSize" Data-linktype = "absolute-path" >FontSize ve Xamarin_Forms _Button_FontAttributes "Data-LinkType =" Absolute-Path FontAttributes ">özelliklerini içerir.

Kodda düğme oluşturma

XAML 'de bir örneğini oluşturmak yaygındır Button , ancak Button kod içinde de oluşturabilirsiniz. Bu, uygulamanızın bir döngüyle sıralanabilir verileri temel alan birden çok düğme oluşturması gerektiğinde kullanışlı olabilir foreach .

Kod düğmesi ' ne tıklayın sayfasında, temel düğmeye tıklama sayfasına, ancak tamamen C# ' ta denk olan bir sayfa oluşturmayı 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 ifade uzunluğunda olduğundan olaya çok basit bir şekilde eklenebilir:

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

Kuşkusuz, olay işleyicisini ayrı bir yöntem olarak da tanımlayabilir ( OnButtonClickOnButtonClickyöntemi gibi) ve bu yöntemi olaya ekleyebilirsiniz:

button.Clicked += OnButtonClicked;

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

Bazen bir uygulama belirli bir durumda, belirli bir Button tıklama geçerli bir işlem değildir. Bu durumlarda, Button özelliği olarak ayarlanarak devre dışı bırakılmalıdır IsEnabledfalse . Klasik örnek, Entry dosya açma ile birlikte bir dosya adı için bir denetimdir Button : Button yalnızca bir metin içine yazılmışsa etkinleştirilmelidir Entry . DataTriggerBu görev için, DataTrigger makalesinde gösterildiği gibi kullanabilirsiniz.

Komut arabirimini kullanma

Bir uygulamanın Button olayı işlemeye gerek kalmadan dokunmasına yanıt vermesi mümkündür Clicked . , ButtonButton veya komutlama arabirimi olarak adlandırılan alternatif bir bildirim mekanizması uygular. Bu iki özelliklerden oluşur:

Xamarin_Forms _Button_Command "Data-LinkType =" Absolute-path ">CommandICommand ad alanında tanımlanan bir arabirim türü System.Windows.Input .
Xamarin_Forms _Button_CommandParameter "Data-LinkType =" Absolute-path " CommandParameter türünde >özellik Object .

Bu yaklaşım özellikle veri bağlama ile bağlantı için ve özellikle Model-View-ViewModel (MVVM) mimarisi uygularken uygundur. Bu konular, makaleler veri bağlamasında, VERI bağlamalarından MVVM 'yeve MVVM'ye ele alınmıştır.

Bir MVVM uygulamasında ViewModel, ICommand daha sonra veri bağlamaları Ile xaml öğelerine bağlı olan türün özelliklerini tanımlar Button . Xamarin.Forms Ayrıca CommandCommand<T> , arabirimini uygulayan ve ICommand türünün özelliklerinin tanımlanmasında ViewModel 'e yardımcı olan sınıfları tanımlar ICommand .

Komutlama, komut arabirimi makalesinde daha ayrıntılı olarak açıklanmıştır, ancak buttondemoları örneğindeki temel düğme komut sayfası temel yaklaşımı gösterir.

CommandDemoViewModelSınıfı, adlı türü bir özelliği doubleNumber ve ICommand ve adında iki özelliği MultiplyBy2Command tanımlayan çok basit bir ViewModel DivideBy2Command .

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 iki nesne ile başlatılır Command . CommandOluşturucular, execute özelliği Double ya da haleden bir çok işlevi (Oluşturucu bağımsız değişkeni olarak adlandırılır) içerir Number .

Basicbuttoncommand. xaml dosyası bir örneğine ayarlanır CommandDemoViewModel . LabelÖğesi ve iki öğesi Button içindeki üç özelliğe bağlamalar içerir CommandDemoViewModel :

<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 öğe dokunduğunda, komutlar yürütülür ve sayı değişiklik değeri:

İşleyiciler üzerinde bu yaklaşımın avantajı, Clicked bu sayfanın işlevselliğiyle ilgili tüm mantığın arka plan kod dosyası yerine, iş mantığından daha iyi bir ayrım elde etmasıdır.

CommandNesneleri, öğelerin etkinleştirilmesini ve devre dışı bırakılmasını denetlemek için de mümkündür Button . Örneğin, sayı değerlerini 2^ila 2^{– 10}arasında sınırlandırmak istediğinizi varsayalım. ' Nin etkinleştirilmesi gerekiyorsa döndüren oluşturucuya (bağımsız değişken olarak adlandırılır) başka bir işlev ekleyebilirsiniz canExecutetrueButton . Oluşturucunun değişikliği aşağıda verilmiştir 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 yapılan çağrılar, yönteminin yöntemi ChangeCanExecuteCommandCommand çağırabilmesi canExecute ve devre dışı bırakılıp bırakılmadığını belirleyebilmesi için gereklidir Button . Bu kod değişikliği ile, sayı sınıra ulaştığında Button devre dışı bırakılır:

İki veya daha fazla Button öğenin aynı özelliğe bağlanması mümkündür ICommand . ButtonÖğeler, Xamarin_Forms Button _Button_CommandParameter "Data-LinkType =" Absolute-path ">CommandParameter özelliği kullanılarak ayırt edilebilir Button . Bu durumda, genel sınıfını kullanmak isteyeceksiniz Command<T> . CommandParameterNesne daha sonra ve yöntemlerine bir bağımsız değişken olarak geçirilir executecanExecute . Bu teknik, komut arabirimi makalesinin temel komut veren bölümünde ayrıntılı olarak gösterilmiştir.

Buttondemoları örneği, bu tekniği sınıfında de kullanır . MainPage. xaml dosyası, Örneğin her bir sayfası için bir 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 birinin ButtonCommand özelliği adlı bir özelliğe bağımlıdır ve bu, NavigateCommandCommandParameterType projedeki sayfa sınıflarından birine karşılık gelen bir nesne olarak ayarlanır.

Bu NavigateCommand özellik türündedir ICommand ve arka plan 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, NavigateCommandCommand<Type>TypeCommandParameter xaml dosyasında ayarlanmış nesnenin türü olduğundan, özelliği bir nesnesine başlatır. Bu, execute yönteminin Type Bu nesneye karşılık gelen türünde bir bağımsız değişkeni olduğu anlamına gelir CommandParameter . İşlevi sayfayı başlatır ve sonra bu sayfaya gider.

Oluşturucunun kendi kendine ayarlanarak sonuçlandığına dikkat edin BindingContext . Bu, XAML dosyasındaki özellikler için özelliği bağlamak üzere gereklidir NavigateCommand .

Düğmeye basma ve serbest bırakma

Button öğesi, Clicked olayının yanı sıra Pressed ve Released olaylarını da tanımlar. PressedOlay, bir parmak üzerine bastığında Button ya da işaretçi üzerine yerleştirilmiş fare düğmesine basıldığında meydana gelir Button . Bu Released olay, parmak veya fare düğmesi serbest bırakıldığında gerçekleşir. Genellikle olay Clicked ile aynı anda bir olay da tetiklenir Released , ancak parmak ya da fare işaretçisi Button serbest bırakılmadan önce ' ın yüzeyinden uzaklaşmışsa, Clicked olay gerçekleşmeyebilir.

PressedVe Released olayları genellikle kullanılmaz, ancak Pressed sayfasında gösterildiği gibi özel amaçlar için kullanılabilirler. XAML dosyası LabelButton ve olayları için iliştirilmiş bir ve içeren işleyicileri içerir PressedReleased :

<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 plan kod dosyası Label bir olay gerçekleştiğinde bunu hareketlendirir Pressed , ancak bir olay gerçekleştiğinde döndürmeyi askıya alır Released :

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ç, Label tek bir parmak ile iletişim kururken Button ve parmak serbest bırakıldığında durdurulduğunda sona erer:

Bu tür bir davranışın oyunları için uygulamalar vardır: bir parmak izi, Button ekranda bir nesne belirli bir yönde hareket edebilir.

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

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

_Button_TextColor "Data-LinkType =" Absolute-path ">TextColor metnin rengidir Button
Xamarin_Forms _VisualElement_BackgroundColor "Data-LinkType =" Absolute-path ">BackgroundColor , metnin arka planının renggidir
Xamarin_Forms _Button_BorderColor "Data-LinkType =" Absolute-path ">BorderColor çevreleyen bir alanın rengiButton
Xamarin_Forms _Button_FontFamily" data-linktype="absolute-path">metin için kullanılan FontFamily yazı tipi ailesidir
Xamarin_Forms _Button_FontSize" data-linktype="absolute-path">, FontSize metnin boyutudur
Xamarin_Forms _Button_FontAttributes" data-linktype="absolute-path">metnin FontAttributes italik mi yoksa kalın mı olduğunu gösterir
Xamarin_Forms _Button_BorderWidth" data-linktype="absolute-path">BorderWidth kenarlığı genişliğidir
Xamarin_Forms _Button_CornerRadius" data-linktype="absolute-path">, CornerRadiusButton
Xamarin_Forms _Button_CharacterSpacing" data-linktype="absolute-path">, metnin karakterleri CharacterSpacing arasındaki Button aralıktır.
TextTransform metnin büyük/büyük/büyük/sonlarını Button belirler.

Not

Sınıf Button ayrıca Xamarin_Forms Button _View_Margin" data-linktype="absolute-path">ve Margin Xamarin_Forms _Button_Padding" data-linktype="absolute-path">PaddingButton özelliklerini içerir. Daha fazla bilgi için bkz. Kenar Boşlukları ve Doldurma.

Bu özelliklerin altının etkileri (ve FontFamilyFontAttributes hariç) Düğme Görünümü FontFamily görüntülenir. "data-linktype=" Xamarin_Forms _Button_ImageSource"absolute-path">) başka bir özellik, düğmeyle bit eşlemleri kullanma Image bölümünde ele Image

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>

Sayfanın Button üst kısmında, sayfanın en altındaki Color öğelere bağlı üç özelliği Picker vardır. Öğelerdeki Picker öğeler, projeye dahil edilen NamedColor sınıftan renklerdir. Üç Slider öğe, , ve özelliklerine FontSize iki yol içeren BorderWidthCornerRadius bağlamalar Button içerir.

Bu program, tüm bu özelliklerin birleşimlerini denemeniz için size olanak sağlar:

Kenarlığı görmek için , dışında bir değere ve değerini de pozitif ButtonBorderColorDefaultBorderWidth değere ayarlay gerekir.

iOS'ta, büyük kenarlık genişliklerinin iç ekranına izinsiz olarak ekli olduğunu ve metnin görüntülenmeye Button engel olduğunu fark vardır. iOS ile kenarlık kullanmayı seçerseniz, görünürlüğünü korumak için özelliği boşluklarla başlatarak ButtonText sona erersiniz.

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

Düğme görsel durumları

Button, etkin olması şartıyla kullanıcı tarafından basıldığında üzerinde bir görsel değişikliği başlatmak PressedVisualStateButton için kullanılmaktadır.

Aşağıdaki XAML örneği, durum için görsel durum tanımlamayı Pressed gösterir:

<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 basıldığında, Xamarin_Forms ButtonPressed _VisualElement_Scale" data-linktype="absolute-path">özelliğinin varsayılan değeri olan Scale 1'den 0,8'e değiştir olacağını belirtir. NormalVisualState , normal bir Button durumda olduğunda özelliğinin Scale 1 olarak ayar olacağını belirtir. Bu nedenle, genel etki, basıldığında biraz daha küçük olacak şekilde yeniden ölçeklendirmenin ve serbest bırakıldığında varsayılan boyutuna yeniden ButtonButton ölçeklendirmenin olmasıdır.

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

Geçiş düğmesi oluşturma

Kapalı anahtar gibi çalışması için alt sınıf kullanabilirsiniz: Düğmeye bir kez dokunarak düğmeyi açıp tekrar dokunarak Button kapatabilirsiniz.

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

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 değerini Clicked değiştiresin diye bir işleyiciyi olayına IsToggled iliştirer. OnIsToggledChangedyöntemi olayı Toggled sıyaklar.

Yönteminin son satırı OnIsToggledChanged statik yöntemi VisualStateManager.GoToState "ToggledOn" ve "ToggledOff" metin dizeleriyle birlikte çağırır. Bu yöntem hakkında bilgi ve makalesinde, uygulamanın görsel durumlara nasıl yanıt ver olduğunu The Xamarin.Forms Visual State Manager okuyabilirsiniz.

çağrısında olduğundan, sınıfın durumunu temel alarak düğmenin görünümünü değiştirmek için ek özellikler ToggleButtonVisualStateManager.GoToState içermesi IsToggled gerek yoktur. Bu, barındıran XAML'nin ToggleButton sorumluluğundadır.

DüğmeYi Değiştir Tanıtım sayfası, düğmenin , ve değerlerini görsel durumuna göre ayaran Visual State Manager işaretlemesi de dahil olmak üzere iki örneği TextBackgroundColorTextColor 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 arkasındaki kod dosyasındadır. özelliğini düğmelerin FontAttributes durumuna Label göre ayarlamadan sorumludur:

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'de çalışan program şu şekildedir:

Düğmelerle bit eşlemleri kullanma

sınıfı, üzerinde tek başına Xamarin_Forms _Button_Image metinle birlikte bit eşlem görüntüsü görüntülemeye olanak sağlayan bir Xamarin_Forms ButtonButton _Button_Image" data-linktype="absolute-path">ImageSourceButton özelliğini tanımlar. Ayrıca metnin ve görüntünün nasıl düzen olduğunu da belirtebilirsiniz.

özelliği ImageSource türündedir ImageSource ve bit eşlemler bir dosyadan, katıştırılmış kaynaktan, URI'den veya akıştan yüklenebilir.

Not

bir Button animasyonlu GIF'i yükleyene kadar, yalnızca GIF'in ilk çerçevesini görüntüler.

tarafından desteklenen her platform, görüntülerin uygulamanın üzerinde çalıştır olabileceği çeşitli cihazların Xamarin.Forms farklı piksel çözünürlükleri için birden çok boyutta depolandığına olanak tanır. Bu birden çok bit eşlem, işletim sisteminin cihazın video ekran çözünürlüğü için en iyi eşleşmeyi seçecek şekilde adlandırılmış veya depolanmış.

Üzerinde bit eşlem için en iyi boyut, ne kadar büyük olması istediğinize bağlı olarak genellikle 32 ile 64 cihazdan bağımsız Button birim arasında olur. Bu örnekte kullanılan görüntüler, cihazdan bağımsız 48 birim boyutuna göre kullanılmaktadır.

iOS projesinde Kaynaklar klasöründe bu görüntünün üç boyutu bulunur:

/Resources/MonkeyFace.png olarak depolanan 48 piksellik bir bit eşlem MonkeyFace.png
/Resource/ olarak depolanan 96 piksellik bir bit eşlem
/Resource/ olarak depolanan 144 piksellik bir bit eşlem

Üç bit eşlem için de BundleResourcederleme eylemi verildi.

Android projesi için bit eşlemlerin hepsi aynı adla aynıdır, ancak Kaynaklar klasörünün farklı alt klasörlerde depolanır:

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

Bunlara AndroidResource derlemeeylemi verilmiştir.

UWP projesinde bit eşlemler projenin herhangi bir yerinde depolanmış olabilir, ancak bunlar genellikle özel bir klasörde veya Assets mevcut klasöründe depolanır. UWP projesi şu bit eşlemleri içerir:

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

Bunların hepsine bir İçerik Derleme Eylemiverildi.

Xamarin_Forms TextImageSourceButtonText _Button_ContentLayout" data-linktype="absolute-path">özelliğini kullanarak ContentLayout ve özelliklerinin üzerinde nasıl düzen >Button belirtebilirsiniz. Bu özellik, içinde ButtonContentLayout katıştırılmış bir sınıf olan türündedir. Button oluşturucus Xamarin_Forms _Button_ButtonContentLayout__ctor_ Xamarin_Forms _Button_ButtonContentLayout_ImagePosition_System_Double_" data-linktype="absolute-path"> bağımsız değişkeni vardır:

Numaralamanın ImagePosition bir üyesi: , , veya bit LeftTopRightBottom eşlem öğesinin metne göre nasıl göründüğüne işaret ediyor.
Bit double eşlem ile metin arasındaki boşluk için bir değer.

Varsayılan değerler ve Left 10 birimdir. ButtonContentLayoutXamarin_Forms ButtonContentLayout _Button_ButtonContentLayout_Position" data-linktype="absolute-path">ve Position Xamarin_Forms _Button_ButtonContentLayout_Spacing" data-linktype="absolute-path">Spacing adlı iki salt okunur özellik bu özelliklerin değerlerini sağlar.

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

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 numaralama üyesini veya aralığı ya da her ikisini virgülle ayırarak 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ını belirtmek için kullanır. Her platform için aynı dosya adını kullanmak ve kullanımını önlemek için UWP bit eşlemlerini projenin kök dizininde OnPlatform depolamanız gerekir.

Görüntü Button Düğmesi Tanıtım Button özelliğini Image ayarlar ancak özelliğini Text ayarlar:

<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 sayıda yeniden işaretlemeyi önlemek için, özelliğini ayarlamak için bir örtülü de ImageSource tanımlanır. Bu, Style diğer beş öğeye otomatik olarak Button uygulanır. Tam XAML dosyası şu şekildedir:

<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, metni ve bit ContentLayout eşlem öğesinin konumunu ve aralığını belirtmek için özelliğini kullanır:

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