FC2ブログ

スポンサーサイト

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

【Material Design Toolkit】 TextBox

 Material Design ToolkitのTextBoxにはHint機能があり、テキストが入力されていないときにテキストボックスにヒントを表示することができます。(ヒント機能はTextBox以外にもComboBoxやPasswardBoxでも使用できます。)
<Window x:Class="MdDemo5.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:MdDemo5.ViewModels"
        Title="MainWindow" Height="350" Width="525"
        
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        TextElement.FontWeight="Regular"
        TextElement.FontSize="13"
        TextOptions.TextFormattingMode="Ideal"
        TextOptions.TextRenderingMode="Auto"
        Background="{DynamicResource MaterialDesignPaper}"
        FontFamily="{DynamicResource MaterialDesignFont}">
    
    <Window.DataContext>
        <vm:MainWindowViewModel/>
    </Window.DataContext>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="150"/>
            <ColumnDefinition Width="150"/>
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Row="0" Grid.Column="0" Text="MaterialDesignTextBox" VerticalAlignment="Bottom"/>
        <TextBox Grid.Row="0" Grid.Column="1" Text="" Style="{StaticResource MaterialDesignTextBox}" Margin="5"
                 materialDesign:HintAssist.Hint="(ヒント)"/>
        <TextBox Grid.Row="0" Grid.Column="2" Text="テキスト" Style="{StaticResource MaterialDesignTextBox}" Margin="5"
                 materialDesign:HintAssist.Hint="(ヒント)"/>

        <TextBlock Grid.Row="1" Grid.Column="0" Text="MaterialDesignFloatingHintTextBox" VerticalAlignment="Bottom"/>
        <TextBox Grid.Row="1" Grid.Column="1" Text="" Style="{StaticResource MaterialDesignFloatingHintTextBox}" Margin="5"
                 materialDesign:HintAssist.Hint="(ヒント)"/>
        <TextBox Grid.Row="1" Grid.Column="2" Text="テキスト" Style="{StaticResource MaterialDesignFloatingHintTextBox}" Margin="5"
                 materialDesign:HintAssist.Hint="(ヒント)"/>
    </Grid>
</Window>
MaterialDesign TextBox-Hint1
 ヒントを表示したい場合はmaterialDesign:HintAssist.Hintに表示したいメッセージ等を指定するだけです。
 ヒントはTextプロパティが空の場合にのみ表示されます。
 MaterialDesignTextBoxスタイル(スタイルを指定しない場合はこのスタイルが自動で割り当てられます)を使用した場合はテキストが入力されたときにはヒントが非表示になります。
 MaterialDesignFloatingHintTextBoxスタイルを使用した場合はTextBoxの上部にヒントが表示されます。
 テキスト入力時にヒントメッセージを非表示にするか、上部に表示するかはmaterialDesign:HintAssist.IsFloatingプロパティで指定できます。
 このプロパティがfalseの場合は非表示に、trueの場合は上部に表示されます。
 (MaterialDesignFloatingHintTextBoxスタイルはMaterialDesignTextBox継承し、materialDesign:HintAssist.IsFloatingにtrueを指定したスタイルです)

 ヒントの表示方法に関わる設定にはHintOpacityとFloatingScaleがあります。
<Window x:Class="MdDemo5.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:MdDemo5.ViewModels"
        Title="MainWindow" Height="350" Width="525"
        
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        TextElement.FontWeight="Regular"
        TextElement.FontSize="13"
        TextOptions.TextFormattingMode="Ideal"
        TextOptions.TextRenderingMode="Auto"
        Background="{DynamicResource MaterialDesignPaper}"
        FontFamily="{DynamicResource MaterialDesignFont}">
    
    <Window.DataContext>
        <vm:MainWindowViewModel/>
    </Window.DataContext>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="150"/>
            <ColumnDefinition Width="150"/>
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Row="0" Grid.Column="0" Text="HintOpacity" VerticalAlignment="Bottom"/>
        <TextBox Grid.Row="0" Grid.Column="1" Margin="5"
                 materialDesign:HintAssist.Hint="(ヒント)"
                 materialDesign:HintAssist.HintOpacity="0.5"/>
        <TextBox Grid.Row="0" Grid.Column="2" Margin="5"
                 materialDesign:HintAssist.Hint="(ヒント)"
                 materialDesign:HintAssist.HintOpacity="1.0"/>

        <TextBlock Grid.Row="1" Grid.Column="0" Text="FloatingScale" VerticalAlignment="Bottom"/>
        <TextBox Grid.Row="1" Grid.Column="1" Style="{StaticResource MaterialDesignFloatingHintTextBox}"
                 Text="テキスト" Margin="5"
                 materialDesign:HintAssist.Hint="(ヒント)"
                 materialDesign:HintAssist.FloatingScale="0.5"/>
        <TextBox Grid.Row="1" Grid.Column="2" Style="{StaticResource MaterialDesignFloatingHintTextBox}"
                 Text="テキスト" Margin="5"
                 materialDesign:HintAssist.Hint="(ヒント)"
                 materialDesign:HintAssist.FloatingScale="1"/>
    </Grid>
