Nine Works　2017年02月

【Material Design Toolkit】 ToggleButtonのスタイル

　Material Design Toolkitが用意しているToggleButtonのスタイルは大きく分けて４種類あります。

    <StackPanel>
        <GroupBox Header="MaterialDesignActionToggleButton">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Row="0" Grid.Column="0" Text="MaterialDesignActionToggleButton:" VerticalAlignment="Center"/>
                <ToggleButton Grid.Row="0" Grid.Column="1" Content="M" Style="{StaticResource MaterialDesignActionToggleButton}" IsChecked="False"/>
                <ToggleButton Grid.Row="0" Grid.Column="2" Content="M" Style="{StaticResource MaterialDesignActionToggleButton}" IsChecked="True"/>

                <TextBlock Grid.Row="1" Grid.Column="0" Text="MaterialDesignActionLightToggleButton:" VerticalAlignment="Center"/>
                <ToggleButton Grid.Row="1" Grid.Column="1" Content="L" Style="{StaticResource MaterialDesignActionLightToggleButton}" IsChecked="False"/>
                <ToggleButton Grid.Row="1" Grid.Column="2" Content="L" Style="{StaticResource MaterialDesignActionLightToggleButton}" IsChecked="True"/>

                <TextBlock Grid.Row="2" Grid.Column="0" Text="MaterialDesignActionDarkToggleButton:" VerticalAlignment="Center"/>
                <ToggleButton Grid.Row="2" Grid.Column="1" Content="D" Style="{StaticResource MaterialDesignActionDarkToggleButton}" IsChecked="False"/>
                <ToggleButton Grid.Row="2" Grid.Column="2" Content="D" Style="{StaticResource MaterialDesignActionDarkToggleButton}" IsChecked="True"/>

                <TextBlock Grid.Row="3" Grid.Column="0" Text="MaterialDesignActionAccentToggleButton:" VerticalAlignment="Center"/>
                <ToggleButton Grid.Row="3" Grid.Column="1" Content="A" Style="{StaticResource MaterialDesignActionAccentToggleButton}" IsChecked="False"/>
                <ToggleButton Grid.Row="3" Grid.Column="2" Content="A" Style="{StaticResource MaterialDesignActionAccentToggleButton}" IsChecked="True"/>

                <TextBlock Grid.Row="4" Grid.Column="0" Text="ToggleButtonAssist.OnContent:" VerticalAlignment="Center"/>
                <ToggleButton Grid.Row="4" Grid.Column="1" Content="F" Style="{StaticResource MaterialDesignActionToggleButton}" IsChecked="False">
                    <materialDesign:ToggleButtonAssist.OnContent>T</materialDesign:ToggleButtonAssist.OnContent>
                </ToggleButton>
                <ToggleButton Grid.Row="4" Grid.Column="2" Content="F" Style="{StaticResource MaterialDesignActionToggleButton}" IsChecked="True">
                    <materialDesign:ToggleButtonAssist.OnContent>T</materialDesign:ToggleButtonAssist.OnContent>
                </ToggleButton>
            </Grid>
        </GroupBox>

        <GroupBox Header="MaterialDesignFlatToggleButton">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Row="0" Grid.Column="0" Text="MaterialDesignFlatToggleButton:" VerticalAlignment="Center"/>
                <ToggleButton Grid.Row="0" Grid.Column="1" Content="C" Style="{StaticResource MaterialDesignFlatToggleButton}" IsChecked="False"/>
                <ToggleButton Grid.Row="0" Grid.Column="2" Content="C" Style="{StaticResource MaterialDesignFlatToggleButton}" IsChecked="True"/>

                <TextBlock Grid.Row="1" Grid.Column="0" Text="MaterialDesignFlatPrimaryToggleButton:" VerticalAlignment="Center"/>
                <ToggleButton Grid.Row="1" Grid.Column="1" Content="C" Style="{StaticResource MaterialDesignFlatPrimaryToggleButton}" IsChecked="False"/>
                <ToggleButton Grid.Row="1" Grid.Column="2" Content="C" Style="{StaticResource MaterialDesignFlatPrimaryToggleButton}" IsChecked="True"/>
            </Grid>
        </GroupBox>

        <GroupBox Header="MaterialDesignSwitchToggleButton">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Row="0" Grid.Column="0" Text="MaterialDesignSwitchToggleButton:" VerticalAlignment="Center"/>
                <ToggleButton Grid.Row="0" Grid.Column="1" Style="{StaticResource MaterialDesignSwitchToggleButton}" IsChecked="False"/>
                <ToggleButton Grid.Row="0" Grid.Column="2" Style="{StaticResource MaterialDesignSwitchToggleButton}" IsChecked="True"/>

                <TextBlock Grid.Row="1" Grid.Column="0" Text="MaterialDesignSwitchLightToggleButton:" VerticalAlignment="Center"/>
                <ToggleButton Grid.Row="1" Grid.Column="1" Style="{StaticResource MaterialDesignSwitchLightToggleButton}" IsChecked="False"/>
                <ToggleButton Grid.Row="1" Grid.Column="2" Style="{StaticResource MaterialDesignSwitchLightToggleButton}" IsChecked="True"/>

                <TextBlock Grid.Row="2" Grid.Column="0" Text="MaterialDesignSwitchDarkToggleButton:" VerticalAlignment="Center"/>
                <ToggleButton Grid.Row="2" Grid.Column="1" Style="{StaticResource MaterialDesignSwitchDarkToggleButton}" IsChecked="False"/>
                <ToggleButton Grid.Row="2" Grid.Column="2" Style="{StaticResource MaterialDesignSwitchDarkToggleButton}" IsChecked="True"/>

                <TextBlock Grid.Row="3" Grid.Column="0" Text="MaterialDesignSwitchAccentToggleButton:" VerticalAlignment="Center"/>
                <ToggleButton Grid.Row="3" Grid.Column="1" Style="{StaticResource MaterialDesignSwitchAccentToggleButton}" IsChecked="False"/>
                <ToggleButton Grid.Row="3" Grid.Column="2" Style="{StaticResource MaterialDesignSwitchAccentToggleButton}" IsChecked="True"/>
            </Grid>
        </GroupBox>

        <GroupBox Header="MaterialDesignHamburgerToggleButton">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Row="0" Grid.Column="0" Text="MaterialDesignHamburgerToggleButton:" VerticalAlignment="Center"/>
                <ToggleButton Grid.Row="0" Grid.Column="1" Content="C" Style="{StaticResource MaterialDesignHamburgerToggleButton}" IsChecked="False"/>
                <ToggleButton Grid.Row="0" Grid.Column="2" Content="C" Style="{StaticResource MaterialDesignHamburgerToggleButton}" IsChecked="True"/>
            </Grid>
        </GroupBox>
    </StackPanel>

