블로그 이미지
Magic_kit
study 관련자료를 한곳으로 자기 개발 목적으로 재태크 재무 관리 목적으로 일상생활의 팁을 공유 하기 위하여 블로그를 개설 하였습니다.

calendar

1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
반응형

Category

Recent Post

Recent Comment

Archive

2009. 12. 7. 17:30 .Net Project/SilverLight 3.0
반응형
  에니메이션 작동 방식
 - 정지된 그림을 빠른 시간에 여러 장 보여줌으로써 마치 움직이는 것 같은 효과를 나타내는 기법을 사용
 - 여러 프레임이 모여 하나의 애니메이션을 이루는 구조를 가지고 있으며, Adobe사의 Flash는
   만화 영화의 방식과 같이 하나하나의 프레임을 디자이너가 제작해서 애니메이션 작성 가능
  에니메이션 이용 사각형 움직이기

<UserControl x:Class="AnimationExample.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 x:Name="LayoutRoot">

        <Canvas.Resources>

 

    <!-- 사각형을 이동 시키는 스토리 보드 -->

            <Storyboard x:Name="rectAnimation">

 

                <!-- Y 좌표 이동 에니메이션 -->

                <DoubleAnimation

                    Storyboard.TargetName="rect"

                    Storyboard.TargetProperty="(Canvas.Top)"

                        From="0" To="100"/>

 

                <!-- X 좌표 이동 에니메이션 -->

                <DoubleAnimation

                    Storyboard.TargetName="rect"

                    Storyboard.TargetProperty="(Canvas.Left)"

                        From="0" To="100"/>

 

            </Storyboard>

        </Canvas.Resources>

 

        <!-- 사각형 -->

        <Rectangle x:Name="rect" Fill="Red"

                   Width="100" Height="100"

                   Canvas.Left="0" Canvas.Top="0"/>

    </Canvas>

</UserControl> 

  에니메이션 CS 파일

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

 

namespace AnimationExample

{

    public partial class MainPage : UserControl

    {

        public MainPage()

        {

            InitializeComponent();

            // 버튼에 대한 마우스 이벤트 핸들러 생성

            rect.MouseLeftButtonDown +=

                new MouseButtonEventHandler(MouseLeftButtonDown_Handler);

        }

 

        void MouseLeftButtonDown_Handler(object sender, MouseButtonEventArgs e)

        {

            // 애니메이션 시작

            rectAnimation.Begin();

        }

    }

}




반응형
posted by Magic_kit
2009. 12. 3. 11:31 .Net Project/SilverLight 3.0
반응형
  Templet 스타일 적용
-  실버라이트에서 컨트롤의 외형을 바꾸기 위해서 스타일과 컨트롤 제공
- 다양하게 외형을 변하기 위해서 템블릿 사용 가능 하며 종류에는 아래예제와 같이 존재 한다  


 FrmControlTemplage.Xaml
 FrmTemplateByStyle.Xaml
 FrmTemplateBinding.Xaml
 FrmContentPresenter.Xaml

<UserControl x:Class="RiaTemplet.FrmContentPresenter"

    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:DesignHeight="300" d:DesignWidth="400">

   

    <Grid x:Name="LayoutRoot" Background="White">

        <Grid.Resources>

            <Style x:Key="myButton" TargetType="Button">

                <Setter Property="Template">

                    <Setter.Value>

                        <ControlTemplate TargetType="Button">

                            <Border BorderBrush="Red" BorderThickness="3"

                                Background="Yellow">

                                <ContentPresenter>

                                    <TextBlock></TextBlock>

                                </ContentPresenter>

                            </Border>

                        </ControlTemplate>

 

                    </Setter.Value>

                </Setter>

            </Style>

        </Grid.Resources>

        <StackPanel>

            <Button Height="50" Width="200"
                    Content="Button1" Style="{StaticResource myButton}"></Button>

            <Button Height="50" Width="200"
                  
 Content="Button2" Style="{StaticResource myButton}">

                          

            </Button>

               

                <Button Height="50" Width="200"
                  
 Content="Button3" Style="{StaticResource myButton}"></Button>

        </StackPanel>

    </Grid>

</UserControl>








반응형
posted by Magic_kit
2009. 12. 3. 10:00 .Net Project/SilverLight 3.0
반응형
  Style 적용
- 스타일은 HTML의 CSS와 유사한 개념으로 프로퍼티에 대한 설정 값의  집합 의미
- 스타일 선하고 사용함으로써 유지보수에 대한 관리가 용이 하다는 장점을 가지고 있다. 
- 일반적인 스타일 적용 방식 (Style 지정)

- 그란데이션 효과 적용(Style 지정)
  Style.Xaml

- 일반적인 방식으로 스타일 적용


- 그란데이션 효과 적용하기

<UserControl x:Class="RiaStyle.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:DesignHeight="300" d:DesignWidth="400">

 

    <Grid x:Name="LayoutRoot" Background="White">

        <Grid.Resources>

            <Style x:Key="myButtonStyle" TargetType="Button">

                <Setter Property="Background" Value="Yellow"></Setter>

                <Setter Property="Foreground" Value="Blue"></Setter>

            </Style>

           

            <Style x:Key="myRectStyle" TargetType="Rectangle">

                <Setter Property="Fill">

                    <Setter.Value>

                       <LinearGradientBrush StartPoint="0,0"
                                            EndPoint="1,1">

                            <GradientStop Color="Red"
                                          Offset
