Ruru' Programming :)

Silverlight는 애니메이션을 위해 Storyboard를 사용한다.

뭐 Flash와 같은 다른 app.도 마찬가지겠지만 시간에 따라 벡터의 변화를 처리하는 방식이다.


이번 내용은 에제는 포함하지 않겠지만 팁에 해당하는 StoryBoard의 특성값들에 대해 알아본다.

<Storyboard x:Name="TestStoryBoard" FillBehavior="Stop">
애니메이션이 완료 되었을 때 동작을 지정한다.

- HoldEnd(기본값) : 완료 후 오브젝트의 상태 그대로 유지
- Stop : 완료 후 초기 위치로 복원


<Storyboard x:Name="TestStoryBoard" AutoReverse="True">
재생이 완료 되었을 때 원자리로 역 애니메이션으로 돌아온다.


<Storyboard x:Name="TestStoryBoard" SpeedRatio="5.0">
배율로 속도를 지정한다. 위와 같은 경우 평상 속도의 5배로 재생된다.


<Storyboard x:Name="TestStoryBoard" RepeatBehavior="3x">
3회 반복한다. #x를 지정하면 재생 횟수를 지정할 수 있다.


<Storyboard x:Name="TestStoryBoard" RepeatBehavior="Forever">
무한 반복한다.


<Storyboard x:Name="TestStoryBoard" RepeatBehavior="00:00:05.5">
시간을 설정하여 얼마간 재생할지 결정한다.
위 설정은 5.5초

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

자료제공 : http://hugeflow.com/

예제소스 :

3-3.WebClientMediaTest.zip

Silverlight 에서는 정말 쉽게 미디어 플레이어를 만들 수 있는 것 같다.

먼저 silverlight 프로젝트를 하나 만들고, Page.xaml을 blend로 열어준다.

blend에서 asset에 MediaControl 하나를 올려주고 버튼들을 올려 간단히 media 재생에 대한 내용을 작성해보자.


먼저 xaml

<UserControl x:Class="WebClientMediaTest.Page"
    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="478" d:DesignHeight="337">
    <Grid x:Name="LayoutRoot" Background="White">
     <MediaElement Margin="0.39,0,-0.39,37" Source="http://hugeflow.com/Metro/Video/pigmap.wmv" x:Name="media"/>
     <StackPanel Height="33" Margin="0.39,0,0,0" VerticalAlignment="Bottom" Orientation="Horizontal">
      <Button Content="Play" Width="82.333" x:Name="btnPlay" Click="btnPlay_Click"/>
      <Button Content="Pause" Width="82.333" x:Name="btnPause" Click="btnPause_Click"/>
      <Button Content="Stop" Width="82.333" x:Name="btnStop" Click="btnStop_Click"/>
      <Slider Width="216" x:Name="slideVolume" ValueChanged="slideVolume_ValueChanged"/>
     </StackPanel>
    </Grid>
</UserControl>

다음은 C# 코드

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

namespace WebClientMediaTest
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();

            Loaded += new RoutedEventHandler(Page_Loaded);
        }

        void Page_Loaded(object sender, RoutedEventArgs e)
        {
            slideVolume.Value = slideVolume.Maximum * media.Volume;
        }

        private void btnPlay_Click(object sender, RoutedEventArgs e)
        {
            media.Play();
        }

        private void btnPause_Click(object sender, RoutedEventArgs e)
        {
            media.Pause();
        }

        private void btnStop_Click(object sender, RoutedEventArgs e)
        {
            media.Stop();
        }

        private void slideVolume_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            media.Volume = slideVolume.Value / slideVolume.Maximum;
        }
    }
}

다른 코드들 보다 어쩌먼 정말 간단한 코드같다 -_ -;;

별다른 기법도 없고, 단지 컨트롤 에서 제공하는 간단한 산수만 한다면 사용할 수 있는..

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

http://www.microsoft.com/silverlight/seethelight/


