Hatena::ブログ(Diary)

My Programing Diary

2011-12-18

Silverlight 5 の機能紹介 : キャラクターの操作

この記事は、Silverlight Advent Calendar 2011 (12/18 分) への参加記事です。

Silverlight はほとんど初心者ですが、折角勉強の機会を与えていただいたということで、まずは自分にできることからやっていきたいと思います。今回は Sliverlight 5 の新機能の中で 2 つほど機能を紹介したいと思います。

テキストの文字幅の調整

URL 先にサンプルがあります。

http://xiha22jp.dousetsu.com/Silverlight/CharacterSpacing/SilverlightApplication4TestPage.html


コンボボックスのプルダウンから数値を選択すると、文字の幅が変わるサンプルです。CharacterSpacing プロパティを使用して変更できますが、文字の幅を操作するという割と難しそうな操作もラクラクできるようです。

上記の実際のコードを以下に紹介します。いかんせん初心者の極みなのでアドバイス等あればぜひお願いします。


<StackPanel>
    <TextBlock x:Name="textBlock1" FontSize="18" HorizontalAlignment="Center">
        <Run x:Name="textBlock1Run" CharacterSpacing="10"
        Text="What is character spacing ?" />
    </TextBlock>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
        <TextBlock Text="Choose CharacterSpacing : " />
    <ComboBox Height="24" x:Name="comboBox1" Width="243" SelectionChanged="comboBox1_SelectionChanged" />
    </StackPanel>
</StackPanel>
public MainPage()
{
    InitializeComponent();
    comboBox1.Items.Add(1);
    comboBox1.Items.Add(10);
    comboBox1.Items.Add(50);
    comboBox1.Items.Add(100);
    comboBox1.Items.Add(200);
    comboBox1.Items.Add(300);
    comboBox1.Items.Add(500);
}

private void comboBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (comboBox1.SelectedItem != null)
    {
        textBlock1Run.Text = "This is a test with character spacing : " + comboBox1.SelectedItem.ToString();
        textBlock1Run.CharacterSpacing = (int)comboBox1.SelectedItem;
    }
}

  • 参考資料

Silverlight 5: Advancements in Text


テキストの字体の調整

URL 先にサンプルがあります。

http://xiha22jp.dousetsu.com/Silverlight/Typography01/SilverlightApplication5TestPage.html

次は Gabriola 字体を使った文字のちょっとした変換です。

Typography クラスを使用することで様々なタイプの字体に変換することが可能です。

(※ Typography.StylisticSet6 あたりがもっとも形が変わります。びよーんって感じ。)

後述する参考資料にもっといろんなサンプルが紹介されています。字体を変換するだけでもほんと様々なのでおもしろいです。

例えば、Typography.StandardLigatures プロパティを指定するには以下のような感じで記述するだけで OK です。

<TextBlock 
    x:Name="textBlock1"
    Text="Microsoft Silverlight"
    FontFamily="Gabriola"
    Margin="100 0 0 0"
    Typography.StandardLigatures="True"
    FontSize="80"/>

それでは上記のサンプルコードです。(一応貼りつけていますが、ほとんど無意味です。。)


