LAYOUT Archives - 9 중 6 번째 페이지

[C#/WINUI2.5] GridView 엘리먼트 : ItemTemplate 속성 사용하기

■ GridView 엘리먼트의 ItemTemplate 속성을 사용하는 방법을 보여준다. ▶ CustomItem.cs


using System;
using System.Collections.Generic;

namespace TestProject
{
    /// <summary>
    /// 커스텀 항목
    /// </summary>
    public class CustomItem
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 제목 - Title

        /// <summary>
        /// 제목
        /// </summary>
        public string Title { get; set; }

        #endregion
        #region 이미지 위치 - ImageLocation

        /// <summary>
        /// 이미지 위치
        /// </summary>
        public string ImageLocation { get; set; }

        #endregion
        #region 조회 수 - Views

        /// <summary>
        /// 조회 수
        /// </summary>
        public string Views { get; set; }

        #endregion
        #region 좋아요 - Likes

        /// <summary>
        /// 좋아요
        /// </summary>
        public string Likes { get; set; }

        #endregion
        #region 설명 - Description

        /// <summary>
        /// 설명
        /// </summary>
        public string Description { get; set; }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - CustomItem()

        /// <summary>
        /// 생성자
        /// </summary>
        public CustomItem()
        {
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Static
        //////////////////////////////////////////////////////////////////////////////// Public

        #region 리스트 구하기 - GetList()

        /// <summary>
        /// 리스트 구하기
        /// </summary>
        /// <returns>리스트</returns>
        public static List<CustomItem> GetList()
        {
            string[] textArray = new[]
            {
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit. " +
                "Integer id facilisis lectus. "                             +
                "Cras nec convallis ante, quis pulvinar tellus. "           +
                "Integer dictum accumsan pulvinar. "                        +
                "Pellentesque eget enim sodales sapien vestibulum consequat.",
                "Nullam eget mattis metus. Donec pharetra, tellus in mattis tincidunt, magna ipsum gravida nibh, vitae lobortis ante odio vel quam.",
                "Quisque accumsan pretium ligula in faucibus. "                             +
                "Mauris sollicitudin augue vitae lorem cursus condimentum quis ac mauris. " +
                "Pellentesque quis turpis non nunc pretium sagittis. "                      +
                "Nulla facilisi. "                                                          +
                "Maecenas eu lectus ante. "                                                 +
                "Proin eleifend vel lectus non tincidunt. "                                 +
                "Fusce condimentum luctus nisi, in elementum ante tincidunt nec.",
                "Aenean in nisl at elit venenatis blandit ut vitae lectus. "                  +
                "Praesent in sollicitudin nunc. "                                             +
                "Pellentesque justo augue, pretium at sem lacinia, scelerisque semper erat. " +
                "Ut cursus tortor at metus lacinia dapibus.",
                "Ut consequat magna luctus justo egestas vehicula. " +
                "Integer pharetra risus libero, et posuere justo mattis et.",
                "Proin malesuada, libero vitae aliquam venenatis, diam est faucibus felis, vitae efficitur erat nunc non mauris. " +
                "Suspendisse at sodales erat.",
                "Aenean vulputate, turpis non tincidunt ornare, metus est sagittis erat, id lobortis orci odio eget quam. " +
                "Suspendisse ex purus, lobortis quis suscipit a, volutpat vitae turpis.",
                "Duis facilisis, quam ut laoreet commodo, elit ex aliquet massa, non varius tellus lectus et nunc. " +
                "Donec vitae risus ut ante pretium semper. "                                                         +
                "Phasellus consectetur volutpat orci, eu dapibus turpis. "                                           +
                "Fusce varius sapien eu mattis pharetra.",
            };

            Random random = new Random();

            const int listCount = 8;

            List<CustomItem> list = new List<CustomItem>();

            for(int i = 0; i < listCount; i++)
            {
                list.Add
                (
                    new CustomItem()
                    {
                        Title         = $"이미지 {i + 1}",
                        ImageLocation = $"/IMAGE/landscape{i + 1}.jpg",
                        Views         = random.Next(100, 999).ToString(),
                        Likes         = random.Next(10, 99).ToString(),
                        Description   = textArray[i % textArray.Length],
                    }
                );
            }

            return list;
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

using System;

using System.Collections.Generic;

namespace TestProject

{

/// <summary>

/// 커스텀 항목

/// </summary>

public class CustomItem

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 제목 - Title

/// <summary>

/// 제목

/// </summary>

public string Title { get; set; }

#endregion

#region 이미지 위치 - ImageLocation

/// <summary>

/// 이미지 위치

/// </summary>

public string ImageLocation { get; set; }

#endregion

#region 조회 수 - Views

/// <summary>

/// 조회 수

/// </summary>

public string Views { get; set; }

#endregion

#region 좋아요 - Likes

/// <summary>

/// 좋아요

/// </summary>

public string Likes { get; set; }

#endregion

#region 설명 - Description

/// <summary>

/// 설명

/// </summary>

public string Description { get; set; }

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - CustomItem()

/// <summary>

/// 생성자

/// </summary>

public CustomItem()

{

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Static

//////////////////////////////////////////////////////////////////////////////// Public

#region 리스트 구하기 - GetList()

/// <summary>

/// 리스트 구하기

/// </summary>

/// <returns>리스트</returns>

public static List<CustomItem> GetList()

{

string[] textArray = new[]

{

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. " +

"Integer id facilisis lectus. " +

"Cras nec convallis ante, quis pulvinar tellus. " +

"Integer dictum accumsan pulvinar. " +

"Pellentesque eget enim sodales sapien vestibulum consequat.",

"Nullam eget mattis metus. Donec pharetra, tellus in mattis tincidunt, magna ipsum gravida nibh, vitae lobortis ante odio vel quam.",

"Quisque accumsan pretium ligula in faucibus. " +

"Mauris sollicitudin augue vitae lorem cursus condimentum quis ac mauris. " +

"Pellentesque quis turpis non nunc pretium sagittis. " +

"Nulla facilisi. " +

"Maecenas eu lectus ante. " +

"Proin eleifend vel lectus non tincidunt. " +

"Fusce condimentum luctus nisi, in elementum ante tincidunt nec.",

"Aenean in nisl at elit venenatis blandit ut vitae lectus. " +

"Praesent in sollicitudin nunc. " +

"Pellentesque justo augue, pretium at sem lacinia, scelerisque semper erat. " +

"Ut cursus tortor at metus lacinia dapibus.",

"Ut consequat magna luctus justo egestas vehicula. " +

"Integer pharetra risus libero, et posuere justo mattis et.",

"Proin malesuada, libero vitae aliquam venenatis, diam est faucibus felis, vitae efficitur erat nunc non mauris. " +

"Suspendisse at sodales erat.",

"Aenean vulputate, turpis non tincidunt ornare, metus est sagittis erat, id lobortis orci odio eget quam. " +

"Suspendisse ex purus, lobortis quis suscipit a, volutpat vitae turpis.",

"Duis facilisis, quam ut laoreet commodo, elit ex aliquet massa, non varius tellus lectus et nunc. " +

"Donec vitae risus ut ante pretium semper. " +

"Phasellus consectetur volutpat orci, eu dapibus turpis. " +

"Fusce varius sapien eu mattis pharetra.",

};

Random random = new Random();

const int listCount = 8;

List<CustomItem> list = new List<CustomItem>();

for(int i = 0; i < listCount; i++)

{

list.Add

(

new CustomItem()

{

Title = $"이미지 {i + 1}",

ImageLocation = $"/IMAGE/landscape{i + 1}.jpg",

Views = random.Next(100, 999).ToString(),

Likes = random.Next(10, 99).ToString(),

Description = textArray[i % textArray.Length],

}

);

}

return list;

}

#endregion

}

▶ MainPage.xaml


<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestProject"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Page.Resources>
        <DataTemplate x:Key="ImageDataTemplateKey" x:DataType="local:CustomItem">
            <Image
                AutomationProperties.Name="{x:Bind Title}"
                AutomationProperties.AccessibilityView="Raw"
                Width="190"
                Height="130"
                Stretch="UniformToFill"
                Source="{x:Bind ImageLocation}" />
        </DataTemplate>
    </Page.Resources>
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <GridView Name="gridView"
                ItemTemplate="{StaticResource ImageDataTemplateKey}"
                HorizontalAlignment="Center"
                IsItemClickEnabled="True"
                SelectionMode="Single"
                ItemClick="gridView_ItemClick" />
            <TextBlock Name="textBlock"
                HorizontalAlignment="Center"
                Margin="0 10 0 0" />
        </StackPanel>
    </Grid>
</Page>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:TestProject"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Page.Resources>

<Image

AutomationProperties.Name="{x:Bind Title}"

AutomationProperties.AccessibilityView="Raw"

Width="190"

Height="130"

Stretch="UniformToFill"

Source="{x:Bind ImageLocation}" />

</DataTemplate>

</Page.Resources>

<Grid>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<GridView Name="gridView"

ItemTemplate="{StaticResource ImageDataTemplateKey}"

HorizontalAlignment="Center"

IsItemClickEnabled="True"

SelectionMode="Single"

ItemClick="gridView_ItemClick" />

<TextBlock Name="textBlock"

HorizontalAlignment="Center"

Margin="0 10 0 0" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using System.Collections.Generic;
using System.Collections.ObjectModel;
using Windows.Foundation;
using Windows.Graphics.Display;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace TestProject
{
    /// <summary>
    /// 메인 페이지
    /// </summary>
    public sealed partial class MainPage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainPage()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainPage()
        {
            InitializeComponent();

            #region 윈도우 크기를 설정한다.

            double width  = 800d;
            double height = 600d;

            double dpi = (double)DisplayInformation.GetForCurrentView().LogicalDpi;

            ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize;

            Size windowSize = new Size(width * 96d / dpi, height * 96d / dpi);

            ApplicationView.PreferredLaunchViewSize = windowSize;

            Window.Current.Activate();

            ApplicationView.GetForCurrentView().TryResizeView(windowSize);

            #endregion
            #region 윈도우 제목을 설정한다.

            ApplicationView.GetForCurrentView().Title = "GridView 엘리먼트 : ItemTemplate 속성 사용하기";

            #endregion

            List<CustomItem> sourceList = CustomItem.GetList();

            ObservableCollection<CustomItem> sourceCollection = new ObservableCollection<CustomItem>(sourceList);

            this.gridView.ItemsSource = sourceCollection;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region 그리드 뷰 항목 클릭시 처리하기 - gridView_ItemClick(sender, e)

        /// <summary>
        /// 그리드 뷰 항목 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void gridView_ItemClick(object sender, ItemClickEventArgs e)
        {
            this.textBlock.Text = $"{(e.ClickedItem as CustomItem).Title} 항목을 클릭했습니다.";
        }

        #endregion
    }
}

using System.Collections.Generic;

using System.Collections.ObjectModel;

using Windows.Foundation;

using Windows.Graphics.Display;

using Windows.UI.ViewManagement;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

#region 윈도우 크기를 설정한다.

double width = 800d;

double height = 600d;

double dpi = (double)DisplayInformation.GetForCurrentView().LogicalDpi;

ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize;

Size windowSize = new Size(width * 96d / dpi, height * 96d / dpi);

ApplicationView.PreferredLaunchViewSize = windowSize;

Window.Current.Activate();

ApplicationView.GetForCurrentView().TryResizeView(windowSize);

#endregion

#region 윈도우 제목을 설정한다.

ApplicationView.GetForCurrentView().Title = "GridView 엘리먼트 : ItemTemplate 속성 사용하기";

#endregion

List<CustomItem> sourceList = CustomItem.GetList();

ObservableCollection<CustomItem> sourceCollection = new ObservableCollection<CustomItem>(sourceList);

this.gridView.ItemsSource = sourceCollection;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 그리드 뷰 항목 클릭시 처리하기 - gridView_ItemClick(sender, e)

/// <summary>

/// 그리드 뷰 항목 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void gridView_ItemClick(object sender, ItemClickEventArgs e)

{

this.textBlock.Text = $"{(e.ClickedItem as CustomItem).Title} 항목을 클릭했습니다.";

}

#endregion

}

TestProject.zip

[FLUTTER] BottomAppBar 클래스 사용하기

■ BottomAppBar 클래스를 사용하는 방법을 보여준다. ▶ main.dart


import 'package:flutter/material.dart';

void main() => runApp(TestApplication());

class TestApplication extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test Application'),
      ),
      body: Container(),
      bottomNavigationBar: BottomAppBar(
        child: Container(
          height: 50.0,
          color: Colors.amber,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.play_arrow),
        onPressed: () { },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
}

import 'package:flutter/material.dart';

void main() => runApp(TestApplication());

class TestApplication extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Test Application',

theme: ThemeData(

primarySwatch: Colors.blue,

home: MainPage(),

);

}

class MainPage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Test Application'),

body: Container(),

bottomNavigationBar: BottomAppBar(

child: Container(

height: 50.0,

color: Colors.amber,

floatingActionButton: FloatingActionButton(

child: Icon(Icons.play_arrow),

onPressed: () { },

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

);

}

test_app.zip

[FLUTTER] Positioned 클래스 사용하기

■ Positioned 클래스를 사용하는 방법을 보여준다. ▶ main.dart


import 'package:flutter/material.dart';

void main() {
  runApp(TestApplication());
}

class TestApplication extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test Application'),
      ),
      body: Stack(
        children: [
          Positioned(
            left: 100,
            top: 100,
            child: Container(
              color: Colors.red,
              width: 100,
              height: 100,
              padding: const EdgeInsets.all(8.0),
              margin: const EdgeInsets.all(8.0),
            ),
          ),
          Positioned(
            left: 150,
            top: 150,
            child: Container(
              color: Colors.blue,
              width: 100,
              height: 100,
              padding: const EdgeInsets.all(8.0),
              margin: const EdgeInsets.all(8.0),
            ),
          ),
        ]
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(TestApplication());

}

class TestApplication extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Test Application',

theme: ThemeData(

primarySwatch: Colors.blue,

home: MainPage(),

);

}

class MainPage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Test Application'),

body: Stack(

children: [

Positioned(

left: 100,

top: 100,

child: Container(

color: Colors.red,

width: 100,

height: 100,

padding: const EdgeInsets.all(8.0),

margin: const EdgeInsets.all(8.0),

Positioned(

left: 150,

top: 150,

child: Container(

color: Colors.blue,

width: 100,

height: 100,

padding: const EdgeInsets.all(8.0),

margin: const EdgeInsets.all(8.0),

]

);

}

test_app.zip

[FLUTTER] SliverAppBar/SliverList 클래스 사용하기

■ SliverAppBar/SliverList 클래스를 사용하는 방법을 보여준다. ▶ main.dart


import 'package:flutter/material.dart';

void main() {
  runApp(TestApplication());
}

class TestApplication extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  final _itemList = List.generate(50, (i) => ListTile(title: Text('항목 $i')));

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            expandedHeight: 180.0,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('Test Application'),
              background: Image.asset(
                'assets/sample.png',
                fit: BoxFit.cover,
              ),
            ),
            actions: <Widget>[
              IconButton(
                icon: Icon(Icons.access_alarm),
                onPressed: () {},
              )
            ],
          ),
          SliverList(
            delegate: SliverChildListDelegate(_itemList),
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(TestApplication());

}

class TestApplication extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Test Application',

theme: ThemeData(

primarySwatch: Colors.blue,

home: MainPage(),

);

}

class MainPage extends StatelessWidget {

final _itemList = List.generate(50, (i) => ListTile(title: Text('항목 $i')));

@override

Widget build(BuildContext context) {

return Scaffold(

body:CustomScrollView(

slivers: <Widget>[

SliverAppBar(

pinned: true,

expandedHeight: 180.0,

flexibleSpace: FlexibleSpaceBar(

title: Text('Test Application'),

background: Image.asset(

'assets/sample.png',

fit: BoxFit.cover,

actions: <Widget>[

IconButton(

icon: Icon(Icons.access_alarm),

onPressed: () {},

)

SliverList(

delegate: SliverChildListDelegate(_itemList),

);

}

test_app.zip

[FLUTTER] SliverAppBar/SliverFillRemaining 클래스 사용하기

■ SliverAppBar/SliverFillRemaining 클래스를 사용하는 방법을 보여준다. ▶ main.dart


import 'package:flutter/material.dart';

void main() {
  runApp(TestApplication());
}

class TestApplication extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            expandedHeight: 180.0,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('Test Application'),
              background: Image.asset(
                'assets/sample.png',
                fit: BoxFit.cover,
              ),
            ),
          ),
          SliverFillRemaining(
            child: Center(
              child: Text('center'),
            ),
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(TestApplication());

}

class TestApplication extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Test Application',

theme: ThemeData(

primarySwatch: Colors.blue,

home: MainPage(),

);

}

class MainPage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

body:CustomScrollView(

slivers: <Widget>[

SliverAppBar(

pinned: true,

expandedHeight: 180.0,

flexibleSpace: FlexibleSpaceBar(

title: Text('Test Application'),

background: Image.asset(

'assets/sample.png',

fit: BoxFit.cover,

SliverFillRemaining(

child: Center(

child: Text('center'),

);

}

test_app.zip

[FLUTTER] Card 클래스 사용하기

■ Card 클래스를 사용하는 방법을 보여준다. ▶ main.dart


import 'package:flutter/material.dart';

void main() {
  runApp(TestApplication());
}

class TestApplication extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test Application'),
      ),
      body: Align(
        alignment: Alignment.center,
        child: Card(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(16.0),
          ),
          elevation: 4.0,
          child: Container(
            width: 200,
            height: 200,
          ),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(TestApplication());

}

class TestApplication extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Test Application',

theme: ThemeData(

primarySwatch: Colors.blue,

home: MainPage(),

);

}

class MainPage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Test Application'),

body: Align(

alignment: Alignment.center,

child: Card(

shape: RoundedRectangleBorder(

borderRadius: BorderRadius.circular(16.0),

elevation: 4.0,

child: Container(

width: 200,

height: 200,

);

}

test_app.zip

[FLUTTER] SizedBox 클래스 사용하기

■ SizedBox 클래스를 사용하는 방법을 보여준다. ▶ main.dart


import 'package:flutter/material.dart';

void main() {
  runApp(TestApplication());
}

class TestApplication extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test Application'),
      ),
      body: SizedBox(
        width: 100,
        height: 100,
        child: Container(
          color: Colors.red,
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(TestApplication());

}

class TestApplication extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Test Application',

theme: ThemeData(

primarySwatch: Colors.blue,

home: MainPage(),

);

}

class MainPage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Test Application'),

body: SizedBox(

width: 100,

height: 100,

child: Container(

color: Colors.red,

);

}

test_app.zip

[FLUTTER] Expanded 클래스 사용하기

■ Expanded 클래스를 사용하는 방법을 보여준다. ▶ main.dart


import 'package:flutter/material.dart';

void main() {
  runApp(TestApplication());
}

class TestApplication extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test Application'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.red,
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.green,
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.blue,
            ),
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(TestApplication());

}

class TestApplication extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Test Application',

theme: ThemeData(

primarySwatch: Colors.blue,

home: MainPage(),

);

}

class MainPage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Test Application'),

body: Column(

children: <Widget>[

Expanded(

flex: 2,

child: Container(

color: Colors.red,

Expanded(

child: Container(

color: Colors.green,

Expanded(

child: Container(

color: Colors.blue,

);

}

test_app.zip

[FLUTTER] Align 클래스 사용하기

■ Align 클래스를 사용하는 방법을 보여준다. ▶ main.dart


import 'package:flutter/material.dart';

void main() {
  runApp(TestApplication());
}

class TestApplication extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test Application'),
      ),
      body: Align(
        alignment: Alignment.bottomRight,
        child: Container(
          color: Colors.red,
          width: 100,
          height: 100,
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(TestApplication());

}

class TestApplication extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Test Application',

theme: ThemeData(

primarySwatch: Colors.blue,

home: MainPage(),

);

}

class MainPage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Test Application'),

body: Align(

alignment: Alignment.bottomRight,

child: Container(

color: Colors.red,

width: 100,

height: 100,

);

}

test_app.zip

[FLUTTER] Padding 클래스 사용하기

■ Padding 클래스를 사용하는 방법을 보여준다. ▶ main.dart


import 'package:flutter/material.dart';

void main() {
  runApp(TestApplication());
}

class TestApplication extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test Application'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(40.0),
        child: Container(
          color: Colors.red,
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(TestApplication());

}

class TestApplication extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Test Application',

theme: ThemeData(

primarySwatch: Colors.blue,

home: MainPage(),

);

}

class MainPage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Test Application'),

body: Padding(

padding: const EdgeInsets.all(40.0),

child: Container(

color: Colors.red,

);

}

test_app.zip

[FLUTTER] Center 클래스 사용하기

■ Center 클래스를 사용하는 방법을 보여준다. ▶ main.dart


import 'package:flutter/material.dart';

void main() {
  runApp(TestApplication());
}

class TestApplication extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test Application'),
      ),
      body: Center(
        child: Container(
          color: Colors.red,
          width: 100,
          height: 100,
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(TestApplication());

}

class TestApplication extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Test Application',

theme: ThemeData(

primarySwatch: Colors.blue,

home: MainPage(),

);

}

class MainPage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Test Application'),

body: Center(

child: Container(

color: Colors.red,

width: 100,

height: 100,

);

}

test_app.zip

[FLUTTER] PageView 클래스 사용하기

■ PageView 클래스를 사용하는 방법을 보여준다. ▶ main.dart


import 'package:flutter/material.dart';

void main() {
  runApp(TestApplication());
}

class TestApplication extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test Application'),
      ),
      body: PageView(
        children: <Widget>[
          Container(
            color: Colors.red,
          ),
          Container(
            color: Colors.green,
          ),
          Container(
            color: Colors.blue,
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(TestApplication());

}

class TestApplication extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Test Application',

theme: ThemeData(

primarySwatch: Colors.blue,

home: MainPage(),

);

}

class MainPage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Test Application'),

body: PageView(

children: <Widget>[

Container(

color: Colors.red,

Container(

color: Colors.green,

Container(

color: Colors.blue,

);

}

test_app.zip

[FLUTTER] GridView 클래스 : count 생성자 사용하기

■ GridView 클래스에서 count 생성자를 사용하는 방법을 보여준다. ▶ main.dart


import 'package:flutter/material.dart';

void main() {
  runApp(TestApplication());
}

class TestApplication extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test Application'),
      ),
      body: GridView.count(
        crossAxisCount: 2,
        children: <Widget>[
          Container(
            color: Colors.red,
            width: 100,
            height: 100,
            padding: const EdgeInsets.all(8.0),
            margin: const EdgeInsets.all(8.0),
          ),
          Container(
            color: Colors.green,
            width: 100,
            height: 100,
            padding: const EdgeInsets.all(8.0),
            margin: const EdgeInsets.all(8.0),
          ),
          Container(
            color: Colors.blue,
            width: 100,
            height: 100,
            padding: const EdgeInsets.all(8.0),
            margin: const EdgeInsets.all(8.0),
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(TestApplication());

}

class TestApplication extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Test Application',

theme: ThemeData(

primarySwatch: Colors.blue,

home: MainPage(),

);

}

class MainPage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Test Application'),

body: GridView.count(

crossAxisCount: 2,

children: <Widget>[

Container(

color: Colors.red,

width: 100,

height: 100,

padding: const EdgeInsets.all(8.0),

margin: const EdgeInsets.all(8.0),

Container(

color: Colors.green,

width: 100,

height: 100,

padding: const EdgeInsets.all(8.0),

margin: const EdgeInsets.all(8.0),

Container(

color: Colors.blue,

width: 100,

height: 100,

padding: const EdgeInsets.all(8.0),

margin: const EdgeInsets.all(8.0),

);

}

test_app.zip

[FLUTTER] ListTile 클래스 사용하기

■ ListTile 클래스를 사용하는 방법을 보여준다. ▶ 예제 코드 (DART)


ListTile(
  leading: Icon(Icons.home),
  title: Text('Home'),
  trailing: Icon(Icons.navigate_next),
  onTap: () {},
)

ListTile(

leading: Icon(Icons.home),

title: Text('Home'),

trailing: Icon(Icons.navigate_next),

onTap: () {},

)

[FLUTTER] ListView 클래스 사용하기

■ ListView 클래스를 사용하는 방법을 보여준다. ▶ main.dart


import 'package:flutter/material.dart';

void main() {
  runApp(TestApplication());
}

class TestApplication extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test Application'),
      ),
      body: ListView(
        scrollDirection: Axis.vertical,
        children: <Widget>[
          ListTile(
            leading: Icon(Icons.home),
            title: Text('Home'),
            trailing: Icon(Icons.navigate_next),
            onTap: () {},
          ),
          ListTile(
            leading: Icon(Icons.event),
            title: Text('Event'),
            trailing: Icon(Icons.navigate_next),
            onTap: () {},
          ),
          ListTile(
            leading: Icon(Icons.camera),
            title: Text('Camera'),
            trailing: Icon(Icons.navigate_next),
            onTap: () {},
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(TestApplication());

}

class TestApplication extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Test Application',

theme: ThemeData(

primarySwatch: Colors.blue,

home: MainPage(),

);

}

class MainPage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Test Application'),

body: ListView(

scrollDirection: Axis.vertical,

children: <Widget>[

ListTile(

leading: Icon(Icons.home),

title: Text('Home'),

trailing: Icon(Icons.navigate_next),

onTap: () {},

ListTile(

leading: Icon(Icons.event),

title: Text('Event'),

trailing: Icon(Icons.navigate_next),

onTap: () {},

ListTile(

leading: Icon(Icons.camera),

title: Text('Camera'),

trailing: Icon(Icons.navigate_next),

onTap: () {},

);

}

test_app.zip

[FLUTTER] ListBody 클래스 사용하기

■ ListBody 클래스를 사용하는 방법을 보여준다. ▶ 예제 코드 (DART)


final itemList = List.generate(100, (i) => i).toList();

...

ListBody(
  children: itemList.map((i) => Text('항목 $i')).toList(),
)

final itemList = List.generate(100, (i) => i).toList();

...

ListBody(

children: itemList.map((i) => Text('항목 $i')).toList(),

)

[FLUTTER] Stack 클래스 사용하기

■ Stack 클래스를 사용하는 방법을 보여준다. ▶ main.dart


import 'package:flutter/material.dart';

void main() {
  runApp(TestApplication());
}

class TestApplication extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test Application'),
      ),
      body: Stack(
        children: <Widget>[
          Container(
            color: Colors.red,
            width: 100,
            height: 100,
            padding: const EdgeInsets.all(8.0),
            margin: const EdgeInsets.all(8.0),
          ),
          Container(
            color: Colors.green,
            width: 80,
            height: 80,
            padding: const EdgeInsets.all(8.0),
            margin: const EdgeInsets.all(8.0),
          ),
          Container(
            color: Colors.blue,
            width: 60,
            height: 60,
            padding: const EdgeInsets.all(8.0),
            margin: const EdgeInsets.all(8.0),
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(TestApplication());

}

class TestApplication extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Test Application',

theme: ThemeData(

primarySwatch: Colors.blue,

home: MainPage(),

);

}

class MainPage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Test Application'),

body: Stack(

children: <Widget>[

Container(

color: Colors.red,

width: 100,

height: 100,

padding: const EdgeInsets.all(8.0),

margin: const EdgeInsets.all(8.0),

Container(

color: Colors.green,

width: 80,

height: 80,

padding: const EdgeInsets.all(8.0),

margin: const EdgeInsets.all(8.0),

Container(

color: Colors.blue,

width: 60,

height: 60,

padding: const EdgeInsets.all(8.0),

margin: const EdgeInsets.all(8.0),

);

}

test_app.zip

[FLUTTER] Row 클래스 사용하기

■ Row 클래스를 사용하는 방법을 보여준다. ▶ main.dart


import 'package:flutter/material.dart';

void main() {
  runApp(TestApplication());
}

class TestApplication extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test Application'),
      ),
      body: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Container(
            color: Colors.red,
            width: 100,
            height: 100,
            padding: const EdgeInsets.all(8.0),
            margin: const EdgeInsets.all(8.0),
          ),
          Container(
            color: Colors.green,
            width: 100,
            height: 100,
            padding: const EdgeInsets.all(8.0),
            margin: const EdgeInsets.all(8.0),
          ),
          Container(
            color: Colors.blue,
            width: 100,
            height: 100,
            padding: const EdgeInsets.all(8.0),
            margin: const EdgeInsets.all(8.0),
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(TestApplication());

}

class TestApplication extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Test Application',

theme: ThemeData(

primarySwatch: Colors.blue,

home: MainPage(),

);

}

class MainPage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Test Application'),

body: Row(

mainAxisSize: MainAxisSize.max,

mainAxisAlignment: MainAxisAlignment.center,

crossAxisAlignment: CrossAxisAlignment.center,

children: <Widget>[

Container(

color: Colors.red,

width: 100,

height: 100,

padding: const EdgeInsets.all(8.0),

margin: const EdgeInsets.all(8.0),

Container(

color: Colors.green,

width: 100,

height: 100,

padding: const EdgeInsets.all(8.0),

margin: const EdgeInsets.all(8.0),

Container(

color: Colors.blue,

width: 100,

height: 100,

padding: const EdgeInsets.all(8.0),

margin: const EdgeInsets.all(8.0),

);

}

test_app.zip

[FLUTTER] Column 클래스 사용하기

■ Column 클래스를 사용하는 방법을 보여준다. ▶ main.dart


import 'package:flutter/material.dart';

void main() {
  runApp(TestApplication());
}

class TestApplication extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test Application'),
      ),
      body: Column(
        children: <Widget>[
          Container(
            color: Colors.red,
            width: 100,
            height: 100,
            padding: const EdgeInsets.all(8.0),
            margin: const EdgeInsets.all(8.0),
          ),
          Container(
            color: Colors.green,
            width: 100,
            height: 100,
            padding: const EdgeInsets.all(8.0),
            margin: const EdgeInsets.all(8.0),
          ),
          Container(
            color: Colors.blue,
            width: 100,
            height: 100,
            padding: const EdgeInsets.all(8.0),
            margin: const EdgeInsets.all(8.0),
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(TestApplication());

}

class TestApplication extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Test Application',

theme: ThemeData(

primarySwatch: Colors.blue,

home: MainPage(),

);

}

class MainPage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Test Application'),

body: Column(

children: <Widget>[

Container(

color: Colors.red,

width: 100,

height: 100,

padding: const EdgeInsets.all(8.0),

margin: const EdgeInsets.all(8.0),

Container(

color: Colors.green,

width: 100,

height: 100,

padding: const EdgeInsets.all(8.0),

margin: const EdgeInsets.all(8.0),

Container(

color: Colors.blue,

width: 100,

height: 100,

padding: const EdgeInsets.all(8.0),

margin: const EdgeInsets.all(8.0),

);

}

test_app.zip

[FLUTTER] Container 클래스 사용하기

■ Container 클래스를 사용하는 방법을 보여준다. ▶ main.dart


import 'package:flutter/material.dart';

void main() {
  runApp(TestApplication());
}

class TestApplication extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test Application'),
      ),
      body: Container(
        color: Colors.red,
        width: 100,
        height: 100,
        padding: const EdgeInsets.all(8.0),
        margin: const EdgeInsets.all(8.0),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(TestApplication());

}

class TestApplication extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Test Application',

theme: ThemeData(

primarySwatch: Colors.blue,

home: MainPage(),

);

}

class MainPage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Test Application'),

body: Container(

color: Colors.red,

width: 100,

height: 100,

padding: const EdgeInsets.all(8.0),

margin: const EdgeInsets.all(8.0),

);

}

test_app.zip

[FLUTTER] Scaffold 클래스 사용하기

■ Scaffold 클래스를 사용하는 방법을 보여준다. ▶ 예제 코드 (DART)


Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          'You have pushed the button this many times:',
        ),
        Text(
          '$_counter',
          style: Theme.of(context).textTheme.headline4,
        ),
      ],
    ),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: _incrementCounter,
    tooltip: 'Increment',
    child: Icon(Icons.add),
  ),
)

Scaffold(

appBar: AppBar(

title: Text(widget.title),

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget>[

Text(

'You have pushed the button this many times:',

Text(

'$_counter',

style: Theme.of(context).textTheme.headline4,

floatingActionButton: FloatingActionButton(

onPressed: _incrementCounter,

tooltip: 'Increment',

child: Icon(Icons.add),

)

[C#/WPF] Canvas 클래스 : 자식 엘리먼트 드래그하기

■ Canvas 클래스에서 자식 엘리먼트를 드래그하는 방법을 보여준다. ▶ DragHelper.cs


using System.Windows;
using System.Windows.Input;
using System.Windows.Controls;
using System.Windows.Media;

namespace TestProject
{
    /// <summary>
    /// 드래그 헬퍼
    /// </summary>
    public class DragHelper : DependencyObject
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Dependency Property
        ////////////////////////////////////////////////////////////////////////////////////////// Static
        //////////////////////////////////////////////////////////////////////////////// Private

        #region 드래그 여부 속성 - DragProperty

        /// <summary>
        /// 드래그 여부 속성
        /// </summary>
        public static readonly DependencyProperty DragProperty = DependencyProperty.RegisterAttached
        (
            "Drag",
            typeof(bool),
            typeof(DragHelper),
            new UIPropertyMetadata(false, DragPropertyChangedCallback)
        );

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Static
        //////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 윈도우
        /// </summary>
        private static Window _window;

        /// <summary>
        /// 드래그 시작 포인트
        /// </summary>
        private static Point _dragStartPoint;

        /// <summary>
        /// 드래그 엘리먼트
        /// </summary>
        private static FrameworkElement _drgaElement;

        /// <summary>
        /// 드래그 Z 인덱스
        /// </summary>
        private static int _dragZIndex;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Static
        //////////////////////////////////////////////////////////////////////////////// Public

        #region 윈도우 설정하기 - SetWindow(window)

        /// <summary>
        /// 윈도우 설정하기
        /// </summary>
        /// <param name="window">윈도우</param>
        public static void SetWindow(Window window)
        {
            _window = window;
        }

        #endregion

        #region 드래그 여부 설정하기 - SetDrag(element, flag)

        /// <summary>
        /// 드래그 여부 설정하기
        /// </summary>
        /// <param name="element">엘리먼트</param>
        /// <param name="flag">플래그</param>
        public static void SetDrag(UIElement element, bool flag)
        {
            if(_window != null)
            {
                element.SetValue(DragProperty, flag);
            }
        }

        #endregion
        #region 드래그 여부 구하기 - GetDrag(UIElement element)

        /// <summary>
        /// 드래그 여부 구하기
        /// </summary>
        /// <param name="element">엘리먼트</param>
        /// <returns>드래그 여부</returns>
        public static bool GetDrag(UIElement element)
        {
            return (bool)element.GetValue(DragProperty);
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////// Private

        #region 윈도우 PREVIEW 마우스 이동시 처리하기 - window_PreviewMouseMove(sender, e)

        /// <summary>
        /// 윈도우 PREVIEW 마우스 이동시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private static void window_PreviewMouseMove(object sender, MouseEventArgs e)
        {
            if(_drgaElement != null && e.LeftButton == MouseButtonState.Pressed || e.RightButton == MouseButtonState.Pressed)
            {
                Point mousePoint = e.GetPosition(_drgaElement);

                TranslateTransform transform = _drgaElement.RenderTransform as TranslateTransform;

                if(transform != null)
                {
                    _drgaElement.LayoutTransform = transform;

                    transform.X += mousePoint.X - _dragStartPoint.X;
                    transform.Y += mousePoint.Y - _dragStartPoint.Y;
                }
            }
        }

        #endregion
        #region 엘리먼트 PREVIEW 마우스 DOWN 처리하기 - element_PreviewMouseDown(sender, e)

        /// <summary>
        /// 엘리먼트 PREVIEW 마우스 DOWN 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private static void element_PreviewMouseDown(object sender, MouseButtonEventArgs e)
        {
            _drgaElement = sender as FrameworkElement;

            _dragZIndex = Canvas.GetZIndex(_drgaElement);

            Canvas.SetZIndex(_drgaElement, 100);

            _dragStartPoint = e.GetPosition(_drgaElement);

            _window.PreviewMouseMove += window_PreviewMouseMove;
        }

        #endregion
        #region 엘리먼트 PREVIEW 마우스 UP 처리하기 - element_PreviewMouseUp(sender, e)

        /// <summary>
        /// 엘리먼트 PREVIEW 마우스 UP 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private static void element_PreviewMouseUp(object sender, MouseButtonEventArgs e)
        {
            FrameworkElement element = sender as FrameworkElement;

            Canvas.SetZIndex(element, _dragZIndex);

            _drgaElement = _window;

            _window.MouseMove -= window_PreviewMouseMove;
        }

        #endregion

        #region 드래그 속성 변경시 콜백 처리하기 - DragPropertyChangedCallback(d, e)

        /// <summary>
        /// 드래그 속성 변경시 콜백 처리하기
        /// </summary>
        /// <param name="d">의존 객체</param>
        /// <param name="e">이벤트 인자</param>
        private static void DragPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            FrameworkElement element = d as FrameworkElement;

            if(element != null)
            {
                if((bool)e.NewValue)
                {
                    element.RenderTransform = new TranslateTransform(0, 0);

                    element.PreviewMouseDown += element_PreviewMouseDown;
                    element.PreviewMouseUp   += element_PreviewMouseUp;
                }
                else
                {
                    element.PreviewMouseDown -= element_PreviewMouseDown;
                    element.PreviewMouseUp   -= element_PreviewMouseUp;
                }
            }
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

using System.Windows;

using System.Windows.Input;

using System.Windows.Controls;

using System.Windows.Media;

namespace TestProject

{

/// <summary>

/// 드래그 헬퍼

/// </summary>

public class DragHelper : DependencyObject

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Dependency Property

////////////////////////////////////////////////////////////////////////////////////////// Static

//////////////////////////////////////////////////////////////////////////////// Private

#region 드래그 여부 속성 - DragProperty

/// <summary>

/// 드래그 여부 속성

/// </summary>

public static readonly DependencyProperty DragProperty = DependencyProperty.RegisterAttached

(

"Drag",

typeof(bool),

typeof(DragHelper),

new UIPropertyMetadata(false, DragPropertyChangedCallback)

);

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

////////////////////////////////////////////////////////////////////////////////////////// Static

//////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// 윈도우

/// </summary>

private static Window _window;

/// <summary>

/// 드래그 시작 포인트

/// </summary>

private static Point _dragStartPoint;

/// <summary>

/// 드래그 엘리먼트

/// </summary>

private static FrameworkElement _drgaElement;

/// <summary>

/// 드래그 Z 인덱스

/// </summary>

private static int _dragZIndex;

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Static

//////////////////////////////////////////////////////////////////////////////// Public

#region 윈도우 설정하기 - SetWindow(window)

/// <summary>

/// 윈도우 설정하기

/// </summary>

/// <param name="window">윈도우</param>

public static void SetWindow(Window window)

{

_window = window;

}

#endregion

#region 드래그 여부 설정하기 - SetDrag(element, flag)

/// <summary>

/// 드래그 여부 설정하기

/// </summary>

/// <param name="element">엘리먼트</param>

/// <param name="flag">플래그</param>

public static void SetDrag(UIElement element, bool flag)

{

if(_window != null)

{

element.SetValue(DragProperty, flag);

}

#endregion

#region 드래그 여부 구하기 - GetDrag(UIElement element)

/// <summary>

/// 드래그 여부 구하기

/// </summary>

/// <param name="element">엘리먼트</param>

/// <returns>드래그 여부</returns>

public static bool GetDrag(UIElement element)

{

return (bool)element.GetValue(DragProperty);

}

#endregion

//////////////////////////////////////////////////////////////////////////////// Private

#region 윈도우 PREVIEW 마우스 이동시 처리하기 - window_PreviewMouseMove(sender, e)

/// <summary>

/// 윈도우 PREVIEW 마우스 이동시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private static void window_PreviewMouseMove(object sender, MouseEventArgs e)

{

if(_drgaElement != null && e.LeftButton == MouseButtonState.Pressed || e.RightButton == MouseButtonState.Pressed)

{

Point mousePoint = e.GetPosition(_drgaElement);

TranslateTransform transform = _drgaElement.RenderTransform as TranslateTransform;

if(transform != null)

{

_drgaElement.LayoutTransform = transform;

transform.X += mousePoint.X - _dragStartPoint.X;

transform.Y += mousePoint.Y - _dragStartPoint.Y;

}

#endregion

#region 엘리먼트 PREVIEW 마우스 DOWN 처리하기 - element_PreviewMouseDown(sender, e)

/// <summary>

/// 엘리먼트 PREVIEW 마우스 DOWN 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private static void element_PreviewMouseDown(object sender, MouseButtonEventArgs e)

{

_drgaElement = sender as FrameworkElement;

_dragZIndex = Canvas.GetZIndex(_drgaElement);

Canvas.SetZIndex(_drgaElement, 100);

_dragStartPoint = e.GetPosition(_drgaElement);

_window.PreviewMouseMove += window_PreviewMouseMove;

}

#endregion

#region 엘리먼트 PREVIEW 마우스 UP 처리하기 - element_PreviewMouseUp(sender, e)

/// <summary>

/// 엘리먼트 PREVIEW 마우스 UP 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private static void element_PreviewMouseUp(object sender, MouseButtonEventArgs e)

{

FrameworkElement element = sender as FrameworkElement;

Canvas.SetZIndex(element, _dragZIndex);

_drgaElement = _window;

_window.MouseMove -= window_PreviewMouseMove;

}

#endregion

#region 드래그 속성 변경시 콜백 처리하기 - DragPropertyChangedCallback(d, e)

/// <summary>

/// 드래그 속성 변경시 콜백 처리하기

/// </summary>

/// <param name="d">의존 객체</param>

/// <param name="e">이벤트 인자</param>

private static void DragPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)

{

FrameworkElement element = d as FrameworkElement;

if(element != null)

{

if((bool)e.NewValue)

{

element.RenderTransform = new TranslateTransform(0, 0);

element.PreviewMouseDown += element_PreviewMouseDown;

element.PreviewMouseUp += element_PreviewMouseUp;

}

else

{

element.PreviewMouseDown -= element_PreviewMouseDown;

element.PreviewMouseUp -= element_PreviewMouseUp;

}

#endregion

}

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="Canvas 클래스 : 자식 엘리먼트 드래그하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Canvas>
        <Image Name="image1" Canvas.Left="50" Canvas.Top="50"
            Width="200"
            Height="150"
            Stretch="Fill"
            Source="IMAGE/sample1.png" />
        <Image Name="image2" Canvas.Left="50" Canvas.Top="210"
            Width="200"
            Height="150"
            Stretch="Fill"
            Source="IMAGE/sample2.png" />
        <Button Name="button" Canvas.Left="300" Canvas.Top="50"
            Width="100"
            Height="30"
            Content="Test" />
        <TextBlock Name="textBlock" Canvas.Left="300" Canvas.Top="210"
            Width="200"
            Text="TEXT BLOCK" />
    </Canvas>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="Canvas 클래스 : 자식 엘리먼트 드래그하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Image Name="image1" Canvas.Left="50" Canvas.Top="50"

Width="200"

Height="150"

Stretch="Fill"

Source="IMAGE/sample1.png" />

<Image Name="image2" Canvas.Left="50" Canvas.Top="210"

Width="200"

Height="150"

Stretch="Fill"

Source="IMAGE/sample2.png" />

<Button Name="button" Canvas.Left="300" Canvas.Top="50"

Width="100"

Height="30"

Content="Test" />

<TextBlock Name="textBlock" Canvas.Left="300" Canvas.Top="210"

Width="200"

Text="TEXT BLOCK" />

</Canvas>

</Window>

▶ MainWindow.xaml.cs


using System.Windows;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainWindow()
        {
            InitializeComponent();

            Loaded += Window_Loaded;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region 윈도우 로드시 처리하기 - Window_Loaded(sender, e)

        /// <summary>
        /// 윈도우 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            DragHelper.SetWindow(this);

            DragHelper.SetDrag(this.image1   , true);
            DragHelper.SetDrag(this.image2   , true);
            DragHelper.SetDrag(this.button   , true);
            DragHelper.SetDrag(this.textBlock, true);
        }

        #endregion
    }
}

using System.Windows;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

Loaded += Window_Loaded;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 윈도우 로드시 처리하기 - Window_Loaded(sender, e)

/// <summary>

/// 윈도우 로드시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void Window_Loaded(object sender, RoutedEventArgs e)

{

DragHelper.SetWindow(this);

DragHelper.SetDrag(this.image1 , true);

DragHelper.SetDrag(this.image2 , true);

DragHelper.SetDrag(this.button , true);

DragHelper.SetDrag(this.textBlock, true);

}

#endregion

}

TestProject.zip

[C#/WPF] Canvas 클래스 : 다각형 도형 추가하기

■ Canvas 클래스를 사용해 다각형 도형을 추가하는 방법을 보여준다. ▶ 예제 코드 (C#)


using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;

#region 다각형 도형 추가하기 - AddPolygon(canvas, fillBrush, strokeBrush, strokeThickness, pointArray)

/// <summary>
/// 다각형 도형 추가하기
/// </summary>
/// <param name="canvas">캔버스</param>
/// <param name="fillBrush">채우기 브러시</param>
/// <param name="strokeBrush">스트로크 브러시</param>
/// <param name="strokeThickness">스트로크 두께</param>
/// <param name="pointArray">포인트 배열</param>
public void AddPolygon(Canvas canvas, Brush fillBrush, Brush strokeBrush, double strokeThickness, Point[] pointArray)
{
    Polygon polygon = new Polygon();

    polygon.Fill            = fillBrush;
    polygon.Stroke          = strokeBrush;
    polygon.StrokeThickness = strokeThickness;
    polygon.Points          = new PointCollection(pointArray);

    canvas.Children.Add(polygon);
}

#endregion

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;

using System.Windows.Shapes;

#region 다각형 도형 추가하기 - AddPolygon(canvas, fillBrush, strokeBrush, strokeThickness, pointArray)

/// <summary>

/// 다각형 도형 추가하기

/// </summary>

/// <param name="canvas">캔버스</param>

/// <param name="fillBrush">채우기 브러시</param>

/// <param name="strokeBrush">스트로크 브러시</param>

/// <param name="strokeThickness">스트로크 두께</param>

/// <param name="pointArray">포인트 배열</param>

public void AddPolygon(Canvas canvas, Brush fillBrush, Brush strokeBrush, double strokeThickness, Point[] pointArray)

{

Polygon polygon = new Polygon();

polygon.Fill = fillBrush;

polygon.Stroke = strokeBrush;

polygon.StrokeThickness = strokeThickness;

polygon.Points = new PointCollection(pointArray);

canvas.Children.Add(polygon);

}

#endregion

[C#/WPF] Canvas 클래스 : 다각선 도형 추가하기

■ Canvas 클래스를 사용해 다각선 도형을 추가하는 방법을 보여준다. ▶ 예제 코드 (C#)


using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;

#region 다각선 도형 추가하기 - AddPolyline(canvas, fillBrush, strokeBrush, strokeThickness, pointArray)

/// <summary>
/// 다각선 도형 추가하기
/// </summary>
/// <param name="canvas">캔버스</param>
/// <param name="fillBrush">채우기 브러시</param>
/// <param name="strokeBrush">스트로크 브러시</param>
/// <param name="strokeThickness">스트로크 두께</param>
/// <param name="pointArray">포인트 배열</param>
public void AddPolyline(Canvas canvas, Brush fillBrush, Brush strokeBrush, double strokeThickness, Point[] pointArray)
{
    Polyline polyline = new Polyline();

    polyline.Fill            = fillBrush;
    polyline.Stroke          = strokeBrush;
    polyline.StrokeThickness = strokeThickness;
    polyline.Points          = new PointCollection(pointArray);

    canvas.Children.Add(polyline);
}

#endregion

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;

using System.Windows.Shapes;

#region 다각선 도형 추가하기 - AddPolyline(canvas, fillBrush, strokeBrush, strokeThickness, pointArray)

/// <summary>

/// 다각선 도형 추가하기

/// </summary>

/// <param name="canvas">캔버스</param>

/// <param name="fillBrush">채우기 브러시</param>

/// <param name="strokeBrush">스트로크 브러시</param>

/// <param name="strokeThickness">스트로크 두께</param>

/// <param name="pointArray">포인트 배열</param>

public void AddPolyline(Canvas canvas, Brush fillBrush, Brush strokeBrush, double strokeThickness, Point[] pointArray)

{

Polyline polyline = new Polyline();

polyline.Fill = fillBrush;

polyline.Stroke = strokeBrush;

polyline.StrokeThickness = strokeThickness;

polyline.Points = new PointCollection(pointArray);

canvas.Children.Add(polyline);

}

#endregion

[C#/WPF] Canvas 클래스 : 호(Arc) 도형 추가하기

■ Canvas 클래스를 사용해 호(Arc) 도형을 추가하는 방법을 보여준다. ▶ Canvas 클래스 : 호(Arc) 도형 추가하기 예제 (C#)


using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

Canvas canvas = new Canvas();

Rect   rectangle  = new Rect(100, 100, 200, 200); // 타원 사각형
double startAngle =  0 * (Math.PI / 180d);        // 시작 각도
double endAngle   = 90 * (Math.PI / 180d);        // 종료 각도

Point point1;
Point point2;

AddArc
(
    canvas,
    Brushes.Transparent,
    Brushes.Red,
    3,
    rectangle,
    startAngle,
    endAngle,
    false,
    SweepDirection.Clockwise,
    out point1,
    out point2
);

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;

Canvas canvas = new Canvas();

Rect rectangle = new Rect(100, 100, 200, 200); // 타원 사각형

double startAngle = 0 * (Math.PI / 180d); // 시작 각도

double endAngle = 90 * (Math.PI / 180d); // 종료 각도

Point point1;

Point point2;

AddArc

(

canvas,

Brushes.Transparent,

Brushes.Red,

rectangle,

startAngle,

endAngle,

false,

SweepDirection.Clockwise,

out point1,

out point2

);

▶ Canvas 클래스