Silverlight 3와 함께 또 흥미로운 녀식이 있었네요.


http://www.microsoft.com/silverlight/seethelight/visualkitchen/default.htm

위 영상을 한번 보세요 ^ ^

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

자료제공 : http://hugeflow.com/

2009/04/30 - [.NET/SilverLight] - Silverlight - Network
2009/04/30 - [.NET/SilverLight] - Silverlight - Network Example 1


예제코드 :

3-2.WebServiceTest.zip

이번에는 이전 내용과 마찬가지이지만 직접 가져오지 않고 웹 서비스를 만들어 데이터를 가져오도록 한다.

먼저 웹서비스의 내용에

   

    /// <summary>
    /// WebServiceTest의 요약 설명입니다.
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // ASP.NET AJAX를 사용하여 스크립트에서 이 웹 서비스를 호출하려면 다음 줄의 주석 처리를 제거합니다.
    // [System.Web.Script.Services.ScriptService]
    public class WebServiceTest : System.Web.Services.WebService
    {

        [WebMethod]
        public string HelloWorld()
        {
            return "Hello World";
        }

        [WebMethod]
        public string GetHtml(string address)
        {
            WebClient wc = new WebClient();
            return wc.DownloadString(new Uri(address, UriKind.Absolute));
        }
    }

다음과 같은 내용을 작성하고,

만약 인코딩 문제로 문자가 깨지는 현상이 발생하면

다음과 같은 코드를 추가해준다.

wc.Encoding = System.Text.Encoding.UTF8;

Silverlight에서는 웹서비스 참조로 위 웹서비스를 추가해준다.


그리고 실버라이트의 Page에 코드를 작성한다..

먼저 Page.xaml 코드

<UserControl x:Class="WebServiceTest.Page"
    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="485" d:DesignHeight="377">
    <Grid x:Name="LayoutRoot" Background="White">
 <TextBox Height="47" Margin="8,8,100,0" VerticalAlignment="Top" Text="http://hugeflow.com/sample.xml" TextWrapping="Wrap" x:Name="tboxAddress"/>
        <Button HorizontalAlignment="Right" Margin="0,8,8.192,0" VerticalAlignment="Top" Content="Get" Width="88" Height="47" x:Name="buttonGet" Click="buttonGet_Click"/>
        <TextBlock Margin="8,59,8,8" Text="" TextWrapping="Wrap" x:Name="tbOutput"/>
</Grid>
</UserControl>

C# 코드

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

namespace WebServiceTest
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
        }

        private void buttonGet_Click(object sender, RoutedEventArgs e)
        {
            if (string.IsNullOrEmpty(tboxAddress.Text) == true)
            {
                return;
            }

            try
            {
                WebServiceTest.ServiceReference1.WebServiceTestSoapClient wsclient = new WebServiceTest.ServiceReference1.WebServiceTestSoapClient();
                wsclient.GetHtmlCompleted += new EventHandler<WebServiceTest.ServiceReference1.GetHtmlCompletedEventArgs>(wsclient_GetHtmlCompleted);
                wsclient.GetHtmlAsync(tboxAddress.Text);
            }
            catch (Exception ex)
            {
                tbOutput.Text = ex.Message;
            }
        }

        void wsclient_GetHtmlCompleted(object sender, WebServiceTest.ServiceReference1.GetHtmlCompletedEventArgs e)
        {
            if (e.Cancelled == true)
            {
                tbOutput.Text = "취소되었습니다.";
                return;
            }

            if (e.Error != null)
            {
                if (string.IsNullOrEmpty(e.Error.Message) == false)
                {
                    tbOutput.Text = e.Error.Message;
                }
                else
                {
                    tbOutput.Text = e.Error.ToString();
                }
                return;
            }

            tbOutput.Text = e.Result;
        }
    }
}

이전 예제와 대부분이 비슷한 것을 알 수 있다.
그냥 웹서비스 호출하도로 바꾼내용이니.. ㅎㅎ

 

 

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

