Rich Internet Application

1. 2010 1학기 Rich Internet Application 동서대학교 김남우

2. Silverlight Prject • App.xaml • 전역 리소스를 저장할 수 있는 공간 • 프로젝트에서 공통으로 사용하는 리소스 정의 • App.xaml.cs • App.xaml과 한쌍으로 묶인 Behind • ‘App.xaml’ 의 ‘x:Class’ Property에서 설정한 Class 정의된 곳 • Silverlight Application의 Liftcycle 과 Error 담당 • MainPage.xaml • Silverlight Application 실행 시 보이는 첫 화면 • MainPage.xaml.cs • MainPage.xaml 과 한쌍으로 묶인 Behind • ‘MainPage.xaml’ 의 ‘x:Class’ Property에서 설정한 Class • 정의된 곳

3. Layout Control • 디자인을 하기 위한 공간을 제공하는 컨트롤 • 기본적으로 3개의 컨트롤 제공 • Silverlight Toolkit 설치 시 추가로 2개 제공 • Canvas • StackPanel • Grid • WrapPanel • DockPanel

4. Canvas <UserControl x:Class="HelloWorldApplication.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"> <Canvas Width="400" Height="300"> </Canvas> </UserControl>

5. Canvas <UserControl x:Class="HelloWorldApplication.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"> <Canvas Width="400" Height="300“ Background=“Gray”> </Canvas> </UserControl>

6. Canvas <UserControl x:Class="HelloWorldApplication.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"> <Canvas Width="400" Height="400" Background="Blue"> <Canvas Width="200" Height="200" Background="Red”> </Canvas> </Canvas> </UserControl>

7. Canvas <UserControl x:Class="HelloWorldApplication.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"> <Canvas Width="400" Height="400" Background="Blue"> <Canvas Width="200" Height="200" Background="Red" Canvas.Left="100" Canvas.Top="100"> </Canvas> </Canvas> </UserControl> (100,100)

8. Added Children Control <UserControl x:Class="HelloWorldApplication.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"> <Canvas Width="400" Height="400" Background="Blue"> <Button Content="Click" Width="100" Height="30"/> </Canvas> </UserControl>

9. Added Children Control <UserControl x:Class="HelloWorldApplication.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"> <Canvas Width="400" Height="400" Background="Blue"> <Button Content="Click" Width="100" Height="30" Canvas.Left="150" Canvas.Top="100"/> </Canvas> </UserControl> 일반 프로퍼티 추가 프로퍼티

10. Added Children Control xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"> <Canvas Width="400" Height="400" Background="Blue"> <Rectangle Fill="Red" Width="200" Height="200"/> <Rectangle Fill="Yellow" Width="200" Height="200" Canvas.Left="100“ Canvas.Top="100"/> <Rectangle Fill="Green" Width="200" Height="200" Canvas.Left="200“ Canvas.Top="200"/> </Canvas> </UserControl>

11. Zindex Property <UserControl x:Class="HelloWorldApplication.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"> <Canvas Width="400" Height="400" Background="Blue"> <Rectangle Fill="Red" Width="200" Height="200" Canvas.ZIndex="3"/> <Rectangle Fill="Yellow" Width="200" Height="200" Canvas.Left="100" Canvas.Top="100" Canvas.ZIndex="2"/> <Rectangle Fill="Green" Width="200" Height="200" Canvas.Left="200" Canvas.Top="200" Canvas.ZIndex="1"/> </Canvas> </UserControl>

12. Canvas Control Property

13. StackPanel <UserControl x:Class="HelloWorldApplication.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"> <StackPanel Width="400" Height="400"> </StackPanel> </UserControl>

14. StackPanel <UserControl x:Class="HelloWorldApplication.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"> <StackPanel Width="400" Height="400"> <Button Content="Botton1"/> <Button Content="Botton2"/> <Button Content="Botton3"/> </StackPanel> </UserControl>

15. StackPanel <UserControl x:Class="HelloWorldApplication.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"> <StackPanel Width="400" Height="400 " Orientation="Horizontal"> <Button Content="Botton1"/> <Button Content="Botton2"/> <Button Content="Botton3"/> </StackPanel> </UserControl>

16. StackPanel <UserControl x:Class="HelloWorldApplication.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"> <StackPanel Width="400" Height="400 " Orientation="Horizontal"> <Button Content="Botton1" Margin="10”/> <Button Content="Botton2"/> <Button Content="Botton3"/> </StackPanel> </UserControl>

17. StackPanel <UserControl x:Class="HelloWorldApplication.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"> <StackPanel Width="400" Height="400 " Orientation=“Vertical"> <Button Content="Botton1" Margin="10”/> <Button Content="Botton2"/> <Button Content="Botton3"/> </StackPanel> </UserControl>

18. StackPanel • 자식컨트롤의 높이나 넓이가 설정되지 않은 경우 • [Orientation=“Horizontal”] • 자식컨트롤의 넓이는 자식 컨트롤의 필요한 넓이를 계산해서 적용 • 자식컨트롤의 높이는 스택 패널의 높이와 같은 값을 적용 • [Orientation=“Vertical”] • 자식컨트롤의 높이는 자식 컨트롤의 필요한 높이를 계산해서 적용 • 자식컨트롤의 넓이는 스택 패널의 넓이와 같은 값을 적용