Hatena::Groupmediaforcelabs

どうも、小松です。

 | 

2009-11-09

Illustratorデータを取り込む(Button編 -その2-)

| 11:31

どうも、小松です。


Illustratorのデータを取り込んで、ボタンを作成してみます。

その1からだいぶ間隔が空いてしまいましたが、気にせず突き進みたいと思います。


0. はじめに

開発環境は、以下のとおりです。

OSWindows XP Professional
開発ツールExpression Blend 3(日本語)

Illustratorのデータを準備します。(私はIllustratorを使えないので、またまたデザイナーさんにお願いしちゃいました。)

前回と同様に異なる色のボタンを4つ重ねたデータをお願いしたのですが、

今回は、4つのボタンをそれぞれ別のレイヤーにしてもらいました。

繰り返しになりますが、4つの色が必要なのは、以下の状態を表すためです。

  • 通常の状態
  • マウスオーバーした状態
  • クリックした状態
  • ボタンが無効の状態(クリックできない状態)

1. プロジェクトにIllustratorのデータを取り込む。

 1-1. プロジェクトを作成します。(名前は、「TestCustomButton2」にしました。)

 1-2. メニューバーより、「ファイル」->「Adobe Illustrator ファイルのインポート」を開きます。

 1-3. 取り込むファイルを選択し、「開く」ボタンをクリックします。(今回は、「btn_images2.ai」というファイルを開きました。)

 1-4. データがインポートできました。「オブジェクトタイムライン」パネルで確認すると以下の通りです。

  f:id:coma2:20091106215728p:image

  4つのCanvasの中にPathが1つずつ入っています。

  CanvasIllustratorレイヤー、Pathがボタンのオブジェクトに対応しています。

  ボタン自身(Path)には名前はつきませんが、レイヤー(Canvas)の名前は、Illustratorで定義した名前です。

  名前が表示されるととても便利です。


2. 取り込んだデータをボタンに変更する。

 2-1. 「オブジェクトタイムライン」パネルで4つのCanvasを選択し、右クリックします。

 2-2. 「グループ化設定」->「Grid」を選択します。

  f:id:coma2:20091020105917p:image

 2-3. 新しくGridが作成され、その中に4つのCanvasが入ります。

 2-4. 作成されたGridを右クリックし、「コントロールの作成」を選択します。

  f:id:coma2:20091020114409p:image

 2-5. 「コントロールの種類」で「Button」を選び、「OK」ボタンをクリックします。

  f:id:coma2:20091020115123p:image


3. テンプレートの編集を行う。

 3-1. テンプレート編集モードになります。

 3-2. 4つのCanvasのVisibilityプロパティを「Collapsed」にします。

  3-2-1. 「オブジェクトタイムライン」パネルで「btn_disabled」を選択します。

   f:id:coma2:20091109113008p:image

  3-2-2. 「プロパティ」パネルの「外観」セクションでVisibilityプロパティを「Collapsed」にします。

   f:id:coma2:20091020123957p:image

  3-2-3. 他の3つのCanvasも同様に操作します。

 3-3. 状態の設定を行う。

  各状態で、表示するCanvasのVisibilityプロパティを「Visible」にします。

  3-3-1. 「状態」ウィンドウを開き、「Normal」状態を選択します。

   f:id:coma2:20091020123958p:image

  3-3-2. 「オブジェクトタイムライン」パネルで「btn_normal」を選択します。

  3-3-3. 「プロパティ」パネルの「外観」セクションでVisibilityプロパティを「Visible」にします。

  3-3-4. 同様に、MouseOver, Pressed, Disabledの3つの状態も設定します。


4. ボタンのContent(文字)を消す。

  4-1. 「オブジェクトタイムライン」パネルで「[ContentPresenter]」を選択します。

  4-2. 「プロパティ」パネルの「共通プロパティ」セクションで「Content」の値を削除します。


