'Silverlight2'에 해당되는 글 3건

  1. 2009.06.11 ImageButton 만들기
  2. 2009.04.06 LINQ (Language Integrated Query)
  3. 2009.03.30 Silverlight with WEB
Tech/Silverlight2009. 6. 11. 16:37
참고 자료 _ [강좌] ImageButton 만들기, Dependency Property의 이해

1. Blend를 통한 Image 버튼 만들기
2. 동적으로 Image 변경이 가능한 ImageButton 클래스 만들기
3. ImageButton 클래스를 사용하기


1. Blend를 통한 image 버튼 만들기

- 참고 자료에 있는 강좌를 보면 Blend를 사용해 손쉽게 Image 버튼을 생성할 수 있다. 생성한 코드를 살펴보면 다음과 같다.

Page.xaml
<UserControl.Resources>
<ControlTemplate x:Key="ImageButtonTemplate" TargetType="Button">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Unfocused"/>
<vsm:VisualState x:Name="Focused"/>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="NormalButton" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="OverButton" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="NormalButton" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="PressedButton" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Image x:Name="NormalButton" Source="Normal.png" Stretch="Fill" />
<Image x:Name="OverButton" Source="Over.png" Stretch="Fill" Visibility="Collapsed" />
<Image x:Name="PressedButton" Source="Pressed.png" Stretch="Fill" Visibility="Collapsed" />
</Grid>
</ControlTemplate>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White">
<Button Template="{StaticResource ImageButtonTemplate}" Width="300" Height="100" />
</Grid>

- 위 코드를 보면 버튼의 각각의 상태를 정의할때 StoryBoard를 사용하는 것을 알 수 있으며, 차후 버튼에 효과를 줄때 해당 StordyBoard를 사용하면 된다.


2. 동적으로 Image 변경이 가능한 ImageButton 클래스 만들기

- Button 클래스를 상속받은 클래스를 만든다. (ImageButton.cs)
- xaml 에서 Property를 설정하면 동적으로 변경될 수 있게 DependencyProperty를 추가한다.
(버튼 상태에 따른 이미지를 설정할 수 있는 Property를 각각 NormalImageSource, OverImageSource, PressedImageSource 라고 이름을 짓는다.)

NormalImageSource DenpendencyProperty를 추가한 ImageButton.cs의 소스는 다음과 같다.

ImageButton.cs
public class ImageButton : Button
{
#region NormalImageSource
public ImageSource NormalImageSource
{
get { return (ImageSource)GetValue(NormalImageSourceProperty); }
set { SetValue(NormalImageSourceProperty, value); }
}

public static readonly DependencyProperty NormalImageSourceProperty =
DependencyProperty.Register(
  "NormalImageSource",
  typeof(ImageSource),
  typeof(ImageButton),
  null);
#endregion NormalImageSource

...

}

- OverImageSource, PressedImageSource도 같은 형태로 추가하면 xaml에서 사용할 수 있는 ImageButton 클래스의 제작이 끝난다.


3. ImageButton 클래스를 사용하기

- Page.xaml에서 사용하고 있는 Button을 ImageButton으로 바꾸기 위해서는 우선 xmlns를 추가해야 한다.
xmlns:test="clr-namespace:SilverlightApplication1;assembly=SilverlightApplication1"

- 사용하고 있는 ControlTemplate을 수정한다.
<ControlTemplate x:Key="ImageButtonTemplate" TargetType="test:ImageButton">
...
<Image x:Name="NormalButton" Source="{TemplateBinding NormalImageSource}" Stretch="Fill" />
<Image x:Name="OverButton" Source="{TemplateBinding OverImageSource}" Stretch="Fill" Visibility="Collapsed" />
<Image x:Name="PressedButton" Source="{TemplateBinding PressedImageSource}" Stretch="Fill" Visibility="Collapsed" />

- Button을 ImageButton으로 변경하고 각각의 상태에 따른 이미지를 설정한다.
<test:ImageButton x:Name="TestBtn" Template="{StaticResource ImageButtonTemplate}" Width="300" Height="100" NormalImageSource="Normal.png" OverImageSource="Over.png" PressedImageSource="Pressed.png" />

- 위에 정의된 Button의 이미지를 코드 내부에서 바꾸려면 다음과 같이 하면 된다.
TestBtn.NormalImageSource = new BitmapImage(new Uri("Normal.png", UriKind.Relative));

'Tech > Silverlight' 카테고리의 다른 글

Deep Zoom Composer 에서 개별 이미지 요소 정보 얻기  (0) 2009.08.03
Silverlight 3 _ 3D  (0) 2009.06.18
ImageButton 만들기  (0) 2009.06.11
Silverlight2 Unit Test  (0) 2009.05.19
Rhino Mocks in Silverlight  (2) 2009.05.15
Posted by 자이닉스 일이

댓글을 달아 주세요

Tech/Silverlight2009. 4. 6. 09:02

1. What is LINQ?
2. LINQ to Objects
3. LINQ to XML


1. What is LINQ?

- LINQ를 사용하면 C#또는 비쥬얼 베이직 코드를 사용하여 서로 다른 형식의 데이터를 쿼리할 수 있다.
- 작업하는 데이터 타입과 상관없이 단일하고 일관된 쿼리 구문을 제공해준다.
- Deferred Query Execution(지연된 쿼리 실행) : 쿼리를 LINQ를 통해 전개할 때 쿼리는 실제로 실행되기 이전에 평가되지 않는다.
- Silverlight는 LINQ to JSON, LINQ to Objects, LINQ to XML을 지원한다.


2. LINQ to Objects

- LINQ to Objects는 매니지드 코드에서 객체들의 컬렉션을 대상으로 쿼리를 생성할 수 있게 해준다.

