なんて、しばやんが甘えてくるので作ってみた。
まずは、ぱぱっとラフを描きました。
つぎに、aiでちょっと丁寧に。
でもって、blendに流しこみます。
aiや、psdはインポートすると、xamlになります。
ちなみにテキストはパス化されてしまいますが、このへんは必要であればBlendで書きなおすといいと思います。
で、サイズと構造を調整。
こんなかんじ。
すると、、、
しばやんめっっ！
というわけで、色をBlendで反転。
ふつーにプロパティパネルのFillとかをいじります。
すると、こんなかんじ。
ついでにWP7のプロジェクトに乗っけてみました。
うん、いい感じですねー。
せっかくなので、Canvasでくくったコンパスのパスデータを載せておきます。
これをGridなりなんなりに書くとコンパスが表示されます。
針と盤はCanvasで分けているので電子コンパスの情報とって回転させやすいと思います。
SilverlightとWP7では表示できますが、wpfは知りません。
それにしても、デザインが苦手とかやりたがらないプログラマと、xamlなんて全く読めない触れないデザイナが世の中にはいっぱいいるんだろうなぁ。
と思いつつ、うまく橋渡しできないかなぁーなんて思います。
compass.xaml
<Canvas x:Name="compass" d:LayoutOverrides="HorizontalAlignment" Width="420" Height="420"> <Canvas x:Name="compass_base" Height="416" Canvas.Left="11" Canvas.Top="4" Width="396"> <Path Data="F1M371.5986,295.8208C371.5986,304.5548,364.5176,311.6358,355.7846,311.6358C347.0496,311.6358,339.9686,304.5548,339.9686,295.8208C339.9686,287.0868,347.0496,280.0058,355.7846,280.0058C364.5176,280.0058,371.5986,287.0868,371.5986,295.8208" Fill="White" Height="43.643" Canvas.Left="175.954" Stretch="Fill" Width="43.642" UseLayoutRounding="False"/> <Path Data="M480.4922,438.9082C480.4922,509.1992,423.5112,566.1802,353.2202,566.1802C282.9292,566.1802,225.9472,509.1992,225.9472,438.9082C225.9472,368.6182,282.9292,311.6362,353.2202,311.6362C423.5112,311.6362,480.4922,368.6182,480.4922,438.9082z" Fill="Black" Height="396" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="White" StrokeThickness="32" StrokeMiterLimit="10" StrokeLineJoin="Miter" Canvas.Top="20.186" Width="396" UseLayoutRounding="False"/> <Path Data="F1M285.1729,438.9092L338.1809,423.8702L353.2199,370.8612L367.1299,424.9982L421.2669,438.9092L367.8809,453.5692L353.2199,506.9542L337.8059,454.3212z" Fill="White" Height="187.651" Canvas.Left="103.843" Stretch="Fill" Canvas.Top="124.028" Width="187.652" UseLayoutRounding="False"/> <Path Data="F1M318.0469,403.7373L353.2189,423.3623L388.3909,403.7373L367.5999,438.9093L388.3909,474.0803L353.2189,454.0643L318.0489,474.0803L337.2849,438.9083z" Fill="White" Height="96.585" Canvas.Left="149.327" Stretch="Fill" Canvas.Top="169.516" Width="96.586" UseLayoutRounding="False"/> <Canvas x:Name="TextBlock" Height="300" Canvas.Left="188" Canvas.Top="69" Width="20"> <Path Data="F1M360.102575,347.103L356.2432,347.103L350.071325,335.94675L350.071325,347.103L346.39945,347.103L346.39945,331.103L351.321325,331.103L356.4307,340.274875L356.4307,331.103L360.102575,331.103L360.102575,347.103" Fill="#FFC9CACA" Height="16" Canvas.Left="2.331" Stretch="Fill" Canvas.Top="-11.5" Width="14" UseLayoutRounding="False"/> <Path Data="F1M352.85495,547.621875C351.6362,547.621875,350.558075,547.496875,349.6362,547.2625C348.6987,547.028125,347.839325,546.73125,347.04245,546.371875L347.04245,542.575L347.41745,542.575C348.214325,543.2625,349.089325,543.778125,350.058075,544.153125C351.026825,544.528125,351.964325,544.7,352.8862,544.7C353.10495,544.7,353.41745,544.684375,353.79245,544.621875C354.16745,544.575,354.464325,544.496875,354.6987,544.3875C354.97995,544.2625,355.214325,544.090625,355.401825,543.871875C355.589325,543.653125,355.6987,543.371875,355.6987,543.0125C355.6987,542.60625,355.526825,542.278125,355.214325,542.028125C354.901825,541.778125,354.526825,541.60625,354.089325,541.48125C353.54245,541.340625,352.964325,541.2,352.339325,541.075C351.714325,540.95,351.1362,540.79375,350.60495,540.60625C349.370575,540.16875,348.47995,539.590625,347.9487,538.840625C347.401825,538.10625,347.1362,537.184375,347.1362,536.059375C347.1362,534.575,347.7612,533.371875,349.04245,532.434375C350.308075,531.5125,351.8862,531.04375,353.79245,531.04375C354.72995,531.04375,355.683075,531.153125,356.620575,531.340625C357.558075,531.528125,358.41745,531.79375,359.16745,532.10625L359.16745,535.7625L358.808075,535.7625C358.214325,535.2625,357.47995,534.825,356.6362,534.48125C355.776825,534.1375,354.901825,533.95,353.995575,533.95C353.6362,533.95,353.3237,533.98125,353.04245,534.028125C352.7612,534.090625,352.47995,534.184375,352.16745,534.309375C351.91745,534.434375,351.6987,534.60625,351.5112,534.825C351.3237,535.059375,351.245575,535.309375,351.245575,535.590625C351.245575,535.996875,351.3862,536.325,351.683075,536.559375C351.964325,536.809375,352.526825,537.0125,353.35495,537.2C353.8862,537.325,354.41745,537.45,354.91745,537.559375C355.41745,537.684375,355.9487,537.840625,356.5112,538.028125C357.60495,538.434375,358.433075,538.98125,358.97995,539.653125C359.5112,540.340625,359.79245,541.23125,359.79245,542.325C359.79245,543.91875,359.16745,545.2,357.91745,546.16875C356.66745,547.1375,354.97995,547.621875,352.85495,547.621875L352.85495,547.621875" Fill="#FFC9CACA" Height="17" Canvas.Left="3.331" Stretch="Fill" Canvas.Top="288.943" Width="13" UseLayoutRounding="False"/> </Canvas> <Path Data="M353.2188,346.8564L353.2188,327.0224" Height="44.137" Canvas.Left="196.635" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="White" StrokeThickness="1" StrokeMiterLimit="10" StrokeLineJoin="Miter" Canvas.Top="47.643" Width="2.101" UseLayoutRounding="False"/> <Path Data="M417.8535,374.3477L431.8785,360.3227" Height="29.364" Canvas.Left="286.189" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="White" StrokeThickness="1" StrokeMiterLimit="10" StrokeLineJoin="Miter" Canvas.Top="100.096" Width="29.364" UseLayoutRounding="False"/> <Path Data="M445.4268,438.9092L465.2608,438.9092" Height="2.214" Canvas.Left="324.223" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="White" StrokeThickness="1" StrokeMiterLimit="10" StrokeLineJoin="Miter" Canvas.Top="216.766" Width="46.476" UseLayoutRounding="False"/> <Path Data="M418.0771,503.6807L432.1011,517.7047" Height="34.246" Canvas.Left="286.498" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="White" StrokeThickness="1" StrokeMiterLimit="10" StrokeLineJoin="Miter" Canvas.Top="306.567" Width="34.246" UseLayoutRounding="False"/> <Path Data="M353.2197,550.4814L353.2197,530.6474" Height="45.975" Canvas.Left="196.591" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="White" StrokeThickness="1" StrokeMiterLimit="10" StrokeLineJoin="Miter" Canvas.Top="343.764" Width="2.189" UseLayoutRounding="False"/> <Path Data="M274.3696,517.7412L288.3946,503.7162" Height="34.197" Canvas.Left="74.711" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="White" StrokeThickness="1" StrokeMiterLimit="10" StrokeLineJoin="Miter" Canvas.Top="306.616" Width="34.197" UseLayoutRounding="False"/> <Path Data="M241.0518,438.9072L260.8858,438.9072" Height="1.976" Canvas.Left="29.729" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="White" StrokeThickness="1" StrokeMiterLimit="10" StrokeLineJoin="Miter" Canvas.Top="216.882" Width="41.475" UseLayoutRounding="False"/> <Path Data="M288.228,374.2051L274.203,360.1801" Height="31.697" Canvas.Left="76.982" StrokeStartLineCap="Flat" Stretch="Fill" StrokeEndLineCap="Flat" Stroke="White" StrokeThickness="1" StrokeMiterLimit="10" StrokeLineJoin="Miter" Canvas.Top="97.566" Width="31.697" UseLayoutRounding="False"/> </Canvas> <Canvas x:Name="compass_nail" Height="301" Canvas.Left="190" Canvas.Top="71" Width="38"> <Path Data="F1M366.373,438.7822L353.218,329.9072L340.064,438.7822z" Fill="#FFE60013" Height="150.397" Canvas.Left="0.286" Stretch="Fill" Width="35.874" UseLayoutRounding="False"/> <Path Data="F1M340.0645,439.0322L353.2195,547.9072L366.3735,439.0322z" Fill="#FF898989" Height="150.397" Canvas.Left="0.286" Stretch="Fill" Canvas.Top="150.57" Width="35.874" UseLayoutRounding="False"/> <Path Data="F1M339.9688,438.7822C339.9688,431.4642,345.9008,425.5322,353.2188,425.5322C360.5368,425.5322,366.4688,431.4642,366.4688,438.7822C366.4688,446.0982,360.5368,452.0322,353.2188,452.0322C345.9008,452.0322,339.9688,446.0982,339.9688,438.7822" Fill="Black" Height="37.254" Stretch="Fill" Canvas.Top="131.943" Width="37.255" UseLayoutRounding="False"/> </Canvas> </Canvas>
