silverlight3アプリ:sliderを使用して画像を拡大縮小できますか？

Question

これまでデザイン系のソフトしか使用したことがありません。
使用ソフトはExpression Blend3(Studio3)です。

｢sliderを使用して画像を縦横比を維持したまま拡大･縮小する方法｣が
silverlight3アプリケーションで可能だとは思うのですが、

極力blend3のみを使用してxamlで書き出す方法があるのか
ご教授の程よろしくお願いします。

Answer 1

Imageで画像を表示し、Imageコントロールのプロパティパネル内の「変換」のRenderTransformのXとYにSilder

のValueプロパティをデータバインディングさせるのではどうでしょうか？

RenderTransformのXとYに同値をバインドさせれば縦横比は維持したまま拡大・縮小が可能です。

---

★良い回答には回答済みマークを付けよう！ kazuto Blog : http://blogs.wankuma.com/kzt/

Answer 2

早速ためさせて頂きました。

silverlightアプリでは動きませんでしたが、WPFアプリでは動きました。
(こちらの操作が悪いのかもしれないので、
やってみたら出来るよという事がありましたら、ご一報頂けますか？)

silverlightとWPFで出来ることに差があると知識として知っていましたが
実際にどんなところが影響を受けるのか勉強になりました。


まだ解決と言うには、程遠いのですが足がかりを見つけました。

silverlight入門という本にプログラムの記述がありました。(同じように悩んでいた同僚が買ってきました)
プログラムは描けないので
Blendでどの操作をするとこのプログラムが書けるのか試行錯誤しているところです。

また他にも方法があるようでしたらアドバイスを頂けると嬉しいです。
ご回答ありがとうございました。

Answer 3

データクラスを作成し、SliderのValueプロパティとバインドし、変更があった場合にImageのRenderTransformのXとYを操作するのが簡単かもしれません。

WPFでの説明で回答としてしまい、申し訳御座いませんでした。

---

★良い回答には回答済みマークを付けよう！ kazuto Blog : http://blogs.wankuma.com/kzt/

Answer 4

すいません。
こちらのレベルが低くデータクラス自体が何かもわからない状況です。
プログラムの基礎からして知らないのに質問してしまいました。

せっかく教えて頂いたのに､試すことも出来ず申し訳ありません。

Expression Blendは扱い易いと聞きましたが､それなりに知識がないと難しいみたいですね。(ToT)
和人様にはお付き合い頂きありがとうございました。

どなたか理解できる方は、お試し頂きよろしければ続きにコメントをください。
よろしくお願いします。

Answer 5

おそらく

<Image ... >
    <ScaleTransform ScaleX="{Binding ElementName=slider, Path=Value}"/>
</Image>

こんな感じで ScaleTransform の方に Binding があるんだと思います。
Silverlight 3 ではこういった書き方はできません。

<Image ... >
    <ScaleTransform x:Name="imageScale" ScaleX="1"/>
</Image>
<Slider Minimum="0" Maximum="10" SmallChange="1" LargeChange="3"
    Value="{Binding ElementName=imageScale, Path=ScaleX, Mode=TwoWay}"/>

こんな風に Slider の方から Mode=TwoWay で ScaleTransform にバインドするようにしてあげれば動作します。
申し訳ないですが、Blend はほとんど使ってないので Blend での操作手順はわかりませんが、やってみてください。

技術的な詳細は
http://social.msdn.microsoft.com/Forums/ja-JP/silverlightgeneralja/thread/c8166594-1d0e-43f7-b01f-128612788719
の私の回答を見てみてください。

ちなみに、来年出ると言われている Silverlight 4 では FrameworkElement だけでなく DependencyObject であればデータバインディングできるようになるらしいので、ScaleTransform の側から Binding できるようになるはずです。

---

青柳 臣一 (Shinichi Aoyagi)

Answer 6

参考までに。Silverlight 4だと簡単にできるようになります。Expression Blend Preview for .NET 4を利用して、Image側のScaleTransformのX, Yそれぞれのプロパティに対して、[Data Binding]を設定し、[Create Data Binding]のダイアログで、
Element Propertyから、
Scene elements 側で　スライダーのオブジェクトを選択し、
Propeties側で Value
を選択し、[OK]を押します。

例：

<Image x:Name="myImage" Margin="183,44,197,0" Source="Jellyfish.jpg" Stretch="UniformToFill" Height="172" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5">
  <Image.RenderTransform>
  <TransformGroup>
    <ScaleTransform ScaleX="{Binding Value, ElementName=slider}" ScaleY="{Binding Value, ElementName=slider}"/>
    </Image.RenderTransform>
</Image>
<Slider x:Name="slider" Height="62" Margin="74,0,117,45" VerticalAlignment="Bottom" Minimum="1" Maximum="3" LargeChange="0.5"/>

---

この投稿は現状のまま何の保証もなく掲載しているものであり、何らかの権利を許諾するものでもありません。コミュニティにおけるマイクロソフト社員による発言やコメントは、マイクロソフトの正式な見解またはコメントではありません。詳しくは http://www.microsoft.com/japan/communities/msp.mspx をご覧ください。

Answer 7

青柳さまへ
ご回答ありがとうございました。

早速､試して・・・とBlendの操作は置いといて
完成品を作ってみようと､やり始めたのですが
なにぶん基礎さえも出来ていないのでxamlに入れるのかxaml.csに入れるのか
さえも解りませんでした。

見当をxamlにつけ色々やってはみましたが上手くはいかず・・
きちんとルールを学んでから試したいと思います。

なので
どなたか試してみて｢上手くいった方｣は1行でもかまわないので
コメントを入れてください。

青柳様のコメントを
回答としてマークしておきます。

よろしくお願いします。

Answer 8

大西様へ
情報ありがとうございます。

使い勝手があがるのはとても嬉しいです。
(使うほうが頭がよくないとダメですが・・)

Expression Studio4にも期待しています。
また商品がでたらセミナーなどでお世話になると思いますので
よろしくお願いします。

Answer 9

データクラスと言う抽象的な良い方をしてしまい申し訳御座いませんでした。

Blendのみとの事なのでデータクラスについては忘れて下さい。
 

返信に至るまでに青柳さんと大西さんからの回答が御座いましたのでそれに補足させて下さい。

青柳さんの場合ですとSilverlight3で使用可能な方法になりますが、Silverlight３ではマルチデータバインドはサポートされていないので、

ImageのScaleTransformのScaleX、ScaleYそれぞれにSliderが必要になってしまいます。

123abc123abcさんの要望である「縦横比を維持したまま」の場合ですとScaleXとScaleYを同時に変更する必要があるので「１つのSliderを使用する」場合ですと残念ですが実現出来ないかと思います。

また、BlendではScaleXなどに名前を付ける方法が無い（と認識しています）ので直接XAMLを編集する必要（Blendのみで出来ますが、XAMLの知識が必要になります）があります。

Blendのデザイナのみで完結するのは少し難しい課題かなと思っています。

Silverlight4になれば大西さんのサンプルの用にバインドが可能になるので、Silverlight4の採用が現段階で可能であるならば最善方法かと思います。

具体的な解決策の提示ではなく申し訳御座いません。

---

★良い回答には回答済みマークを付けよう！ kazuto Blog : http://blogs.wankuma.com/kzt/

Answer 10

和人様へ
情報ありがとうございます。

Blend3　xamlのみで表現できればと思っていたのですが、
なかなか難しいようですね。

色々ご意見を頂きましたので、
これらを基にプログラマーさんと相談してみます。

和人様、青柳様、大西様
ありがとうございました。