Кнопка Xamarin.FormsXamarin.Forms Button

Загрузить образец загрузить примерDownload Sample Download the sample

Кнопки реагирует на касание или щелчок, который направляет приложению выполнения определенной задачи.The Button responds to a tap or click that directs an application to carry out a particular task.

Button Является наиболее фундаментальным интерактивного управления во всех Xamarin.Forms.The Button is the most fundamental interactive control in all of Xamarin.Forms. Button Обычно отображает, короткая строка текста, показывающее, команды, но его также можно отобразить растровое изображение, или сочетание текста и изображения.The Button usually displays a short text string indicating a command, but it can also display a bitmap image, or a combination of text and an image. Пользователь нажимает клавишу Button пальцем или щелкает его с помощью мыши для запуска этой команды.The user presses the Button with a finger or clicks it with a mouse to initiate that command.

Большинство разделов, о котором рассказывается ниже соответствует страниц в ButtonDemos образца.Most of the topics discussed below correspond to pages in the ButtonDemos sample.

Обработка кнопки "нажимает кнопкуHandling button clicks

Button Определяет Clicked событие, возникающее, когда пользователь касается Button с указателем мыши или палец.Button defines a Clicked event that is fired when the user taps the Button with a finger or mouse pointer. Событие при отжатии кнопки мыши или палец поверхности от Button.The event is fired when the finger or mouse button is released from the surface of the Button. Button Должен иметь его IsEnabled свойство значение true для того, чтобы реагировать на них касания.The Button must have its IsEnabled property set to true for it to respond to taps.

Основные нажатия кнопки странице в ButtonDemos образце показано, как создать экземпляр Button в XAML и обработки его Clicked событий.The Basic Button Click page in the ButtonDemos sample demonstrates how to instantiate a Button in XAML and handle its Clicked event. BasicButtonClickPage.xaml файл содержит StackLayout с обоими Label и Button:The BasicButtonClickPage.xaml file contains a StackLayout with both a Label and a Button:

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

Button Обычно занимают все пространство, разрешенное для него.The Button tends to occupy all the space that's allowed for it. Например, если вы не задали HorizontalOptions свойство Button на что-то отличное от Fill, Button займет всю ширину его родительского.For example, if you don't set the HorizontalOptions property of Button to something other than Fill, the Button will occupy the full width of its parent.

По умолчанию Button представляет собой прямоугольник, но можно дать углы округленное ИТ с помощью CornerRadius свойства, как описано ниже в разделе внешний вид кнопки .By default, the Button is rectangular, but you can give it rounded corners by using the CornerRadius property, as described below in the section Button appearance.

Text Свойство определяет текст, отображаемый в Button.The Text property specifies the text that appears in the Button. Clicked Событий присваивается обработчик событий с именем OnButtonClicked.The Clicked event is set to an event handler named OnButtonClicked. Этот обработчик находится в файле кода BasicButtonClickPage.xaml.cs:This handler is located in the code-behind file, BasicButtonClickPage.xaml.cs:

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

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

Когда Button шифрованию, OnButtonClicked выполнения метода.When the Button is tapped, the OnButtonClicked method executes. sender Аргумент Button объекта, ответственного за это событие.The sender argument is the Button object responsible for this event. Это можно использовать для доступа к Button объекта, или чтобы различать несколько Button объектов с одинаковым Clicked событий.You can use this to access the Button object, or to distinguish between multiple Button objects sharing the same Clicked event.

Данный конкретный Clicked обработчик вызывает функцию, анимации, который вращается Label 360 градусов в 1000 миллисекунд.This particular Clicked handler calls an animation function that rotates the Label 360 degrees in 1000 milliseconds. Вот ее запуск на устройствах iOS и Android и как приложение универсальной платформы Windows (UWP) на рабочем столе Windows 10.Here's the program running on iOS and Android devices, and as a Universal Windows Platform (UWP) application on the Windows 10 desktop:

Нажатие кнопки основныеBasic Button Click

Обратите внимание, что OnButtonClicked метод включает async модификатор поскольку await используется в обработчике событий.Notice that the OnButtonClicked method includes the async modifier because await is used within the event handler. Объект Clicked обработчика событий требует async модификатор только в том случае, если в теле обработчика используется await.A Clicked event handler requires the async modifier only if the body of the handler uses await.

