FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【Material Design Toolkit】 TextBlockのスタイル

 Material Design ToolkitではTextBlockにも複数のスタイルが用意されています。
 以下のコードではMaterial Design Toolkitで用意されているスタイルを列挙したものです。
<Window x:Class="MdDemo4.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="150" Width="625"
        
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        TextElement.FontWeight="Regular"
        TextElement.FontSize="20"
        TextOptions.TextFormattingMode="Ideal"
        TextOptions.TextRenderingMode="Auto"
        Background="{DynamicResource MaterialDesignPaper}"
        FontFamily="{DynamicResource MaterialDesignFont}">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>

        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="350"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Row="0" Grid.Column="0" Text="MaterialDesignCaptionTextBlock"/>
        <TextBlock Grid.Row="0" Grid.Column="1" Text="Regular, 12" Style="{StaticResource MaterialDesignCaptionTextBlock}"/>

        <TextBlock Grid.Row="1" Grid.Column="0" Text="MaterialDesignBody1TextBlock"/>
        <TextBlock Grid.Row="1" Grid.Column="1" Text="Regular, 13" Style="{StaticResource MaterialDesignBody1TextBlock}"/>

        <TextBlock Grid.Row="2" Grid.Column="0" Text="MaterialDesignBody2TextBlock"/>
        <TextBlock Grid.Row="2" Grid.Column="1" Text="Medium, 13" Style="{StaticResource MaterialDesignBody2TextBlock}"/>

        <TextBlock Grid.Row="3" Grid.Column="0" Text="MaterialDesignSubheadingTextBlock"/>
        <TextBlock Grid.Row="3" Grid.Column="1" Text="Regular, 15" Style="{StaticResource MaterialDesignSubheadingTextBlock}"/>

        <TextBlock Grid.Row="4" Grid.Column="0" Text="MaterialDesignTitleTextBlock"/>
        <TextBlock Grid.Row="4" Grid.Column="1" Text="Medium, 20" Style="{StaticResource MaterialDesignTitleTextBlock}"/>

        <TextBlock Grid.Row="5" Grid.Column="0" Text="MaterialDesignHeadlineTextBlock"/>
        <TextBlock Grid.Row="5" Grid.Column="1" Text="Regular, 24" Style="{StaticResource MaterialDesignHeadlineTextBlock}"/>

        <TextBlock Grid.Row="6" Grid.Column="0" Text="MaterialDesignDisplay1TextBlock"/>
        <TextBlock Grid.Row="6" Grid.Column="1" Text="Regular, 34" Style="{StaticResource MaterialDesignDisplay1TextBlock}"/>

        <TextBlock Grid.Row="7" Grid.Column="0" Text="MaterialDesignDisplay2TextBlock"/>
        <TextBlock Grid.Row="7" Grid.Column="1" Text="Regular, 45" Style="{StaticResource MaterialDesignDisplay2TextBlock}"/>

        <TextBlock Grid.Row="8" Grid.Column="0" Text="MaterialDesignDisplay3TextBlock"/>
        <TextBlock Grid.Row="8" Grid.Column="1" Text="Regular, 56" Style="{StaticResource MaterialDesignDisplay3TextBlock}"/>

        <TextBlock Grid.Row="9" Grid.Column="0" Text="MaterialDesignDisplay4TextBlock"/>
        <TextBlock Grid.Row="9" Grid.Column="1" Text="Light, 112" Style="{StaticResource MaterialDesignDisplay4TextBlock}"/>

        <TextBlock Grid.Row="10" Grid.Column="0" Text="MaterialDesignButtonTextBlock"/>
        <TextBlock Grid.Row="10" Grid.Column="1" Text="Medium, 14" Style="{StaticResource MaterialDesignButtonTextBlock}"/>
    </Grid>
</Window>
 MaterialDesign TextBox-Style
 これらのスタイルはStyle.ResourcesにもつHyperlinkスタイルとFontSize、FontWeightに違いがあります。
 状況に合わせてスタイル使い分けてください。
 個人的にはMaterial Design Toolkitの設定しているFontSizeはちょっと小さ目な感じがします。(データ検証時のエラーメッセージはFontSize10だったりします)
 文字サイズを大きくしたい場合はWindowで指定するFontSizeを大きくすればよいのですが、その場合TextBlockスタイルとのバランスが崩れてしまうので注意してください。    
スポンサーサイト

テーマ : プログラミング
ジャンル : コンピュータ

コメントの投稿

非公開コメント

カレンダー
09 | 2018/10 | 11
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -
全記事表示リンク

全ての記事を表示する

カテゴリ
タグリスト

月別アーカイブ
11  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09 
最新記事
リンク
最新コメント
検索フォーム
Amazon
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。