="0.0"></GradientStop>

                           <GradientStop Color="Yellow"
                                         Offset
="1.0"></GradientStop>

                        </LinearGradientBrush>

                    </Setter.Value>

                </Setter>                

            </Style>
           

        </Grid.Resources>

        <StackPanel>

            <Button x:Name="btnResult" Content="Style Confirm1"

                    FontSize="20" FontFamily="Arial"

                    Style="{StaticResource myButtonStyle}"></Button>

            <Button x:Name="btnResult2" Content="Style Confirm2"

                    FontFamily="Arial" FontSize="20"

                     Style="{StaticResource myButtonStyle}"></Button>

            <Rectangle Width="400" Height="100"
                       Style="{StaticResource myRectStyle}"></Rectangle>

        </StackPanel>

    </Grid>

</UserControl> 




반응형
posted by Magic_kit
2009. 12. 3. 09:35 .Net Project/SilverLight 3.0
반응형
  Grid.Resource
- 데이터 바인딩 기본적으로 사용하는 Grid 컨트롤
- 바인딩은 실버라이트 버젼이 올라갈수능 기능이 강화되고 있으므로, 충분히 익히고 사용할 
  가치가 있습니다.
- 바인딩을 적용하고자 하는 컨트롤은 파생되어야 하며, 바인딩 적용하고 하는 컨트롤의 프로퍼티는
   엔터티로 적용 되어야 사용 가능합니다.
  Grid.Resource.Xaml

<UserControl x:Class="RiaResource.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:DesignHeight="300" d:DesignWidth="400">

 

    <Grid x:Name="LayoutRoot" Background="White">

        <Grid.Resources>

            <SolidColorBrush x:Key="myColor"
                             
 Color="Red" Opacity="0.8"></SolidColorBrush>

        </Grid.Resources>

        <StackPanel>

            <TextBlock Text="Kim Yong Won"
                       Foreground
="Blue" FontSize="20"></TextBlock>

            <TextBlock Text="Red Color"
                     
 Foreground="{StaticResource myColor}"
                       FontSize
="20"></TextBlock>

            <TextBlock Text="Red Color"
                       Foreground="{StaticResource myColor}" 
                       FontSize
="20"></TextBlock>

        </StackPanel>

    </Grid>

</UserControl> 

  다음과 같은 위의 바인딩 내용을 외부에서 적용하기


1. FrmMergeResourceDictionar.Xaml 생성하여 다음 코드 추가

<ResourceDictionary 

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

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

    <SolidColorBrush Color="Red" x:Key="myRed"></SolidColorBrush>

    <SolidColorBrush Color="Blue" x:Key="myBlue"></SolidColorBrush>   

</ResourceDictionary> 

2. FrmMain 페이지에서 리소스파일을 외부에서 가져와서 사용하기 위하여 추가 

<UserControl x:Class="RiaResource.SilverlightControl1"

    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:DesignHeight="300" d:DesignWidth="400">

   

    <UserControl.Resources>

        <ResourceDictionary>

            <ResourceDictionary.MergedDictionaries>

                <ResourceDictionary
                 Source
="FrmMergeResourceDictionar.xaml"></ResourceDictionary>

            </ResourceDictionary.MergedDictionaries>

        </ResourceDictionary>

    </UserControl.Resources>

   

    <StackPanel>

        <TextBlock Text="RedColor"
                  
 Foreground="{StaticResource myRed}"></TextBlock>

        <TextBlock Text="BlueColor"
                 
 Foreground="{StaticResource myBlue}"></TextBlock>

    </StackPanel>   

</UserControl>

  3. 비하인드 코드에서 리소스 적용하는 방법

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

 

namespace RiaResource

{

    public partial class SilverlightControl2 : UserControl

    {

        public SilverlightControl2()

        {

            InitializeComponent();

 

            this.Loaded += new RoutedEventHandler(SilverlightControl2_Loaded);

        }

 

        void SilverlightControl2_Loaded(object sender, RoutedEventArgs e)

        {

            //[1] Grid 리소스 사용 하는 방법

            this.lblRed.Foreground = 
                      (
this.LayoutRoot.Resources["myColor"] as SolidColorBrush);

 

            //[2] 외부에 정의된 리소스 사용하기

            this.lblGreen.Foreground =
                     
this.Resources["myGreen"] as SolidColorBrush ;   

        }

    }

} 






반응형

'.Net Project > SilverLight 3.0' 카테고리의 다른 글

56장 스타일 탬블릿 적용(Templet)  (0) 2009.12.03
55장 스타일 사용 컨트롤 조작(Style)  (0) 2009.12.03
53장 Calendar 컨트롤  (0) 2009.12.02
52장 Tab 컨트롤  (0) 2009.12.02
51장 Slider 컨트롤  (0) 2009.12.02
posted by Magic_kit