Выполняет визуализацию каждой платформы Button в свой собственный особым образом.Each platform renders the Button in its own specific manner. В внешний вид кнопки разделе будет показано, как задать цвета и сделать Button видимые для более функциональный внешний вид границы.In the Button appearance section, you'll see how to set colors and make the Button border visible for more customized appearances. Button реализует IFontElement интерфейс, включив в него FontFamily , FontSize , и FontAttributes свойства.Button implements the IFontElement interface, so it includes FontFamily, FontSize, and FontAttributes properties.

Создание кнопки в кодеCreating a button in code

Обычно для создания экземпляра Button в XAML, но вы также можете создать Button в коде.It's common to instantiate a Button in XAML, but you can also create a Button in code. Это может быть удобным, если приложению требуется создать несколько кнопок, на основе данных, который является перечислимым с foreach цикла.This might be convenient when your application needs to create multiple buttons based on data that is enumerable with a foreach loop.

Нажатия кнопки код странице показано, как создать страницу, которая является функциональным эквивалентом основные нажатия кнопки страницы, но полностью в C#:The Code Button Click page demonstrates how to create a page that is functionally equivalent to the Basic Button Click page but entirely in C#:

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

Все, что делается в конструктор класса.Everything is done in the class's constructor. Так как Clicked обработчик является только одна инструкция длинное, его можно будет присоединить к событию очень просто:Because the Clicked handler is only one statement long, it can be attached to the event very simply:

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

Конечно, можно также определить обработчик событий как отдельный метод (так же, как OnButtonClick метод в основные нажатия кнопки) и присоединить этот метод к событию:Of course, you can also define the event handler as a separate method (just like the OnButtonClick method in Basic Button Click) and attach that method to the event:

button.Clicked += OnButtonClicked;

Отключение кнопкиDisabling the button

Иногда приложение находится в определенном состоянии, там, где определенный Button щелкните не является допустимой операцией.Sometimes an application is in a particular state where a particular Button click is not a valid operation. В таком случае Button следует отключить, задав его IsEnabled свойства false.In those cases, the Button should be disabled by setting its IsEnabled property to false. Классическим примером является Entry управления для имени файла с открывающей файл Button: Button Должно быть включено только в том случае, если какой-либо текст, набранный в Entry.The classic example is an Entry control for a filename accompanied by a file-open Button: The Button should be enabled only if some text has been typed into the Entry. Можно использовать DataTrigger для этой задачи, как показано в триггеры данных статьи.You can use a DataTrigger for this task, as shown in the Data Triggers article.

С помощью интерфейса команднойUsing the command interface

Существует возможность приложения реагировать на Button касания без обработки Clicked событий.It is possible for an application to respond to Button taps without handling the Clicked event. Button Реализует механизм альтернативную вызывается команда или команды интерфейс.The Button implements an alternative notification mechanism called the command or commanding interface. Он состоит из двух свойств:This consists of two properties:

Этот подход особенно удобен в связи с привязкой к данным и особенно в том случае, если реализация архитектуры Model-View-ViewModel (MVVM).This approach is particularly suitable in connection with data-binding, and particularly when implementing the Model-View-ViewModel (MVVM) architecture. В этих разделах рассматриваются в статьях привязки данных, из привязки данных до MVVM, и MVVM.These topics are discussed in the articles Data Binding, From Data Bindings to MVVM, and MVVM.

В приложении MVVM ViewModel определяет свойства типа ICommand , которые затем подключены к XAML Button элементов при помощи привязки данных.In an MVVM application, the ViewModel defines properties of type ICommand that are then connected to the XAML Button elements with data bindings. Xamarin.Forms также определяет Command и Command<T> классы, реализующие ICommand интерфейс, а также упрощения ViewModel определения свойств типа ICommand.Xamarin.Forms also defines Command and Command<T> classes that implement the ICommand interface and assist the ViewModel in defining properties of type ICommand.

Система команд описан более подробно в статье интерфейс командной , но базовая команда кнопку странице в ButtonDemos пример основной подход.Commanding is described in greater detail in the article The Command Interface but the Basic Button Command page in the ButtonDemos sample shows the basic approach.

CommandDemoViewModel Класс является очень простой ViewModel, который определяет свойство типа double с именем Numberи два свойства типа ICommand с именем MultiplyBy2Command и DivideBy2Command:The CommandDemoViewModel class is a very simple ViewModel that defines a property of type double named Number, and two properties of type ICommand named MultiplyBy2Command and 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; }
}

