Feedworm のようなボタンを作る

#wp7dev_jp

独特のUIデザインを持つFeedwormですが、こんなボタンデザインになるテンプレートを作ってみましょう。

こちらがオリジナルのデザイン。

そして今回作ったのがこちら。アイコンは、いつものSDKのIconふぉるたにあるもの（ApplicationBarIconButtonで使っている物を使用）

テンプレートはこんな構成になっています。

アイコン部分はひとまず、Rectangle にして、このBackgroundをTemplateBindingでBackgroundとひもづけています。
ボタンの上マージンを -10として、アイコンとボタンの間隔を調整（重なっています）
ボタンの境界線は、Borderを使って右の縦線しか書いていません。太さは0.5。少数も使えるんですよ。色は＃FF808080。
ただし、そのまま描くと右端の右に境界線が書かれてしまいます。これはみっともない。
なので、右はMargin-1として、ボタンの枠より1ドット外側に線を描きます。こうすることで一番右のボタンは画面上には枠が描画されなくなります。

実際に使うときには背景色の設定でImageBrushを設定して、アイコン画像を読み込んでやればOK。

どんなデザインでも簡単に対応できるのが、XAMLとBlendのいいところです。

 <phone:PhoneApplicationPage.Resources>

  <Style TargetType="Button">

    <Setter Property="Background" Value="Transparent"/>

    <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>

    <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>

    <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>

    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>

    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>

    <Setter Property="Padding" Value="10,3,10,5"/>

    <Setter Property="Template">

      <Setter.Value>

        <ControlTemplate TargetType="Button">

          <Border x:Name="border" BorderThickness="0,0,0.5,0"

            BorderBrush="Gray" Margin="0,0,-1,0" Background="#00000000">

            <VisualStateManager.VisualStateGroups>

              <VisualStateGroup x:Name="CommonStates">

                <VisualState x:Name="Normal"/>

                <VisualState x:Name="MouseOver"/>

                <VisualState x:Name="Pressed">

                  <Storyboard>

                    <ColorAnimation Duration="0" To="#33000000"

                    Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"

                    Storyboard.TargetName="border" d:IsOptimized="True"/>

                  </Storyboard>

                </VisualState>

                <VisualState x:Name="Disabled">

                  <Storyboard>

                    <DoubleAnimation Duration="0" To="0.5"

                    Storyboard.TargetProperty="(UIElement.Opacity)"

                    Storyboard.TargetName="rectangle" d:IsOptimized="True"/>

                    <DoubleAnimation Duration="0" To="0.5"

                    Storyboard.TargetProperty="(UIElement.Opacity)"

                    Storyboard.TargetName="ContentContainer" d:IsOptimized="True"/>

                  </Storyboard>

                </VisualState>

              </VisualStateGroup>

            </VisualStateManager.VisualStateGroups>

            <StackPanel Background="Transparent">

              <Rectangle x:Name="rectangle" Fill="{TemplateBinding Background}"

              Height="48" Width="48" Margin="0"/>

              <ContentControl x:Name="ContentContainer"

              ContentTemplate="{TemplateBinding ContentTemplate}"

              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"

              Padding="{TemplateBinding Padding}"

              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"

              FontSize="{StaticResource PhoneFontSizeSmall}"

              HorizontalAlignment="Center" Margin="0,-10,0,0"

              FontFamily="Arial Unicode MS"

              Content="{TemplateBinding Content}"/>

            </StackPanel>

          </Border>

        </ControlTemplate>

      </Setter.Value>

    </Setter>

  </Style>

</phone:PhoneApplicationPage.Resources>

Additional resources