#wp7dev_jp

Windows Phone 用 の デザイン用 Grid が公開されています。The Windows Phone design Grid - Love it!

image

でもね、開発ツールにはスナップ機能がないから、見た目でドットを調整しなければならないので面倒!

... そういえば、Visual Studio にはほかのアイテムの位置に合わせてスナップする機能があるじゃん!ということでこれを逆手にとってデザイン用のガイドを並べてみました。

image

これなかなか便利です。こんな感じでスナップしてくれます。

image

サイズ調整時は、、スナップされるうえに、サイズが数値表示されるので便利。

image

ね。配置するグリッド内にコードをコピーして、デザインが終わったら削除すればいいので、簡単です。

<Grid x:Name="ContentPanel">
    <Grid VerticalAlignment="Bottom" HorizontalAlignment="Left" 
            Height="5">
        <Grid.Resources>
            <Style x:Key="HGrid" TargetType="Rectangle">
            	<Setter Property="Width" Value="25"/>
            	<Setter Property="Fill" Value="DarkRed"/>
            	<Setter Property="HorizontalAlignment" Value="Left"/>
            </Style>
        </Grid.Resources>
        <Rectangle Margin="24,0,0,0" Style="{StaticResource HGrid}" />
        <Rectangle Margin="61,0,0,0" Style="{StaticResource HGrid}" />
        <Rectangle Margin="98,0,0,0" Style="{StaticResource HGrid}" />
        <Rectangle Margin="135,0,0,0" Style="{StaticResource HGrid}" />
        <Rectangle Margin="172,0,0,0" Style="{StaticResource HGrid}" />
        <Rectangle Margin="209,0,0,0" Style="{StaticResource HGrid}" />
        <Rectangle Margin="246,0,0,0" Style="{StaticResource HGrid}" />
        <Rectangle Margin="283,0,0,0" Style="{StaticResource HGrid}" />
        <Rectangle Margin="320,0,0,0" Style="{StaticResource HGrid}" />
        <Rectangle Margin="357,0,0,0" Style="{StaticResource HGrid}" />
        <Rectangle Margin="394,0,0,0" Style="{StaticResource HGrid}" />
        <Rectangle Margin="431,0,0,0" Style="{StaticResource HGrid}" />
        <Rectangle Margin="468,0,0,0" Style="{StaticResource HGrid}" />
    </Grid>
    <Grid VerticalAlignment="Top" HorizontalAlignment="Right" 
            Width="5">
        <Grid.Resources>
            <Style x:Key="VGrid" TargetType="Rectangle">
            	<Setter Property="Height" Value="25"/>
            	<Setter Property="Fill" Value="DarkRed"/>
            	<Setter Property="VerticalAlignment" Value="Top"/>
            </Style>
        </Grid.Resources>
        <Rectangle Margin="0,24,0,0" Style="{StaticResource VGrid}" />
        <Rectangle Margin="0,61,0,0" Style="{StaticResource VGrid}" />
        <Rectangle Margin="0,98,0,0" Style="{StaticResource VGrid}" />
        <Rectangle Margin="0,135,0,0" Style="{StaticResource VGrid}" />
        <Rectangle Margin="0,172,0,0" Style="{StaticResource VGrid}" />
        <Rectangle Margin="0,209,0,0" Style="{StaticResource VGrid}" />
        <Rectangle Margin="0,246,0,0" Style="{StaticResource VGrid}" />
        <Rectangle Margin="0,283,0,0" Style="{StaticResource VGrid}" />
        <Rectangle Margin="0,320,0,0" Style="{StaticResource VGrid}" />
        <Rectangle Margin="0,357,0,0" Style="{StaticResource VGrid}" />
        <Rectangle Margin="0,394,0,0" Style="{StaticResource VGrid}" />
        <Rectangle Margin="0,431,0,0" Style="{StaticResource VGrid}" />
        <Rectangle Margin="0,468,0,0" Style="{StaticResource VGrid}" />
        <Rectangle Margin="0,505,0,0" Style="{StaticResource VGrid}" />
        <Rectangle Margin="0,542,0,0" Style="{StaticResource VGrid}" />
        <Rectangle Margin="0,579,0,0" Style="{StaticResource VGrid}" />
        <Rectangle Margin="0,616,0,0" Style="{StaticResource VGrid}" />
        <Rectangle Margin="0,653,0,0" Style="{StaticResource VGrid}" />
        <Rectangle Margin="0,690,0,0" Style="{StaticResource VGrid}" />
        <Rectangle Margin="0,727,0,0" Style="{StaticResource VGrid}" />
        <Rectangle Margin="0,764,0,0" Style="{StaticResource VGrid}" />
    </Grid>
</Grid>