Два ICommand свойства инициализируются в конструктор класса с двумя объектами типа Command.The two ICommand properties are initialized in the class's constructor with two objects of type Command. Command Конструкторы включать немного функцию (вызывается execute аргумент конструктора), удваивается или уменьшению Number свойство.The Command constructors include a little function (called the execute constructor argument) that either doubles or halves the Number property.

BasicButtonCommand.xaml файле задает его BindingContext к экземпляру CommandDemoViewModel.The BasicButtonCommand.xaml file sets its BindingContext to an instance of CommandDemoViewModel. Label Элемент и два Button элементы содержат привязки в три свойства CommandDemoViewModel:The Label element and two Button elements contain bindings to the three properties in 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>

Как два Button нажатые элементов, выполняются команды, и номер изменяет значение:As the two Button elements are tapped, the commands are executed, and the number changes value:

Команда основных кнопокBasic Button Command

Преимущество этого подхода перед использованием Clicked обработчики —, что вся логика, включающих функциональные возможности этой страницы находится в ViewModel, а не в файл с выделенным кодом достижение лучшее разделение пользовательского интерфейса от бизнес-логики.The advantage of this approach over Clicked handlers is that all the logic involving the functionality of this page is located in the ViewModel rather than the code-behind file, achieving a better separation of the user interface from the business logic.

Существует также возможность Command объектов для управления, включение и отключение Button элементов.It is also possible for the Command objects to control the enabling and disabling of the Button elements. Например, предположим, вы хотите ограничить диапазон числовых значений между 210 и 2–10.For example, suppose you want to limit the range of number values between 210 and 2–10. Можно добавить другую функцию в конструктор (вызывается canExecute аргумента), возвращающий true Если Button должен быть включен.You can add another function to the constructor (called the canExecute argument) that returns true if the Button should be enabled. Вот изменение, CommandDemoViewModel конструктор:Here's the modification to the CommandDemoViewModel constructor:

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));
    }
    ···
}

Вызовы ChangeCanExecute метод Command необходимы, чтобы Command можно вызвать метод canExecute метод и определить ли Button должен быть включен или отключен.The calls to the ChangeCanExecute method of Command are necessary so that the Command method can call the canExecute method and determine whether the Button should be disabled or not. Благодаря этому изменению кода как номер достигает предельного размера, Button отключен:With this code change, as the number reaches the limit, the Button is disabled:

Команда основных кнопок — ИзменитьBasic Button Command - Modified

Это возможно в двух или более Button элементы для привязки к тому же ICommand свойство.It is possible for two or more Button elements to be bound to the same ICommand property. Button Можно различать элементы с помощью CommandParameter свойство Button.The Button elements can be distinguished using the CommandParameter property of Button. В этом случае необходимо использовать универсальный Command<T> класса.In this case, you'll want to use the generic Command<T> class. CommandParameter Объект затем передается как аргумент execute и canExecute методы.The CommandParameter object is then passed as an argument to the execute and canExecute methods. Эта методика показана подробно основные команды раздел интерфейс командной статьи.This technique is shown in detail in the Basic Commanding section of the Command Interface article.

ButtonDemos пример также использует эту методику в его MainPage класса.The ButtonDemos sample also uses this technique in its MainPage class. MainPage.xaml файл содержит Button для каждой страницы примера:The MainPage.xaml file contains a Button for each page of the sample:

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

Каждый Button имеет его Command свойство привязано к свойству с именем NavigateCommandи CommandParameter присваивается Type объект, соответствующий одному из классов страницы в проекте.Each Button has its Command property bound to a property named NavigateCommand, and the CommandParameter is set to a Type object corresponding to one of the page classes in the project.

Что NavigateCommand свойство имеет тип ICommand и определен в файле с выделенным кодом:That NavigateCommand property is of type ICommand and is defined in the code-behind file:

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

Конструктор инициализирует NavigateCommand свойства Command<Type> объекта, так как Type — это тип CommandParameter объекта заданы в файле XAML.The constructor initializes the NavigateCommand property to a Command<Type> object because Type is the type of the CommandParameter object set in the XAML file. Это означает, что execute метод имеет аргумент типа Type , соответствующий этому CommandParameter объекта.This means that the execute method has an argument of type Type that corresponds to this CommandParameter object. Функция создает экземпляр страницы и затем переходит к нему.The function instantiates the page and then navigates to it.