자료제공 : http://hugeflow.com/

3-1.WebClientTest.zip

이전 내용에 Silverlight의 네트워크에 작성한 내용이 있다.

2009/04/30 - [.NET/SilverLight] - Silverlight - Network


이 내용을 바탕으로 다음의 소스코드를 작성하였으므로 내용의 이해가 조금 부족하면 확인하시길...


예제는 프로젝트명 WebClientTest로 하였고,
먼저 Page.xaml 코드는

<UserControl x:Class="WebClientTest.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="Auto" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="500" d:DesignHeight="418">
    <Grid x:Name="LayoutRoot" Background="White">

        <TextBox Height="47" Margin="8,8,100,0" VerticalAlignment="Top" Text="http://hugeflow.com/sample.xml" TextWrapping="Wrap" x:Name="tboxAddress"/>
        <Button HorizontalAlignment="Right" Margin="0,8,8.192,0" VerticalAlignment="Top" Content="Get" Width="88" Height="47" x:Name="buttonGet" Click="buttonGet_Click"/>
        <TextBlock Margin="8,59,8,8" Text="" TextWrapping="Wrap" x:Name="tbOutput"/>

    </Grid>
</UserControl>

 

다음으로 C# 코드

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;

namespace WebClientTest
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
        }

        private void buttonGet_Click(object sender, RoutedEventArgs e)
        {
            if (string.IsNullOrEmpty(tboxAddress.Text) == true)
            {
                return;
            }

            try
            {
                WebClient wc = new WebClient();
                wc.DownloadStringCompleted += new DownloadStringCompletedEventHandler(wc_DownloadStringCompleted);
                wc.DownloadStringAsync(new Uri(tboxAddress.Text, UriKind.Absolute));
            }
            catch (Exception ex)
            {
                tbOutput.Text = ex.Message;
                throw;
            }
        }

        void wc_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
        {
            if (e.Cancelled == true)
            {
                tbOutput.Text = "취소되었습니다.";
                return;
            }

            if (e.Error != null)
            {
                if (string.IsNullOrEmpty(e.Error.Message) == false)
                {
                    tbOutput.Text = e.Error.Message;
                }
                else
                {
                    tbOutput.Text = e.Error.ToString();
                }
                return;
            }

            tbOutput.Text = e.Result;
        }
    }
}

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

이번엔 실버라이트 사용자 컨트롤을 만들어봅니다.

설명이 많이 부족하지만 따라하시다보면 성공하실수.....

사실 제가 부족해서 설명이 많이 부족하네요ㅠㅠ

 

 

 

 

Generic.xaml

• Custom Control의 기본 모양을 정의하는 파일
• Xmlns와 xmlns:x는 page.xaml에서 가져온다

 

<ResourceDictionary

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

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

 

 

 

</ResourceDictionary>

 

 

 

public class MyControl : Control

{

public MyControl()

{

this.DefaultStyleKey = typeof(MyControl);

}

}

 

 

Control을 상속 받고

기본 스타일 키를 현재 형식의 타입을 지정한다.

 

 

 

 

 

재정의할 메소드가 있는데, OnApplyTemplate 을 override 하여 메소드를 만든다

 

 

public override void OnApplyTemplate()

{

base.OnApplyTemplate();

}

 

 

이제 Generic.xaml에서 내가 작성하는 control의 네임스페이스를 지정한다.

 

My로 prefix를 주었으므로 my를 앞으로 사용하게 된다

<ResourceDictionary

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

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

 

xmlns:my="clr-namespace:CustomControlTest2"

 

>

 

<Style TargetType="my:MyControl">

 

</Style>

 

</ResourceDictionary>

 

 

이제 컨트롤의 템플릿을 만든다

 

<ResourceDictionary

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

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

 

xmlns:my="clr-namespace:CustomControlTest2"

 

>

 

<Style TargetType="my:MyControl">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="my:MyControl">

 

