2008年6月26日

WPF Virtual Earth Control

　昨日書いた「Virtual Earth on WPF」、SP1 Betaもインストールできたので さっそく試してみました。あっさり動いたー。Virtual Earthコントロール以外にテスト用のプロジェクトが一緒のソリューションになってるので実行するだけで以下のような画面が見れます。当然ながらきちんとWPFのコントロールがマップに追加できてるー。また、かなり限定的ですがJavaScriptで書かれたMap Controlのクラス群や関数がC#でラップされてます。

Virtual Earth Control Test

　動かしただけで今日がもう終わりそう。今後も注目です。

posted @ 23:57 | Feedback (216)

Windows Media PlayerのグラスボタンをXAMLで

　Windows Media Player や Windows Live フォト ギャラリーなどの半透明っぽいクリアなボタンが作れないかなと帰宅してからXAMLいじってました。XAMLでかなりのことまでできるんですよねー、忘れてました。

Windows Media Player 

　ゼロから作れるはずもなく参考にしたサイトは以下のふたつ。画像検索でググりました。

 

　できあがりは、こちら。どうでしょう？　立体感が少し足りない？

WPFでボタン

　ひとつめのサイトのXAMLを理解しながらという形で作りました。コントロールの構成は同じでパラメータの変更、削除、追加が主ですね。ふたつめのサイトは結果的にほとんど参考にしてないのだけど、クオリティは高いと思います。どちらもボタンの上側の少し円弧に光っているところはPathGeometryというのを使ってます。こんなん書けるかー！！　微妙に左右対称じゃなかったのでわかる範囲で修正してます。そのPathGeometry以外はEllipseの組み合わせなので人手で書けないことはないですね。

　でもこれボタンにするには、ボタンの上にマウスポインタをあわせたとき、ボタンが押されたとき、ボタンが無効のときのパターンを作らないとなんだぜ……。大きさが絶対指定なのも難点ですね。

　以下これのXAMLです。これは直接Canvasに書いてますが、ふたつめの参考サイトではデザインをリソースとして記述してButtonに適用してます。その方がスマートですね。

<Canvas Width="218" Height="218">
    <Ellipse Width="218" Height="218" Fill="#FF00089A" x:Name="ballBack1"/>
    <Ellipse Width="208" Height="208" Canvas.Left="5" Canvas.Top="5">
        <Ellipse.Fill>
            <RadialGradientBrush GradientOrigin="0.5,1.2">
                <RadialGradientBrush.RelativeTransform>
                    <TransformGroup>
                        <ScaleTransform CenterX="0.5" CenterY="0.45" ScaleX="1.2" ScaleY="0.6"/>
                        <SkewTransform AngleX="0" AngleY="0" CenterX="0.5" CenterY="0.5"/>
                        <RotateTransform Angle="0" CenterX="0.5" CenterY="0.5"/>
                        <TranslateTransform X="-0.004" Y="0.195"/>
                    </TransformGroup>
                </RadialGradientBrush.RelativeTransform>
                <GradientStop Color="#FF8AFFFF" Offset="0.22"/>
                <GradientStop Color="#E025A7F4" Offset="0.47"/>
                <GradientStop Color="#D00060D0" Offset="0.65"/>
                <GradientStop Color="#FF0008A0" Offset="1"/>
            </RadialGradientBrush>
        </Ellipse.Fill>
    </Ellipse>
    <Ellipse Width="208" Height="208" StrokeThickness="5" Canvas.Left="5" Canvas.Top="5">
        <Ellipse.Stroke>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#EFFFFFFF" Offset="0"/>
                <GradientStop Color="#7F8DFFFF" Offset="1"/>
                <GradientStop Color="#8F8AFFFF" Offset="0.45"/>
                <GradientStop Color="#20FFFFFF" Offset="0.18"/>
                <GradientStop Color="#25FEFEFE" Offset="0.8"/>
            </LinearGradientBrush>
        </Ellipse.Stroke>
    </Ellipse>
    <Path Opacity="0.72" Width="204" Height="102" Stretch="Fill" Canvas.Left="7" Canvas.Top="5" 
          Data="M214,296 
                C
                213,243 253,197 314,195
                374,197 413,243 413,296
                413,309 374,290 314,290
                253,290 213,309 214,296 z">
        <Path.Fill>
            <RadialGradientBrush GradientOrigin="0.5,0.9">
                <RadialGradientBrush.RelativeTransform>
                    <TransformGroup>
                        <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.6" ScaleY="3.6" />
                    </TransformGroup>
                </RadialGradientBrush.RelativeTransform>
                <GradientStop Color="#FFFFFFFF" Offset="1"/>
                <GradientStop Color="#A0FFFFFF" Offset="0.55"/>
                <GradientStop Color="#00000000" Offset="0"/>
            </RadialGradientBrush>
        </Path.Fill>
    </Path>
    <Label Canvas.Top="10" Width="218" Height="218"  Content="塊" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="130" FontWeight="ExtraBold">
        <Label.Foreground>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#E0F0F0F0" Offset="0"/>
                <GradientStop Color="#FFFFFFFF" Offset="0.1"/>
                <GradientStop Color="#FFFFFFFF" Offset="0.55"/>
                <GradientStop Color="#E0C0C0C0" Offset="1"/>
            </LinearGradientBrush>
        </Label.Foreground>
    </Label>
</Canvas>

posted @ 22:36 | Feedback (19)