Обратите внимание, что конструктор завершает, задав его BindingContext на самого себя.Notice that the constructor concludes by setting its BindingContext to itself. Это необходимо для свойств в файле XAML для привязки к NavigateCommand свойство.This is necessary for properties in the XAML file to bind to the NavigateCommand property.

Нажатие и отпускание кнопкиPressing and releasing the button

Помимо Clicked событий, Button также определяет Pressed и Released события.Besides the Clicked event, Button also defines Pressed and Released events. Pressed Событие возникает при нажатии палец Button, или нажатии кнопки мыши с помощью указателя за пределы Button.The Pressed event occurs when a finger presses on a Button, or a mouse button is pressed with the pointer positioned over the Button. Released Событие возникает при отпускании кнопки мыши или палец.The Released event occurs when the finger or mouse button is released. Как правило Clicked событие также инициируется в то же время, как Released события, но если указатель мыши или палец слайды от поверхности Button до освобождения, Clicked событие может не произойти.Generally, a Clicked event is also fired at the same time as the Released event, but if the finger or mouse pointer slides away from the surface of the Button before being released, the Clicked event might not occur.

Pressed И Released часто не используются события, но они могут использоваться для особых целей, как показано в нажмите и отпустите кнопку страницы.The Pressed and Released events are not often used, but they can be used for special purposes, as demonstrated in the Press and Release Button page. Файл XAML содержит Label и Button с обработчики, вложенные для Pressed и Released события:The XAML file contains a Label and a Button with handlers attached for the Pressed and Released events:

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

Файл с выделенным кодом анимирует Label при Pressed событие происходит, но приостанавливает поворот при Released событием:The code-behind file animates the Label when a Pressed event occurs, but suspends the rotation when a Released event occurs:

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();
    }
}

В результате Label поворачивает при находится контакты с Buttonи останавливается при выпуске пальца:The result is that the Label only rotates while a finger is in contact with the Button, and stops when the finger is released:

Нажмите и отпустите кнопкуPress and Release Button

Такое поведение имеет приложений для игр: Палец пройдет Button может придать объекту на экране переместить в определенном направлении.This kind of behavior has applications for games: A finger held on a Button might make an on screen object move in a particular direction.

Внешний вид кнопкиButton appearance

Button Наследует или определяет несколько свойств, которые влияют на его внешний вид:The Button inherits or defines several properties that affect its appearance:

  • TextColor цвет Button текстаTextColor is the color of the Button text
  • BackgroundColor цвет фона для текстаBackgroundColor is the color of the background to that text
  • BorderColor цвет области, окружающей ButtonBorderColor is the color of an area surrounding the Button
  • FontFamily Семейство шрифтов, используемых для текстаFontFamily is the font family used for the text
  • FontSize размер текстаFontSize is the size of the text
  • FontAttributes Указывает, является ли текст курсивом или полужирным шрифтомFontAttributes indicates if the text is italic or bold
  • BorderWidth Ширина границыBorderWidth is the width of the border
  • CornerRadius — Это радиус скругления углов ButtonCornerRadius is the corner radius of the Button

Примечание

Button Класс также имеет Margin и Padding свойства, которые управляют поведением макета Button.The Button class also has Margin and Padding properties that control the layout behavior of the Button. Дополнительные сведения см. в разделе поля и заполнение.For more information, see Margin and Padding.

Последствия шесть из этих свойств (за исключением FontFamily и FontAttributes) показаны в внешний вид кнопки страницы.The effects of six of these properties (excluding FontFamily and FontAttributes) are demonstrated in the Button Appearance page. Еще одно свойство, Image , рассматривается в разделе с помощью точечных рисунков с кнопкой.Another property, Image, is discussed in the section Using bitmaps with button.

Все представления и данные привязки в внешний вид кнопки страницы определены в файле XAML:All of the views and data bindings in the Button Appearance page are defined in the XAML file:

<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 В верхней части страницы имеет трех ее Color свойства привязаны к Picker элементы в нижней части страницы.The Button at the top of the page has its three Color properties bound to Picker elements at the bottom of the page. Элементы в Picker элементы являются цветов из NamedColor классов, включенных в проект.The items in the Picker elements are colors from the NamedColor class included in the project. Три Slider элементы содержат имеют двухсторонние привязки к FontSize, BorderWidth, и CornerRadius свойства Button.Three Slider elements contain two-way bindings to the FontSize, BorderWidth, and CornerRadius properties of the Button.