</Window>
MaterialDesign TextBox-Hint2
 materialDesign:HintAssist.HintOpacityを設定することでヒントのOpacityを変えることができます。
 materialDesign:HintAssist.FloatingScaleを設定することでフロート(上部表示)時のヒントの大きさを変えることができます。

 これらのTextBoxスタイルにはErrorTemplateが指定されているのでViewModelがINotifyDataErrorInfoを実装していればデータバインディングするだけでエラーメッセージが表示されるようになります。
<Window x:Class="MdDemo5.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:MdDemo5.ViewModels"
        Title="MainWindow" Height="350" Width="525"
        
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        TextElement.FontWeight="Regular"
        TextElement.FontSize="13"
        TextOptions.TextFormattingMode="Ideal"
        TextOptions.TextRenderingMode="Auto"
        Background="{DynamicResource MaterialDesignPaper}"
        FontFamily="{DynamicResource MaterialDesignFont}">
    
    <Window.DataContext>
        <vm:MainWindowViewModel/>
    </Window.DataContext>
 
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="35"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="35"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="35"/>
            <RowDefinition Height="Auto"/>

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

        <TextBlock Grid.Row="0" Grid.Column="0" Text="標準のデータ検証" VerticalAlignment="Bottom"/>
        <TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Value1}"/>

        <TextBlock Grid.Row="2" Grid.Column="0" Text="Popup表示" VerticalAlignment="Bottom"/>
        <TextBox Grid.Row="2" Grid.Column="1" Text="{Binding Value1}"
                 materialDesign:ValidationAssist.UsePopup="True"/>

        <TextBlock Grid.Row="4" Grid.Column="0" Text="フォーカス時のみ表示" VerticalAlignment="Bottom"/>
        <TextBox Grid.Row="4" Grid.Column="1" Text="{Binding Value1}"
                 materialDesign:ValidationAssist.OnlyShowOnFocus="True"/>
        
        <TextBlock Grid.Row="6" Grid.Column="0" Text="メッセージ非表示" VerticalAlignment="Bottom"/>
        <TextBox Grid.Row="6" Grid.Column="1" Text="{Binding Value1}"
                 materialDesign:ValidationAssist.Suppress="True"/>
    </Grid>
</Window>
MaterialDesign TextBox-Validation
 エラーメッセージはTextBoxの下部に表示されます。
 特に何も指定しない場合はTextBoxの幅に合わせてエラーメッセージが折り返されて表示されます。
 TextBoxの幅に左右されないようにエラーメッセージを表示したい場合はmaterialDesign:ValidationAssist.UsePopupにtrueを指定してください。
 エラーメッセージをフォーカス時のみ表示させたい場合はmaterialDesign:ValidationAssist.OnlyShowOnFocusにtrueを指定してください。
 フォーカスが他にあるときはエラーメッセージが非表示になります。(アンダーラインは赤いままなのでエラーがあることは判別できます。)
 エラーメッセージを表示したくない場合はmaterialDesign:ValidationAssist.Suppressにtrueを指定してください。
 エラーメッセージを表示しないだけでデータ検証は行われていますのでアンダーラインが赤色になっています。

 2017/10/22追記

 Material Design ToolkitがアップブレードされTextBoxのスタイルにTextFieldBoxとTextAreaBoxが追加されました。
 
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <GroupBox Grid.Row="0" Header="TextFieldBox">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <TextBox Grid.Column="0" Text="テキスト" Margin="5"
                        Style="{StaticResource MaterialDesignTextFieldBoxTextBox}"/>
            <TextBox Grid.Column="1" Text="テキスト" Margin="5"
                        Style="{StaticResource MaterialDesignTextFieldBoxTextBox}"
                        materialDesign:HintAssist.Hint="ヒント"
                        materialDesign:HintAssist.FloatingScale="1.0"/>
        </Grid>
    </GroupBox>

    <GroupBox Grid.Row="1" Header="TextAreaBox">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <TextBox Grid.Column="0" Text="テキスト" Margin="5"
                        Style="{StaticResource MaterialDesignTextAreaTextBox}"/>
            <TextBox Grid.Column="1" Text="テキスト" Margin="5"
                        Style="{StaticResource MaterialDesignTextAreaTextBox}"
                        materialDesign:HintAssist.Hint="ヒント"
                        materialDesign:HintAssist.FloatingScale="1.0"/>
        </Grid>
    </GroupBox>
</Grid>
 これを実行すると以下の様になります。
TextFieldAndTextArea.png
 TextFieldBoxは罫線は使用せず背景色でTextBox領域を強調します。
 TextAreaBoxは罫線によってTextBox領域を強調します。
 どちらも領域の上部にヒントメッセージを配置するための領域が保持されています。
 そのため、ヒントメッセージなしだと少し違和感が残るコントロールです。
スポンサーサイト

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

コメントの投稿

非公開コメント

カレンダー
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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。