Button Control In Universal Apps

Button control is the most classic control that many developers and users are aware of. It mainly executes a command once it is clicked.

Here's how it looks like:

Here's how to declare it in XAML:

<Button x:Name="button" Content="Click Me!" HorizontalAlignment="Left" Margin="70,98,0,0" VerticalAlignment="Top"/>

Buttons have Click event for doing some work when clicked. Here's how we declared it in our sample:

<Button x:Name="button" Content="Click Me!" Width="80" Height="32" Click="button_Click"/>

public async void ShowMessage(string message)
{
   var msg = new Windows.UI.Popups.MessageDialog(message);
   msg.DefaultCommandIndex = 1;
   await msg.ShowAsync();
}

private void button_Click(object sender, RoutedEventArgs e)
{
   ShowMessage("Hello World");
}

Buttons also have some properties you need to be aware of.

ClickMode

This property helps you choose from 3 types of Click once you set: Release, Press and Hover.

Release click event executes after you clicked but not ended mouseclick or tapping.

Press click event executes same time you click a Button control.

Hover executes immediately when you get your mouse icon on the button or tap it. Thinking of touch screens, Hover click isn't for them.

 

Here's an example of using Press ClickMode:

<Button x:Name="button" Content="Click Me!" ClickMode="Press"/>

RequestedTheme:

 

Let's say you decided to use Light Theme for your app. All the other controls inherit that option and use the same theme of your app.
But you can manually change Button's Theme using this property.

Here's an example,

Light Theme

<Button x:Name="button" Content="Click Me!" RequestedTheme="Light"/>

Dark Theme

<Button x:Name="button" Content="Click Me!" RequestedTheme="Dark"/>

Default Theme(Inherit)

<Button x:Name="button" Content="Click Me!" HorizontalAlignment="Left" Margin="70,98,0,0" VerticalAlignment="Top" AllowDrop="True" ClickMode="Press" RequestedTheme="Default"/>

BorderThickness

You can also set how thick a Button can be.

Here's an example with Thickness set"0": 

<Button x:Name="button" Content="Click Me!" BorderThickness="0" Width="80" Height="32"/>

Buttons are the best way to get interacted with user as it is used in many apps to do some background task.