スポンサーサイト

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

【Material Design Toolkit】 ToggleButtonのスタイル

 Material Design Toolkitが用意しているToggleButtonのスタイルは大きく分けて4種類あります。
    <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>
MaterialDesignToggleButton.png
 MaterialDesignActionToggleButtonはLight、Mid(標準)、Dark、Accentの4つのバリエーションがあります。
 このスタイルはIsCheckedがtrueになると〇型のボタンが回転してチェックマークが表示されます。
 ToggleButtonAssist.OnContentを指定することでIsCheckedがtrueの場合のコンテンツを自由に指定することができます。

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

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

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

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

【Material Design Toolkit】 RadioButtonのスタイル

 Material Design Toolkitが提供しているRadioButtonのスタイルは色違いのバリエーションがあるだけで実質1種類です。
<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>
 見た目は以下の様になります。
MaterialDesignRadioButton.png
 見ての通り色の違いがあるだけです。
 MaterialDesignDarkRadioButtonはDarkテーマ使用時に使われるスタイルのため文字の色が白になります。そのため、サンプルコードではStackPanelにGrayを指定しています。
 テーマがLightの場合はMaterialDesignRadioButtonが、Darkの場合はMaterialDesignDarkRadioButtonがデフォルトスタイルとして使用されます。
 その為通常はStyleを指定せずに使用できます。
 RadioButtonにLightカラー又はアクセントカラーを使用したい時のみ対応するスタイルを指定すればよいと思います。

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

【Material Design Toolkit】 ComboBox

 Material Design ToolkitのComboBoxスタイルには2種類あり、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>
 見た目は以下の様になります。
Material Design ComboBox
 スタイルを指定しなかった場合はMaterialDesignComboBoxが適応されます。
 ErrorTemplateも指定されているので、ViewModelがINotifyDataErrorInfoを実装していればバインディングするだけでOKです。
 ヒントやデータ検証設定の方法はTextBoxの時と同じなので説明は省略します。

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

【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を指定してください。
 エラーメッセージを表示しないだけでデータ検証は行われていますのでアンダーラインが赤色になっています。

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

【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スタイルとのバランスが崩れてしまうので注意してください。    

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

カレンダー
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 - - - -
全記事表示リンク

全ての記事を表示する

カテゴリ
タグリスト

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