FC2ブログ

スポンサーサイト

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

【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の時と同じなので説明は省略します。
スポンサーサイト

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

コメントの投稿

非公開コメント

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