<Grid>

<TextBlock x:Name="MyText" Text="안녕?" />

</Grid>

 

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

 

</ResourceDictionary>

 

 

 

이제 기본적인 내용은 끝났고 Grid 안에 내용을 지정한다.

 

 

이제 컨트롤에서 속성을 노출할 수 있도록 작성해보자.

propdp를 입력하면 인텔리센스로 작성할 수 있다.

 

마지막에 UIxxxxxxx(0) 라고 나오는 부분은 지워주고 PropertyMetadata 로 변경해야한다.

 

using System;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

 

namespace CustomControlTest2

{

public class MyControl : Control

{

TextBlock _tb = null;

 

public string Text

{

get { return (string)GetValue(TextProperty); }

set { SetValue(TextProperty, value); }

}

 

// Using a DependencyProperty as the backing store for Text. This enables animation, styling, binding, etc...

public static readonly DependencyProperty TextProperty =

DependencyProperty.Register(

"Text",

typeof(string),

typeof(MyControl),

new PropertyMetadata(new PropertyChangedCallback(

// e는 보낸쪽

(d, e) =>

{

MyControl myControl = d as MyControl;

if (myControl != null && myControl._tb != null)

{

myControl._tb.Text = e.NewValue.ToString();

}

})

)

);

 

 

public MyControl()

{

this.DefaultStyleKey = typeof(MyControl);

}

 

public override void OnApplyTemplate()

{

base.OnApplyTemplate();

 

// 컨트롤에 들어 있는 TextBlock을 가져온다.

_tb = GetTemplateChild("MyText") as TextBlock;

 

if (_tb !=null)

{

_tb.Text = "커스텀 컨트롤~!";

}

}

}

}

 

 

 

 

 

 

 

이제 Page.xaml에 돌아와서 MyControl을 작성해 보자

 

<UserControl x:Class="CustomControlTest2.Page"

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

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

 

xmlns:my="clr-namespace:CustomControlTest2"

 

Width="400" Height="300">

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

<my:MyControl Text="여기에 글을 작성해보자!!"></my:MyControl>

</Grid>

</UserControl>

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

이번에는 Silverlight의 컨트롤을 정의해서 만들어봅니다.

예전에 강의들을 때 작성하고 다시보니 무슨소린지 모르겠네요.. ㅋㅋㅋ

그래도 전혀 무지한 것 보단 캡쳐라도 약간 있으니 ㅠㅠ 나중에 약간이라도 도움될 듯..

부족하지만 1%라도 얻을게 있을지 모르니 정리 안된 상태로 등록합니다... ㅋㅋ

 

 

 

 

Generic.xaml

• Custom Control의 기본 모양을 정의하는 파일
• Xmlns와 xmlns:x는 page.xaml에서 가져온다

 

<ResourceDictionary

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

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

 

 

 

</ResourceDictionary>

 

 

 

public class MyControl : Control

{

public MyControl()

{

this.DefaultStyleKey = typeof(MyControl);

}

}

 

 

Control을 상속 받고

기본 스타일 키를 현재 형식의 타입을 지정한다.

 

 

 

 

 

재정의할 메소드가 있는데, OnApplyTemplate 을 override 하여 메소드를 만든다

 

 

public override void OnApplyTemplate()

{

base.OnApplyTemplate();

}

 

 

이제 Generic.xaml에서 내가 작성하는 control의 네임스페이스를 지정한다.

 

my로 prefix를 주었으므로 my를 앞으로 사용하게 된다

<ResourceDictionary

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

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

 

xmlns:my="clr-namespace:CustomControlTest2"

 

>

 

<Style TargetType="my:MyControl">

 

</Style>

 

</ResourceDictionary>

 

 

이제 컨트롤의 템플릿을 만든다

 

<ResourceDictionary

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

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

 

xmlns:my="clr-namespace:CustomControlTest2"

 

>

 

<Style TargetType="my:MyControl">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="my:MyControl">

 

