右手の親指を各軸の正方向に向けた場合、残りの指を握る方向が正の回転方向です。
Perspective 3DのX軸、Y軸、Z軸と正の回転の方向
特徴
SilverLight xapファイルの置き場は、「App_Data」フォルダに配置すると、アクセスできなくなります。
SilverLight で作成したアプリケーションも、アクセスするデータを「App_Data」フォルダに配置できない、「App_Data」のデータへアクセスすると、Not Found のエラーメッセージが出ます。
最も単純なコンテナ。指定された位置どおりに子の位置が決定される
絶対位置(Left、Top)の指定によりオブジェクトが配置されます。
オブジェクトは下記のように指定します。
<TextBlock Text="Canvasでは、絶対位置(Left, Top)の指定によりオブジェクトが配置されます。" Canvas.Top="0" ></TextBlock>
積み重ね式のコンテナ。垂直または水平方向に順番に配置される
オブジェクトは下記のように指定します。
<StackPanel Orientation="Vertical" Background="LightBlue"> <TextBox Text="垂直方向(Orientation=Vertical)" Margin="5"> </TextBox> </StackPanel>
列と行の定義に従って子を配置可能なコンテナ。HTMLにおける<table>タグと同じ役割 Tableと同じの機能
UserControl を作成すると、下記のようなソースコードが生成されます。
<UserControl xmlns="http://schemas.microsoft.com/client/2007" 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" x:Class="SilverlightApplication1.UserControl1" d:DesignWidth="100" d:DesignHeight="100">
上記のソースコード中の「d:DesignWidth="100" d:DesignHeight="100"」の意味は、デザインモードで強制的に、この値を利用すること。 現状では、試していません、Blend が必要かもしれません
SilverLight コントロールは HTML 言語で Web ページに引用する際に定義した「object」のパラメータによって、コントロールのサイズを設定することができます。
下記のソースコード中の1行目の「width」と「height」によって、設定できます。
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="600" height="100"> <param name="source" value="ClientBin/ImageGalleryAnime.xap"/> <param name="onError" value="onSilverlightError" /> <param name="background" value="white" /> <param name="initParams" value="ImageGalleryNumber=1,ImagePath=/,Height=100,Width=600,IndexWeight=50,TextHeight=20" /> <param name="minRuntimeVersion" value="3.0.40818.0" /> <param name="autoUpgrade" value="true" /> <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration:none"> <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Microsoft Silverlight を入手" style="border-style:none"/> </a> </object>
Visual Studio のテンプレートから作成する際に、.NET FW 3.5のテンプレートしか作成できないですが、下記のHTMLコードで解決できます。
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> <param name="source" value="SilverlightApplication1.xap"/> <param name="onerror" value="onSilverlightError" /> <param name="background" value="white" /> <param name="minRuntimeVersion" value="2.0.31005.0" /> <param name="autoUpgrade" value="true" /> <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;"> <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Microsoft Silverlight を取得" style="border-style: none"/> </a> </object> <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
ここでの「param」によって、SilverLight へ初期化する値を渡すことができます。たとえば、下記サンプルのように、「initParams」を定義して、利用したパラメータを「ImageGalleryNumber=1,ImagePath=Image」のように 「value」に記述します。「,」で複数のパラメータを渡すことができます。
<param name="initParams" value="ImageGalleryNumber=1,ImagePath=Image" />
利用する際は、下記のサンプルのように、「App.xaml.cs」ファイルの「Application_Startup」メソッドに、複数のパラメータを SilverLight のリソースへ渡し、利用上は便利です。もちろん、リソースに入れなくても構いません。
private void Application_Startup(object sender, StartupEventArgs e) { if (e.InitParams != null) { foreach (var item in e.InitParams) { this.Resources.Add(item.Key, item.Value); } } this.RootVisual = new MainPage(); }
下記のようにスレッドを利用します。
private void ImageLeft_MouseEnter(object sender, MouseEventArgs e) { System.Windows.Threading.DispatcherTimer timer = new System.Windows.Threading.DispatcherTimer(); timer.Interval = TimeSpan.FromSeconds(2); timer.Tick += new EventHandler(timer_Tick); timer.Start(); } void timer_Tick(object sender, EventArgs e) { displayImageIndex_--; show(); }
イメージをリソースファイルへ追加する際に、ファイルの拡張子を削除し、Visual Studio が認識できないため、リソースファイルに下記のようなソースコードが生成され、コンパイルができます。 ※従来のようにイメージファイルを追加すると、System.Drawing 名前空間を利用するソースコードが生成され、SilverLightがSystem.Drawingをサポートしませんので、コンパイルができません。
internal static byte[] Left { get { object obj = ResourceManager.GetObject("Left", resourceCulture); return ((byte[])(obj)); } }
下記のように、追加したリソースファイルを呼び出します。
public BitmapImage Convert(object value) { byte[] arr = (byte[])value; MemoryStream str = new MemoryStream(arr); BitmapImage img = new BitmapImage(); img.SetSource(str); return img; }
Silverlight で Style をまとめて適用する
http://d.hatena.ne.jp/griefworker/20090311/1236724248
Projection プロパティを下記のように利用すれば、写真を3D効果ある回転をします。
<Image Margin="379,59,129,54" Name="imageRight" Stretch="Fill" Source="file:///C:/Users/Public/Pictures/Sample Pictures/Forest.jpg"> <Image.Projection> <PlaneProjection x:Name="Projection" RotationX="0" RotationY="100" RotationZ="0" /> </Image.Projection> </Image>
Margin="5":上下左右に5 Margin="5,10":左右に5、上下に10 Margin="10,20,30,40":左に10、上に20、右に30、下に40
Silverlight と JavaScript 、Ajax は同じく、ローカルのファイルをサーバー側へ保存することができません。
古い
//animation.SetValue(Storyboard.TargetPropertyProperty, "(Canvas.Left)");
新しい
animation.SetValue(Storyboard.TargetPropertyProperty, new PropertyPath(Canvas.LeftProperty)); //FrameworkElement new PropertyPath(FrameworkElement.WidthProperty)
注意 上のソースコードで記述するはずなので、上記のソースコードに例外が発生します、下記のソースコードで実装すると、問題がありません。現在どちらが正しいかわかりません。利用する場面が違うかもしれません。
animation.SetValue(Storyboard.TargetPropertyProperty, new PropertyPath("(Canvas.Left)"));
ベクターシェイプ
アンチエイリアシング:
コンピュータの画面に画像を表示する際に、斜め線や曲線などに発生する階段状のギザギザ(ジャギ)を目立たなくする技法。画面は格子状に並んだ点の集まりとしてあらわされるため、図形の中の水平部分と垂直部分以外では、原理的に必ずジャギが発生してしまう。これを目立たなくするために、境界線の周囲に中間色の点を配置する手法をアンチエイリアシングという。低解像度でも滑らかな画像を得ることができるが、画像が多少ぼやけてしまう。
グラデーション:
グラデーションとは、グラフィックデザインの手法のひとつで、ある異なる2色の色や濃淡が滑らかに連続して変化してゆく表現のことである。
クリッピング:
描画を行う際に、 特定の範囲からはみだした部分を表示しないようにする処理のことです。
例えば、ウィンドウの表示領域を超えて図形が描画された場合でも、 図形がウィンドウからはみだすことはなく、ウィンドウの境界で切り取られます。
これは、ウィンドウの表示領域の範囲でクリッピングされているためです。
http://yellow.ribbon.to/~tuotehhou/Sample/ImageGalleryTestPage.html
http://yellow.ribbon.to/~tuotehhou/Sample/ImageGalleryLineSample.html
http://yellow.ribbon.to/~tuotehhou/Sample/ImageGalleryAnimeSample.html