5. 最後に

 このボタン作成の方法は、Illustratorで定義した名前が表示されて便利でした。

 ただし、大きな問題点があります。それは、ボタンのサイズ変更が出来ないということです。

 テンプレートの編集時に、全てのCanvasとPathのWidth,HeightをAutoにしてもダメでした。

 その1では、サイズ変更が出来ました。

 どちらも一長一短がありますね。


 参考に、ソースコードを載せておきます。

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="TestCustomButton2.MainPage"
    Width="640" Height="480">
    <UserControl.Resources>
        <Style x:Key="ButtonStyle1" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused"/>
                                    <VisualState x:Name="Unfocused"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="btn_normal" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="btn_mouseover" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="btn_pressed" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="btn_disabled" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Canvas x:Name="btn_disabled" Height="35.653" Width="100.618" Visibility="Collapsed">
                                <Path Stretch="Fill" Stroke="#FF666666" StrokeEndLineCap="Flat" StrokeLineJoin="Miter" StrokeMiterLimit="4" StrokeStartLineCap="Flat" StrokeThickness="1" Height="36.653" Width="101.618" Canvas.Left="-0.5" Canvas.Top="-0.5" Data="M472.191,312.975C472.191,315.184,470.4,316.975,468.191,316.975L375.573,316.975C373.364,316.975,371.573,315.184,371.573,312.975L371.573,285.322C371.573,283.113,373.364,281.322,375.573,281.322L468.191,281.322C470.4,281.322,472.191,283.113,472.191,285.322L472.191,312.975z">
                                    <Path.Fill>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#FFB1B1B1" Offset="0"/>
                                            <GradientStop Color="sc#1, 0.350953937, 0.350953937, 0.350953937" Offset="0.26369800128793719"/>
                                            <GradientStop Color="#FF8C8C8C" Offset="0.43258398771286011"/>
                                            <GradientStop Color="#FF666666" Offset="0.53370797634124756"/>
                                            <GradientStop Color="#FF666666" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Path.Fill>
                                </Path>
                            </Canvas>
                            <Canvas x:Name="btn_pressed" Height="35.653" Width="100.618" Visibility="Collapsed">
                                <Path Stretch="Fill" Stroke="Blue" StrokeEndLineCap="Flat" StrokeLineJoin="Miter" StrokeMiterLimit="4" StrokeStartLineCap="Flat" StrokeThickness="1" Height="36.653" Width="101.618" Canvas.Left="-0.5" Canvas.Top="-0.5" Data="M472.191,312.975C472.191,315.184,470.4,316.975,468.191,316.975L375.573,316.975C373.364,316.975,371.573,315.184,371.573,312.975L371.573,285.322C371.573,283.113,373.364,281.322,375.573,281.322L468.191,281.322C470.4,281.322,472.191,283.113,472.191,285.322L472.191,312.975z">
                                    <Path.Fill>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#FFBDBDFF" Offset="0"/>
                                            <GradientStop Color="sc#1, 0.273542851, 0.273542851, 1" Offset="0.26369800128793719"/>
                                            <GradientStop Color="#FF3737FF" Offset="0.43258398771286011"/>
                                            <GradientStop Color="Blue" Offset="0.53370797634124756"/>
                                            <GradientStop Color="Blue" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Path.Fill>
                                </Path>
                            </Canvas>
                            <Canvas x:Name="btn_mouseover" Height="35.653" Width="100.618" Visibility="Collapsed">
                                <Path Stretch="Fill" Stroke="#FF008FCB" StrokeEndLineCap="Flat" StrokeLineJoin="Miter" StrokeMiterLimit="4" StrokeStartLineCap="Flat" StrokeThickness="1" Height="36.653" Width="101.618" Canvas.Left="-0.5" Canvas.Top="-0.5" Data="M472.191,312.975C472.191,315.184,470.4,316.975,468.191,316.975L375.573,316.975C373.364,316.975,371.573,315.184,371.573,312.975L371.573,285.322C371.573,283.113,373.364,281.322,375.573,281.322L468.191,281.322C470.4,281.322,472.191,283.113,472.191,285.322L472.191,312.975z">
                                    <Path.Fill>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#FFB8DFF0" Offset="0"/>
                                            <GradientStop Color="sc#1, 0.28398788, 0.5943481, 0.80091393" Offset="0.26369800128793719"/>
                                            <GradientStop Color="#FF54B3DE" Offset="0.43258398771286011"/>
                                            <GradientStop Color="#FF0993CE" Offset="0.53370797634124756"/>
                                            <GradientStop Color="#FF0993CE" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Path.Fill>
                                </Path>
                            </Canvas>
                            <Canvas x:Name="btn_normal" Height="35.653" Width="100.618" Visibility="Collapsed">
                                <Path Stretch="Fill" Stroke="#FF5DB8DF" StrokeEndLineCap="Flat" StrokeLineJoin="Miter" StrokeMiterLimit="4" StrokeStartLineCap="Flat" StrokeThickness="1" Height="36.653" Width="101.618" Canvas.Left="-0.5" Canvas.Top="-0.5" Data="M472.191,312.975C472.191,315.184,470.4,316.975,468.191,316.975L375.573,316.975C373.364,316.975,371.573,315.184,371.573,312.975L371.573,285.322C371.573,283.113,373.364,281.322,375.573,281.322L468.191,281.322C470.4,281.322,472.191,283.113,472.191,285.322L472.191,312.975z">
                                    <Path.Fill>
                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                            <GradientStop Color="#FFD8EDF6" Offset="0"/>
                                            <GradientStop Color="sc#1, 0.5977833, 0.8036989, 0.9047525" Offset="0.26369800128793719"/>
                                            <GradientStop Color="#FFBDE2F2" Offset="0.43258398771286011"/>
                                            <GradientStop Color="#FF5DB8DE" Offset="0.53370797634124756"/>
                                            <GradientStop Color="#FF5DB8DE" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Path.Fill>
                                </Path>
                            </Canvas>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content=""/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <Canvas x:Name="btn_images2" Height="595.276" HorizontalAlignment="Left" VerticalAlignment="Top" Width="841.89">
            <Button Height="36" Style="{StaticResource ButtonStyle1}" Width="101" Canvas.Left="372" Canvas.Top="281" Content="Button"/>
        </Canvas>
    </Grid>
</UserControl>

LaxmanLaxman2013/04/27 13:49Deep thinking - adds a new dmeinsion to it all.

 |