スポンサーサイト

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

【Material Design Toolkit】 DatePicker

 DatePickerは日付を選択するためのコントロールで、TimePickerとほぼ同じ動きをします。
 Material Design Toolkitでは2種類のスタイルが定義されていますが、そのうちの1つはフロートヒント機能をONにしただけなので見た目や使い方はほぼ同じです。
<StackPanel>
    <DatePicker SelectedDate="{Binding Date}" Margin="10"/>
    <DatePicker SelectedDate="{Binding Date2}" Margin="10"
                Style="{StaticResource MaterialDesignFloatingHintDatePicker}"
                materialDesign:HintAssist.Hint="日付"
                SelectedDateFormat="Long"
                IsTodayHighlighted="False"
                FirstDayOfWeek="Monday"
                DisplayDateStart="2017/7/1" DisplayDateEnd="2017/7/25"/>
</StackPanel>
 このコードを実行すると以下の様になります。
MaterialDesign_DatePicker-1.png MaterialDesign_DatePicker-2.png
 TimePickerと同じような見た目で、日付テキストボックスとカレンダーボタンが表示されます。
 テキストボックスに日付を入力することもできますし、カレンダーから指定することもできます。
 SelectedDateFormatプロパティは日付テキストの書式設定でShort(デフォルト)の場合は「2017/07/01」の様に表示されます。
 Longの場合は「2017年7月2日」の様に表示されます。
 IsTodayHighlightedプロパティがTrueの場合はカレンダー表示時に今日の日付がハイライトされます。
 FirstDayOfWeekプロパティを変更するとカレンダーの週初めの曜日を変更できます。
 DisplayDateStartとDisplayDataEndはカレンダーに表示する範囲を指定できます。
 画像のカレンダーは7/1から7/25までを表示させるようにしているので、26日以降が非表示になっています。

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

【Material Design Toolkit】 TimePicker

 TimePickerは名前の通り時刻を指定するためのコントロールです。
 前回紹介したClockも時刻の指定は可能でしたが、TimePickerの方がより使いやすいコントロールになっています。(というかClockはTimePickerの一部と考えたほうがよさそうです。)
 このコードを実行すると以下の様になります。
MaterialDesign TimePicker1 MaterialDesign TimePicker2
 TimePickerは時刻の表示・編集用のテキストボックスと時計マークのボタンで構成されています。
 時計マークボタンを押すとClockが表示され時刻の変更ができます。
 テキストボックスから時刻を編集することも可能です。
 デフォルトではClockの表示はAM・PM表示ですが、Is24HoursをTrueにすることで24時間表記に変更できます。
 SelectedTimeFormatをLongにすることでTimePickerの時刻表示を秒まで表示することができますが、Clockコントロールでは秒の変更はできません。(テキスト入力でのみ変更可能です)
 FlowDirectionをRightToLeftにすると時計マークボタンとテキストボックスの順序が逆になります。

 TimePickerには標準スタイルの他にMaterialDesignFloatingHintTimePickerが定義されていますが、このスタイルはフロートヒントを表示させているだけで他の設定は標準スタイルと同じです。  

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

【Material Design Toolkit】 Clock

 ClockはWPFにはないコントロールで時間と分を指定することで時刻を変更することもできます。(秒の指定は無理みたいです)
<StackPanel Orientation="Horizontal">
    <GroupBox Header="AM.PM" Margin="5">
        <materialDesign:Clock Time="{Binding Date}" 
                                DisplayAutomation="Cycle"
                                DisplayMode="Hours"/>
    </GroupBox>

    <GroupBox Header="24時間表記" Margin="5">
        <materialDesign:Clock Time="{Binding Date2}" Is24Hours="True"/>
    </GroupBox>

    <GroupBox Header="分だけ指定" Margin="5">
        <materialDesign:Clock Time="{Binding Date3}"
                                DisplayAutomation="ToMinutesOnly"
                                DisplayMode="Minutes"/>
    </GroupBox>
</StackPanel>
 このコードを実行すると以下の様に表示されます。
MaterialDesign Clock
 TimeプロパティにDateTime型のプロパティをデータバインディングします。
 Is24HoursプロパティをfalseにするとAM・PMで時刻を表示します。(左のコントロール)
 Is24Hoursプロパティをtrueにすると24時間表記で時刻を表示します。(真ん中のコントロール)
 Clockコントロールでは見ての通り、時間と分を両方同時に表示しません。
 どちらを表示するかはDisplayModeプロパティで指定できます。
 DisplayAutomationプロパティをCycleに指定することで時間を指定すると分が表示されます。
 そして分を指定すると時間表示に戻ります。
 DisplayModeとDisplayAutomationを指定することで分だけ表示・変更するといったことも可能です。
 

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

【Material Design Toolkit】 Chip

 Chipはアイコンとコンテンツからなる小さなコントロールで、詳細情報へのエントリーポイントとして使用します。
<StackPanel>
    <materialDesign:Chip Content="Chip1" Margin="5" Click="Chip_Click"/>
    <materialDesign:Chip Icon="A" Content="Chip2" Margin="5"/>
    <materialDesign:Chip Content="Chip3" Margin="5"
                            IconBackground="{StaticResource SecondaryAccentBrush}"
                            IconForeground="{StaticResource SecondaryAccentForegroundBrush}">
        <materialDesign:Chip.Icon>
            <materialDesign:PackIcon Kind="Gift"/>
        </materialDesign:Chip.Icon>
    </materialDesign:Chip>
    <materialDesign:Chip Icon="C" Content="Chip4" IsDeletable="True" Margin="5"
                            DeleteClick="Chip_DeleteClick"/>