Эта программа позволяет экспериментировать с различными комбинациями все эти свойства:This program allows you to experiment with combinations of all these properties:

Внешний вид кнопкиButton Appearance

Чтобы увидеть Button границы, вам потребуется задать BorderColor на что-то отличное от Defaultи BorderWidth положительное значение.To see the Button border, you'll need to set a BorderColor to something other than Default, and the BorderWidth to a positive value.

В iOS, вы заметите, что ширина большой границы вторгаться в внутреннюю часть Button , влияют на отображение текста.On iOS, you'll notice that large border widths intrude into the interior of the Button and interfere with the display of text. Если вы решили использовать элемент border с iOS Button, вы, вероятно, захотите начинаются и заканчиваются Text свойство с пробелами, чтобы сохранить его видимость.If you choose to use a border with an iOS Button, you'll probably want to begin and end the Text property with spaces to retain its visibility.

На UWP выбрав CornerRadius , превышает половину высоты Button приводит к появлению исключения.On UWP, selecting a CornerRadius that exceeds half the height of the Button raises an exception.

Визуальные состояния кнопкиButton visual states

Button имеет Pressed VisualState , можно использовать для запуска Визуальное изменение в Button при нажатии пользователем, в условии, что он включен.Button has a Pressed VisualState that can be used to initiate a visual change to the Button when pressed by the user, provided that it's enabled.

В следующем примере XAML показано, как определить визуальное состояние для Pressed состояния:The following XAML example shows how to define a visual state for the Pressed state:

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

Pressed VisualState Указывает, что при Button нажата, его Scale свойства изменяется от его значение по умолчанию 1 к 0,8.The Pressed VisualState specifies that when the Button is pressed, its Scale property will be changed from its default value of 1 to 0.8. Normal VisualState Указывает, что при Button находится в обычном состоянии, его Scale будет установлено значение 1.The Normal VisualState specifies that when the Button is in a normal state, its Scale property will be set to 1. Таким образом, общий эффект том, что при Button является нажата, она масштабируется повторно немного меньше, и когда Button является выпуска, она масштабируется повторно размер по умолчанию.Therefore, the overall effect is that when the Button is pressed, it's rescaled to be slightly smaller, and when the Button is released, it's rescaled to its default size.

Дополнительные сведения о визуальных состояниях см. в разделе Xamarin.Forms Диспетчер визуальных состояний.For more information about visual states, see The Xamarin.Forms Visual State Manager.

Создание кнопку-переключательCreating a toggle button

Можно создать подкласс Button таким образом, чтобы он работает как параметр включения или выключения: Коснитесь кнопки один раз для выключатель на и коснитесь его еще раз, чтобы отключить данную функцию.It is possible to subclass Button so that it works like an on-off switch: Tap the button once to toggle the button on and tap it again to toggle it off.

Следующие ToggleButton класс является производным от Button и определяет новое событие, именуемое Toggled и логическое свойство с именем IsToggled.The following ToggleButton class derives from Button and defines a new event named Toggled and a Boolean property named IsToggled. Это те же два свойства, определяемые Xamarin.Forms Switch :These are the same two properties defined by the Xamarin.Forms Switch:

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");
    }
}

ToggleButton Конструктор присоединяет обработчик к Clicked событий, так что он может изменить значение IsToggled свойства.The ToggleButton constructor attaches a handler to the Clicked event so that it can change the value of the IsToggled property. OnIsToggledChanged Вызывается метод Toggled событий.The OnIsToggledChanged method fires the Toggled event.

В последней строке OnIsToggledChanged метод вызывает статический VisualStateManager.GoToState метод с двумя текст строки «ToggledOn» и «ToggledOff».The last line of the OnIsToggledChanged method calls the static VisualStateManager.GoToState method with the two text strings "ToggledOn" and "ToggledOff". Читайте о этот метод и реакцию приложения на визуальные состояния, в этой статье Xamarin.Forms Диспетчер визуальных состояний.You can read about this method and how your application can respond to visual states in the article The Xamarin.Forms Visual State Manager.

Так как ToggleButton , вызывающих VisualStateManager.GoToState, сам класс не должен включать все дополнительные функции, чтобы изменить внешний вид кнопки, на основе его IsToggled состояния.Because ToggleButton makes the call to VisualStateManager.GoToState, the class itself doesn't need to include any additional facilities to change the button's appearance based on its IsToggled state. То есть ответственность за XAML, на котором размещена ToggleButton.That is the responsibility of the XAML that hosts the ToggleButton.