　MaterialDesignActionToggleButtonはLight、Mid(標準）、Dark、Accentの４つのバリエーションがあります。
　このスタイルはIsCheckedがtrueになると〇型のボタンが回転してチェックマークが表示されます。
　ToggleButtonAssist.OnContentを指定することでIsCheckedがtrueの場合のコンテンツを自由に指定することができます。

　MaterialDesignFlatToggleButtonは丸型のフラットToggleButtonでIsCheckedの違いは背景色の色で表現されます。

　MaterialDesignSwitchToggleButtonは名前の通り、スイッチ型のToggleButtonでLight、Mid（通常)、Dark、Accentの４つのバリエーションがあります。
　IsCheckedがtrueになった時のスイッチの色がそれぞれ違います。
　ToggleButtonにスタイルを指定しなかった場合はMaterialDesignSwitchToggleButtonになります。

　最後にMaterialDesignHamburgerToggleButtonですが、こればハンバーガーメニューで使用するためのToggleButtonでIsCheckedをtrueにすると矢印マークに変化します。

スポンサーサイト

WPF
MaterialDesignToolkit

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

2017-02-26(09:53) :
プログラミング :
コメント 0 :

このページのトップへ

【Material Design Toolkit】 RadioButtonのスタイル

　Material Design Toolkitが提供しているRadioButtonのスタイルは色違いのバリエーションがあるだけで実質１種類です。

<StackPanel>
    <RadioButton Content="MaterialDesignRadioButton" Style="{StaticResource MaterialDesignRadioButton}" GroupName="1"/>
    <RadioButton Content="MaterialDesignLightRadioButton" Style="{StaticResource MaterialDesignLightRadioButton}" GroupName="2"/>
    <StackPanel Background="Gray">
        <RadioButton Content="MaterialDesignDarkRadioButton" Style="{StaticResource MaterialDesignDarkRadioButton}" GroupName="3"/>
    </StackPanel>
    <RadioButton Content="MaterialDesignAccentRadioButton" Style="{StaticResource MaterialDesignAccentRadioButton}" GroupName="4"/>