</StackPanel>
 このコードを実行すると以下の様になります。
MaterialDesign Chip
 ChipはIconプロパティとContentプロパティを持っていて、Iconプロパティを指定した場合は丸の中に指定したアイコンが表示されます。
 Iconプロパティを指定しない場合はアイコンは表示されません。
 Iconプロパティには文字だけでなく画像やPackIcon等も表示できます。
 Iconの色を指定したい場合はIconBackgroundプロパティとIconForegroundプロパティを変更します。

 Chipをクリックした場合はClickイベントが発生します。
 詳細情報の表示などのアクションを行いたい場合はClickイベントを使用してください。

 IsDeletableプロパティをTrueにするとChipの右端に×ボタンが表示されます。
 ×ボタンを押した場合はDeleteClickイベントが発生します。

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

【Material Design Toolkit】 PopupBox

 PopupBoxは標準のWPFにはないコントロールです。
 名前の通りコントロールをクリック又はマウスオーバーでポップアップを表示させることができます。
 PopupBoxでは使用するスタイルによって見た目も使用方法も大きく異なるコントロールになります。
 なお、PopupBoxを使用するためにはResourceDictionaryにPopupBox.xamlを追加する必要があります。
 (PopupBox.xamlはなぜかDefaults.xamlに入っていないため別途追記する必要があります。)
 PopupBoxを使用する場合のApp.xamlは以下の様になります。
<Application x:Class="MdDemo.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="Views\MainWindow.xaml"
             Startup="Application_Startup">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.PopupBox.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

    <StackPanel Orientation="Horizontal">
        <materialDesign:PopupBox Margin="20">
            <StackPanel Margin="10">
                <CheckBox Content="Item1"/>
                <CheckBox Content="Item2"/>
                <CheckBox Content="Item3"/>
            </StackPanel>
        </materialDesign:PopupBox>

        <materialDesign:PopupBox ToggleContent="選択" StaysOpen="True" Margin="20">
            <StackPanel Margin="10">
                <CheckBox Content="Item1"/>
                <CheckBox Content="Item2"/>
                <CheckBox Content="Item3"/>
            </StackPanel>
        </materialDesign:PopupBox>

        <materialDesign:PopupBox Style="{StaticResource MaterialDesignMultiFloatingActionLightPopupBox}"
                            Margin="20">
            <StackPanel>
                <Button Content="A"/>
                <Button Content="B"/>
            </StackPanel>
        </materialDesign:PopupBox>

        <materialDesign:PopupBox Style="{StaticResource MaterialDesignMultiFloatingActionPopupBox}"
                            Margin="20" PlacementMode="BottomAndAlignCentres" >
            <StackPanel>
                <Button Content="A"/>
                <Button Content="B"/>
            </StackPanel>
        </materialDesign:PopupBox>

        <materialDesign:PopupBox Style="{StaticResource MaterialDesignMultiFloatingActionDarkPopupBox}"
                            Margin="20">
            <StackPanel>
                <Button Content="A"/>
                <Button Content="B"/>
            </StackPanel>
        </materialDesign:PopupBox>

        <materialDesign:PopupBox Style="{StaticResource MaterialDesignMultiFloatingActionAccentPopupBox}"
                            Margin="20">
            <StackPanel>
                <Button Content="A"/>
                <Button Content="B"/>
            </StackPanel>
        </materialDesign:PopupBox>
    </StackPanel>
MaterialDesignPupupBox1.png
 スタイルを指定しない場合はMaterialDesignPopupBoxスタイルが適用されます。
 MaterialDesignPopupBoxの場合は点が縦に3つ並んだフラットボタンが表示されます。
 このボタンをクリックすると指定したポップアップコンテンツが表示されます。
 デフォルトではポップアップコンテンツ内で1回クリックするとポップアップコンテンツが非表示になります。
 StaysOpenプロパティをTrueに指定していればポップアップコンテンツ外をクリックするまで表示され続けます。
 ToggleContentプロパティを変更するとPopupBoxの表示を変更することができます。

 MaterialDesignMultiFloatingActionPopupBoxスタイル(色違いで4種類あり)を指定した場合は見た目がMaterialDesignFloatingActionButtonの様になります。
 こちらのスタイルではマウスオーバーした際にポップアップコンテンツが表示されるようになります。
 ポップアップコンテンツ内にボタンを配置した場合、スタイルの指定がない場合はMaterialDesignFloatingActionMiniLightButtonが適用されて小さい丸いボタンになります。

 ポップアップコンテンツの表示場所はPlacementModeで変更できます。
 例えばBottomAndAlignCentersの場合はPopupBoxの下にポップアップコンテンツを表示し、コンテンツは中央揃えで配置されます。
 以下の図はBottomAndXxxを指定した際の比較画像です。
 わかりやすくするために1つめのボタンを大きくしています。
MaterialDesignPupupBox2.png

 Left又はRightの場合はBottom(Top)の時とコンテンツの配置方法が変わります。
 以下の図はLeftAndXxxを指定した際の比較画像です。
MaterialDesignPupupBox3.png

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

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

全ての記事を表示する

カテゴリ
タグリスト

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