[UWP] Button pressed 효과 만들기

• UWP에서 기본으로 제공하는 RadioButton은 버튼이 눌렸는 지를 확인할 수 있다.
• 사용자가 만든 일반 버튼은 버튼의 효과를 resource로 만들고 버튼의 상태도 따로 프로그램 상에서 기억하는 방식으로 pressed 효과를 적용할 수 있다.

 

 

<MainPage.xaml.cs>

namespace TestProject2
{
    public sealed partial class MainPage : Page
    {
        private bool button1_pressed;
        private bool button2_pressed;

        public MainPage()
        {
            this.InitializeComponent();
            button1_pressed = false;
            button2_pressed = false;
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            if (button1_pressed == false)
            {
                this.button1.Background = (SolidColorBrush)Resources["button1_pressed_color"];
                button1_pressed = true;
            }
            else if (button1_pressed == true)
            {
                this.button1.Background = (SolidColorBrush)Resources["button1_idle_color"];
                button1_pressed = false;
            }
        }

        private void button2_Click(object sender, RoutedEventArgs e)
        {
            if (button2_pressed == false)
            {
                this.button2.Background = (SolidColorBrush)Resources["button2_pressed_color"];
                button2_pressed = true;
            }
            else if (button2_pressed == true)
            {
                this.button2.Background = (SolidColorBrush)Resources["button2_idle_color"];
                button2_pressed = false;
            }
        }
    }
}

 

<MainPage.xaml>

<Page
    x:Class="TestProject2.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestProject"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Page.Resources>
        <SolidColorBrush x:Key="button1_idle_color" Color="DarkBlue"/>
        <SolidColorBrush x:Key="button1_pressed_color" Color="Blue" />
        <SolidColorBrush x:Key="button2_idle_color" Color="DarkRed"/>
        <SolidColorBrush x:Key="button2_pressed_color" Color="Red" />
    </Page.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Border Grid.Row="0" Grid.ColumnSpan="3">
            <TextBlock Text="UWP Button Pressed Effect" FontSize="100" VerticalAlignment="Center" Foreground="DarkBlue" HorizontalAlignment="Center"/>
        </Border>
        <Border Grid.Row="1" Grid.ColumnSpan="3">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Border Grid.Column="0" Grid.ColumnSpan="3">
                    <TextBlock Text="Idle Status" FontSize="100" VerticalAlignment="Center" Foreground="DarkGreen" HorizontalAlignment="Center"/>
                </Border>
                <Border Grid.Column="3" Grid.ColumnSpan="3">
                    <TextBlock Text="Pressed Status" FontSize="100" VerticalAlignment="Center" Foreground="DarkOrange" HorizontalAlignment="Center"/>
                </Border>
            </Grid>
        </Border>
        <Border Grid.Row="2" Grid.ColumnSpan="3">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Border Grid.Column="0">
                    <Button x:Name ="button1"  Background="DarkCyan" VerticalAlignment="Center" HorizontalAlignment="Center" BorderBrush="LightYellow" BorderThickness="20" Height="200" Width="330" FontSize="50" FontWeight="Bold" Click="button1_Click">
                        <TextBlock xml:space="preserve" Foreground="White">Click me!</TextBlock>
                    </Button>
                </Border>
                <Border Grid.Column="1">
                    <Button x:Name ="button2"  Background="DarkCyan" VerticalAlignment="Center" HorizontalAlignment="Center" BorderBrush="LightYellow" BorderThickness="20" Height="200" Width="650" FontSize="50" FontWeight="Bold" Click="button2_Click">
                        <TextBlock xml:space="preserve" Foreground="White">This button is clicked!</TextBlock>
                    </Button>
                </Border>
            </Grid>
        </Border>
    </Grid>
</Page>

 

 

UWP button pressed effect