UWP 프로그램 실행 시에 랜덤 이미지 보여주기

프로그램을 실행했을 시에 초기화면으로 보여주고 싶은 그림 중 임의의 그림 하나를 화면에 전시하려고 한다. 매번 똑같은 이미지가 아닌 확률에 의한 이미지 전시기능이다.

 

 

 

<MainPage.xaml>

• 이미지를 전시할 프레임을 만들고 높이 및 너비 등을 설정한다.

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

    <Grid>
        <Frame Background="Azure" Grid.Row="1" x:Name="frame" Margin="10,10,10,10" HorizontalAlignment="Center"
                          VerticalAlignment="Center" Width="1550" Height="940">
            
        </Frame>
    </Grid>
</Page>

 

 

<MainPage.xaml.cs>

• 프로그램 시작 시에 랜덤 하게 이미지를 띄울 페이지(RandomPicturePage)를 불러오는 코드 구문을 작성한다.

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// 빈 페이지 항목 템플릿에 대한 설명은 https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x412에 나와 있습니다.

namespace RandomPicture
{
    /// <summary>
    /// 자체적으로 사용하거나 프레임 내에서 탐색할 수 있는 빈 페이지입니다.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            frame.Navigate(typeof(RandomPicturePage));
        }
    }
}

 

 

<RandomPicturePage.xaml>

• 랜덤으로 보여줄 이미지 추가 : [솔루션 탐색기] > [프로젝트] 마우스 오른쪽 클릭 > [추가] > [기존 항목]에서 4개의 이미지 추가한다.
• StackPanel에 각 이미지를 추가하고, x:Name 네이밍 및 Visibility="Collapsed"으로 설정한다.

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

    <Grid>
        <ScrollViewer x:Name="DetailsContent">
            <StackPanel>
                <Image x:Name="picture1" Height="900" Source="/Assets/puppies.jpg"  VerticalAlignment="Top" HorizontalAlignment="Center" Margin="16" Visibility="Collapsed"/>
                <Image x:Name="picture2" Height="900" Source="/Assets/cats.jpg"  VerticalAlignment="Top" HorizontalAlignment="Center" Margin="16" Visibility="Collapsed"/>
                <Image x:Name="picture3" Height="900" Source="/Assets/rabbits.jpg"  VerticalAlignment="Top" HorizontalAlignment="Center" Margin="16" Visibility="Collapsed"/>
                <Image x:Name="picture4" Height="900" Source="/Assets/hamsters.jpg"  VerticalAlignment="Top" HorizontalAlignment="Center" Margin="16" Visibility="Collapsed"/>
            </StackPanel>
        </ScrollViewer>
    </Grid>
</Page>

 

 

<RandomPicturePage.xaml.cs>

• 임의의 숫자를 발생시켜 그림의 개수로 나눈 나머지 값을 이용하여 특정 이미지 속성 Visibility를 Visible로 설정한다.

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.Security.Cryptography;

// 빈 페이지 항목 템플릿에 대한 설명은 https://go.microsoft.com/fwlink/?LinkId=234238에 나와 있습니다.

namespace RandomPicture
{
    /// <summary>
    /// 자체적으로 사용하거나 프레임 내에서 탐색할 수 있는 빈 페이지입니다.
    /// </summary>
    public sealed partial class RandomPicturePage : Page
    {
        public RandomPicturePage()
        {
            this.InitializeComponent();

            uint random = CryptographicBuffer.GenerateRandomNumber();
            if (random % 4 == 0)
            {
                picture1.Visibility = Visibility.Visible;
            }
            else if (random % 4 == 1)
            {
                picture2.Visibility = Visibility.Visible;
            }
            else if (random % 4 == 2)
            {
                picture3.Visibility = Visibility.Visible;
            }
            else if (random % 4 == 3)
            {
                picture4.Visibility = Visibility.Visible;
            }
            else { }
        }
    }
}