본문 바로가기
프로그래밍/UWP | WPF

[UWP] ContentDialog 이용하여 Popup Box 만들기

by 남생 namsaeng 2022. 8. 11.
반응형
  • [프로젝트] > [추가] > [새 항목] > [Visual C#] > [콘텐츠 대화 상자] 선택
  • ContentDialog에서 제공하는 PrimaryButton 및 SecondaryButton을 이용하는 것이 아닌 사용자가 만든 버튼으로 화면을 구성할 것이다.

 

https://namsaenga.tistory.com/95

 

[UWP] Button pressed 효과 만들기

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

namsaenga.tistory.com

 


 

<App.xaml>

<Application
    x:Class="TestProject3.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestProject">
    <Application.Resources>
        <x:Double x:Key="ContentDialogMaxWidth">900</x:Double>
        <x:Double x:Key="ContentDialogMaxHeight">756</x:Double>
    </Application.Resources>
</Application>

 

 

<MainPage.xaml.cs>

namespace TestProject3
{
    public sealed partial class MainPage : Page
    {
      
        public MainPage()
        {
            this.InitializeComponent();
           
        }


        private void yes_button_Click(object sender, RoutedEventArgs e)
        {
            NamDialog namDialog = new NamDialog();
            var result = namDialog.ShowAsync();
        }

        private void no_button_Click(object sender, RoutedEventArgs e)
        {
            Windows.UI.Xaml.Application.Current.Exit();
        }
    }
}

 

<MainPage.xaml>

<Page
    x:Class="TestProject3.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="Beige">

    <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="Hello Rabbit World!" FontSize="110" VerticalAlignment="Center" Foreground="Magenta" HorizontalAlignment="Center"/>
        </Border>
        <Border Grid.Row="1" Grid.ColumnSpan="3">
            <TextBlock Text="Do you want to see a cute rabbit?" FontSize="80" VerticalAlignment="Center" Foreground="DarkOrange" HorizontalAlignment="Center"/>
        </Border>
        <Border Grid.Row="2" Grid.ColumnSpan="3">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Border Grid.Column="0">
                    <Button x:Name ="yes_button"  Background="DarkBlue" VerticalAlignment="Center" HorizontalAlignment="Center" BorderBrush="LightYellow" BorderThickness="20" Height="200" Width="330" FontSize="50" FontWeight="Bold" Click="yes_button_Click">
                        <TextBlock xml:space="preserve" Foreground="White">Yes</TextBlock>
                    </Button>
                </Border>
                <Border Grid.Column="1">
                    <Button x:Name ="no_button"  Background="DarkRed" VerticalAlignment="Center" HorizontalAlignment="Center" BorderBrush="LightYellow" BorderThickness="20" Height="200" Width="330" FontSize="50" FontWeight="Bold" Click="no_button_Click">
                        <TextBlock xml:space="preserve" Foreground="White">No</TextBlock>
                    </Button>
                </Border>
            </Grid>
        </Border>
    </Grid>
</Page>

 

 

<NamDialog.xaml.cs>

namespace TestProject3
{
    public sealed partial class NamDialog : ContentDialog
    {
        public NamDialog()
        {
            this.InitializeComponent();
        }
        private void Stop_Yes_Click(object sender, RoutedEventArgs e)
        {
            this.Hide();
        }
    }
}

 

 

<NamDialog.xaml>

<ContentDialog
    x:Class="TestProject3.NamDialog"
    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"
    >

    <Grid Width="800" Height="500">
        <Grid.Background>
            <ImageBrush Stretch="Fill" ImageSource="Assets/rabbit.JPG"/>
        </Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="1.4*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        
        <Border Grid.Row="0" Grid.ColumnSpan="3">
            <TextBlock Text="Hi Rabbit~ :D" FontSize="40" HorizontalAlignment="Center"/>
        </Border>
        <Border Grid.Row="1" Grid.ColumnSpan="3">
            <TextBlock Text="Would you stop looking at the cute rabbit?" FontSize="35" Foreground="Aqua" HorizontalAlignment="Center"/>
        </Border>
        <Border Grid.Row="2" Grid.ColumnSpan="3">
            <Grid>
                <Border>
                    <Button Content="Yes ;(" x:Name="Stop_Yes" FontSize="40" HorizontalAlignment="Center" Height="100" Width="150" Click="Stop_Yes_Click"/>
                </Border>
                
            </Grid>
        </Border>
    </Grid>
</ContentDialog>

 

 

 

UWP Popup Box based ContentDialog
UWP Popup Box based ContentDialog

 

 

반응형

댓글