Демонстрация кнопки переключателя страница содержит два экземпляра ToggleButton, включая разметку Диспетчер визуальных состояний, который задает Text, BackgroundColor, и TextColor основании визуальное состояние кнопки:The Toggle Button Demo page contains two instances of ToggleButton, including Visual State Manager markup that sets the Text, BackgroundColor, and TextColor of the button based on the visual state:

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

Toggled Обработчики событий находятся в файле кода.The Toggled event handlers are in the code-behind file. Они отвечают за параметр FontAttributes свойство Label на основе состояния кнопок:They are responsible for setting the FontAttributes property of the Label based on the state of the buttons:

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 и UWP.Here's the program running on iOS, Android, and the UWP:

Переключить Демонстрация кнопкиToggle Button Demo

С помощью точечных рисунков с кнопкамиUsing bitmaps with buttons

Button Класс определяет ImageSource свойство, которое позволяет отображать растровое изображение на Button, отдельно или в сочетании с текстом.The Button class defines an ImageSource property that allows you to display a bitmap image on the Button, either alone or in combination with text. Можно также указать расположение изображения и текста.You can also specify how the text and image are arranged.

ImageSource Свойство имеет тип ImageSource , что означает, что точечные рисунки могут быть загружены из файла, внедренного ресурса, URI или потока.The ImageSource property is of type ImageSource, which means that the bitmaps can be loaded from a file, embedded resource, URI, or stream.

Каждой платформы, поддерживаемых Xamarin.Forms позволяет образов для сохранения в несколько размеров для различных разрешением различных устройств, которые приложение может работать на.Each platform supported by Xamarin.Forms allows images to be stored in multiple sizes for different pixel resolutions of the various devices that the application might run on. Эти несколько точечные рисунки имеют с именем или хранятся таким образом, что операционной системы можно выбрать наиболее подходящий для видео устройство разрешением экрана.These multiple bitmaps are named or stored in such a way that the operating system can pick the best match for the device's video display resolution.

Для изображения на Button, наилучший размер обычно между 32- и 64 аппаратно независимых единицах, в зависимости от размера вам хотелось бы быть.For a bitmap on a Button, the best size is usually between 32 and 64 device-independent units, depending on how large you want it to be. Образы, используемые в этом примере основаны на размером 48 аппаратно независимых единицах.The images used in this example are based on a size of 48 device-independent units.

В проекте iOS ресурсы папка содержит три размера этого изображения:In the iOS project, the Resources folder contains three sizes of this image:

  • Хранятся в виде квадрата точечный рисунок 48 пикселей /Resources/MonkeyFace.pngA 48-pixel square bitmap stored as /Resources/MonkeyFace.png
  • Хранятся в виде квадрата точечный рисунок 96 пикселей /Resource/MonkeyFace@2x.pngA 96-pixel square bitmap stored as /Resource/MonkeyFace@2x.png
  • Хранятся в виде квадрата точечный рисунок 144 пикселей /Resource/MonkeyFace@3x.pngA 144-pixel square bitmap stored as /Resource/MonkeyFace@3x.png

Все три битовые карты были переданы действие при построении из BundleResource.All three bitmaps were given a Build Action of BundleResource.

Для проекта Android, все точечные рисунки имеют одинаковые имена, но они хранятся в различных подпапках ресурсы папку:For the Android project, the bitmaps all have the same name, but they are stored in different subfolders of the Resources folder:

  • Хранятся в виде квадрата точечный рисунок 72 пикселя /Resources/drawable-hdpi/MonkeyFace.pngA 72-pixel square bitmap stored as /Resources/drawable-hdpi/MonkeyFace.png
  • Хранятся в виде квадрата точечный рисунок 96 пикселей /Resources/drawable-xhdpi/MonkeyFace.pngA 96-pixel square bitmap stored as /Resources/drawable-xhdpi/MonkeyFace.png
  • 144-square точек хранятся в виде /Resources/drawable-xxhdpi/MonkeyFace.pngA 144-pixel square bitmap stored as /Resources/drawable-xxhdpi/MonkeyFace.png
  • 192-square точек хранятся в виде /Resources/drawable-xxxhdpi/MonkeyFace.pngA 192-pixel square bitmap stored as /Resources/drawable-xxxhdpi/MonkeyFace.png