<Grid>

<TextBlock x:Name="MyText" Text="안녕?" />

</Grid>

 

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

 

</ResourceDictionary>

 

 

 

이제 기본적인 내용은 끝났고 Grid 안에 내용을 지정한다.

 

 

이제 컨트롤에서 속성을 노출할 수 있도록 작성해보자.

propdp를 입력하면 인텔리센스로 작성할 수 있다.

 

마지막에 UIxxxxxxx(0) 라고 나오는 부분은 지워주고 PropertyMetadata 로 변경해야한다.

 

using System;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

 

namespace CustomControlTest2

{

public class MyControl : Control

{

TextBlock _tb = null;

 

public string Text

{

get { return (string)GetValue(TextProperty); }

set { SetValue(TextProperty, value); }

}

 

// Using a DependencyProperty as the backing store for Text. This enables animation, styling, binding, etc...

public static readonly DependencyProperty TextProperty =

DependencyProperty.Register(

"Text",

typeof(string),

typeof(MyControl),

new PropertyMetadata(new PropertyChangedCallback(

// e는 보낸쪽

(d, e) =>

{

MyControl myControl = d as MyControl;

if (myControl != null && myControl._tb != null)

{

myControl._tb.Text = e.NewValue.ToString();

}

})

)

);

 

 

public MyControl()

{

this.DefaultStyleKey = typeof(MyControl);

}

 

public override void OnApplyTemplate()

{

base.OnApplyTemplate();

 

// 컨트롤에 들어 있는 TextBlock을 가져온다.

_tb = GetTemplateChild("MyText") as TextBlock;

 

if (_tb !=null)

{

_tb.Text = "커스텀 컨트롤~!";

}

}

}

}

 

 

 

 

 

 

 

이제 Page.xaml에 돌아와서 MyControl을 작성해 보자

 

<UserControl x:Class="CustomControlTest2.Page"

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

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

 

xmlns:my="clr-namespace:CustomControlTest2"

 

Width="400" Height="300">

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

<my:MyControl Text="여기에 글을 작성해보자!!"></my:MyControl>

</Grid>

</UserControl>

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

이번 내용은 실버라이트에서 개체가 중첩되어 있을 때 이벤트가 중첩(버블링, Bubbling)되는 현상을 막기 위한 방법인데요.

두서 없이 작성한 내용이라 저도 무슨 소린지 모르겠네요 - _-;;

중요한 내용은 4~5번 내용을 살펴보시면 이해가 되실거에요.

 

1. XAML 코드

<UserControl x:Class="BubblingEvents.Page"

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

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

Width="400" Height="300">

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

    <Grid x:Name="SubPanel" Margin="28,20,33,26" Background="#FF4084CE" Grid.Row="3">

        <Ellipse x:Name="Ellipse1" Margin="47,48,129,43" Stroke="#FF000000">

            <Ellipse.Fill>

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

                    <GradientStop Color="#FF0D4C07"/>

                    <GradientStop Color="#FF239E16" Offset="1"/>

                </LinearGradientBrush>

            </Ellipse.Fill>

        </Ellipse>

        <Ellipse x:Name="Ellipse2" Margin="146,79,61,43" Stroke="#FF000000">

            <Ellipse.Fill>

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

                    <GradientStop Color="#FF490B68"/>

                    <GradientStop Color="#FFF56DFD" Offset="1"/>

                </LinearGradientBrush>

            </Ellipse.Fill>

        </Ellipse>

    </Grid>

 

<TextBlock x:Name="Output" HorizontalAlignment="Left" VerticalAlignment="Top"/>

</Grid>

</UserControl>

 

 

 

 

2. C# Code

 

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Input;

 

namespace BubblingEvents