<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
    <TextBlock 
        x:Name="textBlock1"
        Text="Microsoft Silverlight"
        FontFamily="Gabriola"
        Margin="100 0 0 0"
        Typography.StandardLigatures="True"
        FontSize="80"/>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
        <TextBlock Text="Typography.StandardLigatures : " />
        <ComboBox x:Name="comboBox1" SelectionChanged="comboBox1_SelectionChanged" Width="250" />
    </StackPanel>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
        <TextBlock Text="Typography.StylisticSet1 : " />
        <ComboBox x:Name="comboBox2" SelectionChanged="comboBox2_SelectionChanged" Width="250" />
    </StackPanel>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
        <TextBlock Text="Typography.StylisticSet2 : " />
        <ComboBox x:Name="comboBox3" SelectionChanged="comboBox3_SelectionChanged" Width="250" />
    </StackPanel>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
        <TextBlock Text="Typography.StylisticSet3 : " />
        <ComboBox x:Name="comboBox4" SelectionChanged="comboBox4_SelectionChanged" Width="250" />
    </StackPanel>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
        <TextBlock Text="Typography.StylisticSet4 : " />
        <ComboBox x:Name="comboBox5" SelectionChanged="comboBox5_SelectionChanged" Width="250" />
    </StackPanel>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
        <TextBlock Text="Typography.StylisticSet5 : " />
        <ComboBox x:Name="comboBox6" SelectionChanged="comboBox6_SelectionChanged" Width="250" />
    </StackPanel>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
        <TextBlock Text="Typography.StylisticSet6 : " />
        <ComboBox x:Name="comboBox7" SelectionChanged="comboBox7_SelectionChanged" Width="250" />
    </StackPanel>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
        <TextBlock Text="Typography.StylisticSet7 : " />
        <ComboBox x:Name="comboBox8" SelectionChanged="comboBox8_SelectionChanged" Width="250" />
    </StackPanel>
</StackPanel>

public MainPage()
{
    InitializeComponent();
    comboBox1.Items.Add("True");
    comboBox1.Items.Add("False");
    comboBox2.Items.Add("True");
    comboBox2.Items.Add("False");
    comboBox3.Items.Add("True");
    comboBox3.Items.Add("False");
    comboBox4.Items.Add("True");
    comboBox4.Items.Add("False");
    comboBox5.Items.Add("True");
    comboBox5.Items.Add("False");
    comboBox6.Items.Add("True");
    comboBox6.Items.Add("False");
    comboBox7.Items.Add("True");
    comboBox7.Items.Add("False");
    comboBox8.Items.Add("True");
    comboBox8.Items.Add("False");
}

private void comboBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    string select = comboBox1.SelectedItem.ToString();

    if (select == "True")
        Typography.SetStandardLigatures(textBlock1, true);
    else
        Typography.SetStandardLigatures(textBlock1, false);
}

private void comboBox2_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    string select = comboBox2.SelectedItem.ToString();

    if (select == "True")
        Typography.SetStylisticSet1(textBlock1, true);
    else
        Typography.SetStylisticSet1(textBlock1, false);
}

private void comboBox3_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    string select = comboBox3.SelectedItem.ToString();

    if (select == "True")
        Typography.SetStylisticSet2(textBlock1, true);
    else
        Typography.SetStylisticSet2(textBlock1, false);
}

private void comboBox4_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    string select = comboBox4.SelectedItem.ToString();

    if (select == "True")
        Typography.SetStylisticSet3(textBlock1, true);
    else
        Typography.SetStylisticSet3(textBlock1, false);
}

private void comboBox5_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    string select = comboBox5.SelectedItem.ToString();

    if (select == "True")
        Typography.SetStylisticSet4(textBlock1, true);
    else
        Typography.SetStylisticSet4(textBlock1, false);
}

private void comboBox6_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    string select = comboBox6.SelectedItem.ToString();

    if (select == "True")
        Typography.SetStylisticSet5(textBlock1, true);
    else
        Typography.SetStylisticSet5(textBlock1, false);
}

private void comboBox7_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    string select = comboBox7.SelectedItem.ToString();

    if (select == "True")
        Typography.SetStylisticSet7(textBlock1, true);
    else
        Typography.SetStylisticSet7(textBlock1, false);
}

private void comboBox8_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    string select = comboBox8.SelectedItem.ToString();

    if (select == "True")
        Typography.SetStylisticSet7(textBlock1, true);
    else
        Typography.SetStylisticSet7(textBlock1, false);
}

  • 参考資料

OpenType Text in Silverlight 5


Silverlightブログへの貼付け方

Silverlightブログへの貼付け方は、同じく Advent Calender イベントで記事を書いていただいた @gushwell さんのこの記事を参考にしています。(すみません。。さっそくパクらせていただいております。。)

また、はてなダイアリーでは iframe が使えないので、代わりに Google Gadget を使っています。Google Gadget の使い方はこちらの記事を参考にしています。