</StackPanel>

　見た目は以下の様になります。

　見ての通り色の違いがあるだけです。
　MaterialDesignDarkRadioButtonはDarkテーマ使用時に使われるスタイルのため文字の色が白になります。そのため、サンプルコードではStackPanelにGrayを指定しています。
　テーマがLightの場合はMaterialDesignRadioButtonが、Darkの場合はMaterialDesignDarkRadioButtonがデフォルトスタイルとして使用されます。
　その為通常はStyleを指定せずに使用できます。
　RadioButtonにLightカラー又はアクセントカラーを使用したい時のみ対応するスタイルを指定すればよいと思います。

WPF
MaterialDesignToolkit

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

2017-02-25(13:06) :
プログラミング :
コメント 0 :

このページのトップへ

【Material Design Toolkit】 ComboBox

　Material Design ToolkitのComboBoxスタイルには２種類あり、TextBoxの時と同じくヒントの表示方法が異なるだけでほぼ同じスタイルです。

<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"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="100"/>
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Row="0" Grid.Column="0" Text="MaterialDesignComboBox:" VerticalAlignment="Bottom"/>
        <ComboBox Grid.Row="0" Grid.Column="1" Style="{StaticResource MaterialDesignComboBox}"
                  materialDesign:HintAssist.Hint="(ヒント1)">
            <ComboBoxItem>Item1</ComboBoxItem>
            <ComboBoxItem>Item2</ComboBoxItem>
            <ComboBoxItem>Item3</ComboBoxItem>
        </ComboBox>

        <TextBlock Grid.Row="1" Grid.Column="0" Text="MaterialDesignFloatingHintComboBox:" VerticalAlignment="Bottom"/>
        <ComboBox Grid.Row="1" Grid.Column="1" Style="{StaticResource MaterialDesignFloatingHintComboBox}"
                  materialDesign:HintAssist.Hint="(ヒント2)">
            <ComboBoxItem>Item1</ComboBoxItem>
            <ComboBoxItem>Item2</ComboBoxItem>
            <ComboBoxItem>Item3</ComboBoxItem>
        </ComboBox>

        <TextBlock Grid.Row="2" Grid.Column="0" Text="データ検証:" VerticalAlignment="Bottom"/>
        <ComboBox Grid.Row="2" Grid.Column="1" ItemsSource="{Binding Values}" SelectedItem="{Binding Value1}"/>
    </Grid>
</Window>

　見た目は以下の様になります。

　スタイルを指定しなかった場合はMaterialDesignComboBoxが適応されます。
　ErrorTemplateも指定されているので、ViewModelがINotifyDataErrorInfoを実装していればバインディングするだけでOKです。
　ヒントやデータ検証設定の方法はTextBoxの時と同じなので説明は省略します。

WPF
MaterialDesignToolkit

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

2017-02-11(11:09) :
プログラミング :
コメント 0 :

このページのトップへ

【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: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: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>

　エラーメッセージは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>

　これを実行すると以下の様になります。

　TextFieldBoxは罫線は使用せず背景色でTextBox領域を強調します。
　TextAreaBoxは罫線によってTextBox領域を強調します。
　どちらも領域の上部にヒントメッセージを配置するための領域が保持されています。
　そのため、ヒントメッセージなしだと少し違和感が残るコントロールです。

WPF
MaterialDesignToolkit

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

2017-02-05(00:00) :
プログラミング :
コメント 0 :

このページのトップへ

【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>

　これらのスタイルはStyle.ResourcesにもつHyperlinkスタイルとFontSize、FontWeightに違いがあります。
　状況に合わせてスタイル使い分けてください。
　個人的にはMaterial Design Toolkitの設定しているFontSizeはちょっと小さ目な感じがします。（データ検証時のエラーメッセージはFontSize10だったりします）
　文字サイズを大きくしたい場合はWindowで指定するFontSizeを大きくすればよいのですが、その場合TextBlockスタイルとのバランスが崩れてしまうので注意してください。　　

WPF
MaterialDesignToolkit

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

2017-02-04(12:29) :
プログラミング :
コメント 0 :

このページのトップへ

ホーム

このページのトップへ

01 | 2017/02 | 03
日	月	火	水	木	金	土
-	-	-	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	-	-	-	-