{

public partial class Page : UserControl

{

private Int16 _sequence = default(Int16);

public Page()

{

InitializeComponent();

 

InitHandlers();

}

 

private void InitHandlers()

{

this.MouseLeftButtonDown += new MouseButtonEventHandler(MouseLeftClickHandler);

this.SubPanel.MouseLeftButtonDown += new MouseButtonEventHandler(MouseLeftClickHandler);

this.Ellipse1.MouseLeftButtonDown += new MouseButtonEventHandler(MouseLeftClickHandler);

this.Ellipse2.MouseLeftButtonDown += new MouseButtonEventHandler(MouseLeftClickHandler);

}

 

void MouseLeftClickHandler(Object sender, MouseButtonEventArgs e)

{

Trace((sender as FrameworkElement).Name);

}

 

private void Trace(String name)

{

this.Output.Text = String.Format("[{0}] {1}\n{2}", ++_sequence, name, this.Output.Text);

}

}

}

 

3. 버블링이 발생한다

(클릭순서 1. 파란배경, 2 녹색원, 3보라원)

 

 

4. 버블링 제거 코드

Ellipse를 포함하고 있는 Grid의 이벤트에서만 별도로 이벤트를 작성해 준다

 

private void InitHandlers()

{

this.MouseLeftButtonDown += new MouseButtonEventHandler(MouseLeftClickHandler);

this.SubPanel.MouseLeftButtonDown += new MouseButtonEventHandler(SubPanel_MouseLeftButtonDown);

this.Ellipse1.MouseLeftButtonDown += new MouseButtonEventHandler(MouseLeftClickHandler);

this.Ellipse2.MouseLeftButtonDown += new MouseButtonEventHandler(MouseLeftClickHandler);

}

 

void SubPanel_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

Trace((sender as FrameworkElement).Name);

e.Handled = true;

}

 

 

5. 상위의 개체가 하위의 개체의 이벤트 전달을 막지 않도록 설정

 

IsHitTestVisable 속성을 이용하여 사용자의 마우스나 키보드 등의 입력이 전달되는 것을 막지 않을 수 있다.

…

 

 

        <Ellipse x:Name="Ellipse2" Margin="146,79,61,43" Stroke="#FF000000" IsHitTestVisible="False">

            <Ellipse.Fill>

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

                    <GradientStop Color="#FF490B68"/>

                    <GradientStop Color="#FFF56DFD" Offset="1"/>

                </LinearGradientBrush>

            </Ellipse.Fill>

        </Ellipse>

    </Grid>

 

<TextBlock x:Name="Output" HorizontalAlignment="Left" VerticalAlignment="Top" IsHitTestVisible="False" />

…

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

 

DispatcherTimer 를 이용해 시계를 만들어보도록 한다.

먼저 using으로 using System.Windows.Threading; Namespace를 추가해야 하고 다음을 따라 진행한다

1. Xaml

    

<UserControl x:Class="ClockSample.Page"

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

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

Width="400" Height="300">

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

<TextBlock FontSize="60" TextAlignment="Center" VerticalAlignment="Center" x:Name="tbTime" Text="12:00:00" />

</Grid>

</UserControl>

 

 

1. Code

 

public Page()

{

InitializeComponent();

 

 

TimerSetting();

}

 

private void TimerSetting()

{

DispatcherTimer timer = new DispatcherTimer()

{

Interval = TimeSpan.FromMilliseconds(50)

};

 

timer.Tick += new EventHandler(timer_Tick);

 

timer.Start();

}

 

void timer_Tick(object sender, EventArgs e)

{

this.tbTime.Text = DateTime.Now.ToString("HH:mm:ss");

}

 

1. 다음과 같이 시계가 잘 작동한다.

    

   

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Silverlight에서 네비게이션(메뉴에 따른 페이지 호출?)을 작성하기 위해 넘겨온 값에 따라 시작되는 비주얼을 지정하면 된다.

   

그를 위해 다음과 같은 코드가 필요하다.

 

Private void Application_Startup(object sender, StartupEventArgs e)

{

String machineid = e.InitParams["machineid"];

this.RootVisual = new Page(machineid);

}

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.