public class AddressData
{
 public string name;
 public string phoneNumber;
 public string address;
}

// 이름이 xinics인 사람의 AddressData를 얻기
List<AddressData> addressDatas;
var xinicsAddressData =
from addressData in addressDatas
where addressData.name == "xinics"
select addressData;


3. LINQ to XML

- LINQ to XML 또는 XLinq는 복잡한 XML API에 의존할 필요 없이 쉽게 XML 데이터를 생성하고 쿼리할 수 있게 해준다.

AddressData.xml
<AddressDatas>
<AddressData>
<Name>...</Name>
<PhoneNumber>...</PhoneNumber>
<Address>...</Address>
</AddressData>
</AddressDatas>

// 이름이 xinics인 사람의 AddressData를 얻기
XElement element = XElement.Load("AddressData.xml");
var xinicsAddressData =
from addressData in element.Descendants("AddressData")
where (string)addressData.Element("Name") == "xinics"
select new AddressData
{
Name = addressData.Element("Name").Value,
PhoneNumber = addressData.Element("PhoneNumber").Value,
Address = addressData.Element("Address").Value
};

'Tech > Silverlight' 카테고리의 다른 글

Rhino Mocks in Silverlight  (2) 2009.05.15
DataGrid 사용법  (0) 2009.04.06
LINQ (Language Integrated Query)  (0) 2009.04.06
Silverlight with WEB  (0) 2009.03.30
Loading Dynamic XAPs and Assemblies  (0) 2009.03.19
Posted by 자이닉스 일이

댓글을 달아 주세요

Tech/Silverlight2009. 3. 30. 21:07
Silverlight 어플리케이션이 WEB과 어떤 연관을 가지고 있는지 알아보자.

1. Silverlight Application을 HTML 페이지에 삽입
2. Background, IsWindowless
3. OnLoad, OnError
4. HTML DOM과 상호 작용하기
4.1. Javascript로 Silverlight 코드 사용하기
4.2. Silverlight로 Javascript 코드 사용하기


1. Silverlight Application을 HTML 페이지에 삽입

- Silverlight는 브라우저의 플러그인 형태로 만들어졌다. 하지만 배포 방식에 따라 브라우저 별로 각각 다르게 사용된다.
 Microsoft Internet Explorer  Active-X 
 Safari   Webkit 
 Other  Netscape Plug-in 


a. ASP.NET을 이용한 방법
- Visual Studio 2008을 이용해 Silverlight Application을 생성하면 자동으로 생성되는 aspx 페이지에 Silverlight Application이 삽입되어 있는 것을 확인할 수 있다.
<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
    TagPrefix="asp" %>

<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/SilverlightHTML.xap" MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />


b. <object> 태그를 사용하여 생성
<object data="data:application/x-silverlight-2,"  type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/SilverlightHTML.xap"/>
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="2.0.31005.0" />
<param name="autoUpgrade" value="true" />
</object>


c. Silverlight.js를 사용하여 생성
- Silverlight SDK에서 제공되는 Silverlight.js 파일을 이용하면 편리하게 Silverlight Application을 생성할 수 있다.
<div id="silverlightControlHost" />
<script language="javascript">
Silverlight.createObjectEx({
source: "ClientBin/SilverlightHTML.xap",
parentElement: document.getElementById("silverlightControlHost"),
id: "mySilverilghtControl",
properties: {
width: "100%",
height: "100%",
version: "2.0"
},
events: {}
});
</script>



2. Background, IsWindowless

- Silverlight에서 Background의 속성을 'transparent'로 설정하고 IsWindowless의 속성을 'true'로 설정하면 Silverlight Application의 배경이 설정되지 않는 빈 영역에 HTML의 내용이 그대로 보여진다. (asp.net 페이지에서 사용하는 속성 이름은 PluginBackground, Windowless이다.)

<Canvas Width="200" Height="200">
<Canvas Width="100" Height="100" Canvas.Left="50" Canvas.Top="50" Background="BlueViolet"/>
</Canvas>

<asp:Silverlight PluginBackground="Transparent" Windowless="true" ... />

- Transparent를 통해 실제 HTML 페이지가 보여지는 영역도 Silverlight Application의 영역으로 설정되어 마우스 오른쪽 클릭을 하면 Silverlight 메뉴가 나타난다.


3. OnLoad, OnError

- Silverlight 플러그인은 OnLoad와 OnError 이벤트를 가지고 있다.

OnLoad _ Silverlight Application이 로드되자마자 발생하는 이벤트
OnError _ Silverlight Application에서 예외가 처리되지 않은 경우에 발생

OnLoad 이벤트는 UserControl의 생성자가 실행된 이후에 발생한다.

테스트 결과 OnLoad 이벤트에서 Source가 undefined로 전달된다. 따라서 Silverlight Application에 직접 접근하기 위해서는 OnLoad 이벤트에서 전달되는 sender를 사용한다. sender.getHost().content를 통해 접근 가능


4. HTML DOM과 상호 작용 하기

- System.Windows.Browser 네임스페이스를 통해 HTML DOM과 상호작용이 가능하다.

4.1과 4.2의 내용은 HTML BROWSER INTEGRATION을 참조

'Tech > Silverlight' 카테고리의 다른 글

DataGrid 사용법  (0) 2009.04.06
LINQ (Language Integrated Query)  (0) 2009.04.06
Silverlight with WEB  (0) 2009.03.30
Loading Dynamic XAPs and Assemblies  (0) 2009.03.19
USING STARTUP PARAMETERS WITH SILVERLIGHT  (0) 2009.03.18
Posted by 자이닉스 일이

댓글을 달아 주세요