Они были переданы действие при построении из AndroidResource.These were given a Build Action of AndroidResource.

В проекте UWP, растровые изображения можно хранить в любом месте проекта, но обычно они хранятся в пользовательской папке или активы существующую папку.In the UWP project, bitmaps can be stored anywhere in the project, but they are generally stored in a custom folder or the Assets existing folder. Проект универсальной платформы Windows содержит эти точечные рисунки:The UWP project contains these bitmaps:

  • Хранятся в виде квадрата точечный рисунок 48 пикселей /Assets/MonkeyFace.scale-100.pngA 48-pixel square bitmap stored as /Assets/MonkeyFace.scale-100.png
  • Хранятся в виде квадрата точечный рисунок 96 пикселей /Assets/MonkeyFace.scale-200.pngA 96-pixel square bitmap stored as /Assets/MonkeyFace.scale-200.png
  • 192-square точек хранятся в виде /Assets/MonkeyFace.scale-400.pngA 192-pixel square bitmap stored as /Assets/MonkeyFace.scale-400.png

Все они были переданы действие при построении из содержимого.They were all given a Build Action of Content.

Можно указать как Text и ImageSource свойства, располагаются на Button с помощью ContentLayout свойство Button.You can specify how the Text and ImageSource properties are arranged on the Button using the ContentLayout property of Button. Это свойство имеет тип ButtonContentLayout , который является классом, внедренные в Button.This property is of type ButtonContentLayout, which is an embedded class in Button. Конструктор имеет два аргумента:The constructor has two arguments:

  • Является членом ImagePosition перечисления: Left, Top, Right, или Bottom , указывающее, как растровое изображение отображается относительно текста.A member of the ImagePosition enumeration: Left, Top, Right, or Bottom indicating how the bitmap appears relative to the text.
  • Объект double интервалы между точечный рисунок и текст.A double value for the spacing between the bitmap and the text.

По умолчанию используются Left и 10 единиц.The defaults are Left and 10 units. Два свойства только для чтения из ButtonContentLayout с именем Position и Spacing предоставить значения этих свойств.Two read-only properties of ButtonContentLayout named Position and Spacing provide the values of those properties.

В коде, можно создать Button и задайте ContentLayout свойства следующим образом:In code, you can create a Button and set the ContentLayout property like this:

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

В XAML вы должны указать только члена перечисления или интервалы или в любом порядке через запятую:In XAML, you need specify only the enumeration member, or the spacing, or both in any order separated by commas:

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

Демонстрация изображение кнопки странице использует OnPlatform для указания различных имен файлов, для iOS, Android и универсальной платформы Windows файлы точечных рисунков.The Image Button Demo page uses OnPlatform to specify different filenames for the iOS, Android, and UWP bitmap files. Если вы хотите использовать это имя для каждой платформы и избегайте использования OnPlatform, вам потребуется для хранения растровых изображений универсальной платформы Windows в корневом каталоге проекта.If you want to use the same filename for each platform and avoid the use of OnPlatform, you'll need to store the UWP bitmaps in the root directory of the project.

Первый Button на Демонстрация изображение кнопки странице наборы Image свойство, но не Text свойство:The first Button on the Image Button Demo page sets the Image property but not the Text property:

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

Если точечные рисунки универсальной платформы Windows хранятся в корневом каталоге проекта, можно значительно упростить эту разметку:If the UWP bitmaps are stored in the root directory of the project, this markup can be considerably simplified:

<Button ImageSource="MonkeyFace.png" />

Чтобы избежать много повторяющихся разметки в ImageButtonDemo.xaml файл, неявным Style также определяется для задания ImageSource свойство.To avoid a lot of repetitious markup in the ImageButtonDemo.xaml file, an implicit Style is also defined to set the ImageSource property. Это Style автоматически применяется к пяти других Button элементов.This Style is automatically applied to five other Button elements. Ниже приведен полный файл XAML.Here's the complete XAML file:

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

Окончательный четыре Button элементы сделать использование ContentLayout свойство, чтобы указать положение и расстояние между текстом и точечный рисунок:The final four Button elements make use of the ContentLayout property to specify a position and spacing of the text and bitmap:

Изображение Демонстрация кнопкиImage Button Demo

Теперь вы знаете о вариантах, которые можно обрабатывать Button события и изменение Button внешний вид.You've now seen the various ways that you can handle Button events and change the Button appearance.