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

calendar

 «  » 2024.12
일 월 화 수 목 금 토
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:31 .Net Project/SilverLight 3.0

58장 에니메이션 TimeLine (AutoReverseExample)

반응형
  TimeLine
- TimeLine속성에는 다음과 같이 존재
- Coloranimation :  Color 타입의 프로퍼티를 변경시키기 위한 에니메이션
- DoubleAnimation : Double 타입의 프로퍼티를 변경시키기 위한 애니메이션
- PointAnimation :  Point 타입의 프로퍼티를 변경시키기 위한 애니메이션
 (AutoReverse, BeginTime, Duration,  FillBehavior,  SpeedRatio,  RepeatBehavior )
  AutoReverseExample
- AutoReverse는 수행된 애니메이션 역방향으로 다시 수행하고자 할 경우 사용 가능
- AutoReverse 다음과 같이 예제 확인

<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

                    AutoReverse="True"

                    Storyboard.TargetName="rect"

                    Storyboard.TargetProperty="(Canvas.Top)"

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

 

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

                <DoubleAnimation

                    AutoReverse="True"

                    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> 




반응형

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

60장 에니메이션 TimeLine (DurationExample)  (0) 2009.12.07
59장 에니메이션 TimeLine (BeginTimeExample)  (0) 2009.12.07
57장 에니메이션 동작 방식 (사각형 움직이기)  (0) 2009.12.07
56장 스타일 탬블릿 적용(Templet)  (0) 2009.12.03
55장 스타일 사용 컨트롤 조작(Style)  (0) 2009.12.03
posted by Magic_kit
2009. 12. 7. 17:30 .Net Project/SilverLight 3.0

57장 에니메이션 동작 방식 (사각형 움직이기)

반응형
  에니메이션 작동 방식
 - 정지된 그림을 빠른 시간에 여러 장 보여줌으로써 마치 움직이는 것 같은 효과를 나타내는 기법을 사용
 - 여러 프레임이 모여 하나의 애니메이션을 이루는 구조를 가지고 있으며, 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();

        }

    }

}




반응형

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

59장 에니메이션 TimeLine (BeginTimeExample)  (0) 2009.12.07
58장 에니메이션 TimeLine (AutoReverseExample)  (0) 2009.12.07
56장 스타일 탬블릿 적용(Templet)  (0) 2009.12.03
55장 스타일 사용 컨트롤 조작(Style)  (0) 2009.12.03
54장 바인딩 컨트롤(Grid.Resource)  (0) 2009.12.03
posted by Magic_kit
2009. 12. 3. 11:31 .Net Project/SilverLight 3.0

56장 스타일 탬블릿 적용(Templet)

반응형
  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>








반응형

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

58장 에니메이션 TimeLine (AutoReverseExample)  (0) 2009.12.07
57장 에니메이션 동작 방식 (사각형 움직이기)  (0) 2009.12.07
55장 스타일 사용 컨트롤 조작(Style)  (0) 2009.12.03
54장 바인딩 컨트롤(Grid.Resource)  (0) 2009.12.03
53장 Calendar 컨트롤  (0) 2009.12.02
posted by Magic_kit
2009. 12. 3. 10:00 .Net Project/SilverLight 3.0

55장 스타일 사용 컨트롤 조작(Style)

반응형
  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> 




반응형

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

57장 에니메이션 동작 방식 (사각형 움직이기)  (0) 2009.12.07
56장 스타일 탬블릿 적용(Templet)  (0) 2009.12.03
54장 바인딩 컨트롤(Grid.Resource)  (0) 2009.12.03
53장 Calendar 컨트롤  (0) 2009.12.02
52장 Tab 컨트롤  (0) 2009.12.02
posted by Magic_kit

티스토리툴바