locked
DatePickerの初期表示を変更したい RRS feed

  • 質問

  • Silverlight3、VS2008SP1(VB)で開発を行っております。

    質問させて頂きます。
    Silverlight3のDatePickerコントロールに初期値としてNothingを設定した場合、
    画面上のDatePickerコントロールには"<YYYY/MM/DD>"との文字列が表示されます。
    この文字列を表示させない方法を調べているのですが、いまいち、うまい方法に辿り着きません。

    同じような問題を解決された方は、いらっしゃいませんでしょうか。
    ヒントを頂ければと思います。
    • 編集済み 鹿児島 2009年7月30日 8:20
    2009年7月30日 7:02

回答

  • 自分もSilverlight初心者です。
    XAMLの勉強がてらサンプルを作成してみました。

    DatePcikerを拡張したコントロールを作成して、
    イベント時に値を設定することで望みの動作は実装できそうです。

    ただし自分のサンプルだと一度文字入力後に再び文字が空になるとデフォルトのウォーターマークが表示されますので、もう一工夫必要そうです。

    下記URLに紹介記事を書きました。
    http://coelacanth.heteml.jp/site/silverlight/article_10
    • 回答としてマーク 鹿児島 2009年8月3日 9:35
    2009年8月2日 10:23
  • 自分もSilverlight初心者です。
    XAMLの勉強がてらサンプルを作成してみました。

    DatePcikerを拡張したコントロールを作成して、
    イベント時に値を設定することで望みの動作は実装できそうです。

    ただし自分のサンプルだと一度文字入力後に再び文字が空になるとデフォルトのウォーターマークが表示されますので、もう一工夫必要そうです。

    下記URLに紹介記事を書きました。
    http://coelacanth.heteml.jp/site/silverlight/article_10

    sleeping_coelacanthさんの紹介記事のOnApplyTemplateのところでTextBoxにTextChangedイベントを登録して
    そこでWatermarkプロパティに空文字を入れ続けると、とりあえずウォーターマークは出なくなります。

    動作確認はしてないですが、イメージとしてはこんな感じになります。
    var text = GetTemplateChild("TextBox") as DatePickerTextBox;
    text.Watermark = "";
    text.TextChanged += (sender, e) => text.Watermark = "";

    Templateとかの差し替えだけでさくっとできればいいんですけどね…
    私が見た範囲では見つかりませんでした。
    かずき Blog:http://blogs.wankuma.com/kazuki/
    • 回答としてマーク 鹿児島 2009年8月3日 9:36
    2009年8月3日 7:01

すべての返信

  • 少し見た感じで記載しますので、可能かどうかはわかりませんが
    何かのヒントになるかも知れないので書いておきます。

    1)DatePickerを派生させDatePickerTextBoxのTemplaeを設定するプロパティーを公開
    2)DatePickerTextBoxのデフォルトTemplate、x:Name="Watermark"のContent="{TemplateBinding Watermark}"をやめる
    で出来そうな気がします。
    2009年7月31日 18:04
  • 私は DatePickerの変わりに Calenderを使いました 以下でCalenderだけが表示されます。
    <basics:Calendar x:Name="myCal" Margin="3"  SelectionMode="SingleDate" ></basics:Calendar>

    2009年8月1日 1:43
  • BlackB様

    あの薄いガイド文字はwatermarkと呼ぶのですね。大変参考になりました。
    DatePickerTextBoxにwatermarkプロパティがあるので、これを変更する事で薄いガイド文字を消す事は分かりました。
    ただ、DatePickerにあると思われるDatePickerTextBoxをどのように操作できるか調査が必要です。
    1)の実現方法を調べたいと思います。


    matty123様

    そうですね、最悪、Calenderを使って自作する事も視野に入れます。
    2009年8月1日 8:59
  • 自分もSilverlight初心者です。
    XAMLの勉強がてらサンプルを作成してみました。

    DatePcikerを拡張したコントロールを作成して、
    イベント時に値を設定することで望みの動作は実装できそうです。

    ただし自分のサンプルだと一度文字入力後に再び文字が空になるとデフォルトのウォーターマークが表示されますので、もう一工夫必要そうです。

    下記URLに紹介記事を書きました。
    http://coelacanth.heteml.jp/site/silverlight/article_10
    • 回答としてマーク 鹿児島 2009年8月3日 9:35
    2009年8月2日 10:23
  • DatePickerから派生
    OnApplyTemplateをオーバーライド、GetTemplateChild("TextBox")でDatePickerTextBoxを取り出す
    DatePickerTextBoxのstyleを変更
    (styleは依存プロパティーにし、変更通知でstyleを書き換えるようにした方が良いと思います)

    DatePickerTextBoxのデフォルトstyleは以下のようになっています。
    Content="{TemplateBinding Watermark}"の部分を
    Content="カスタム"などに変更したものを渡せば良いと思います
        <Style TargetType="primitives:DatePickerTextBox">
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="primitives:DatePickerTextBox">
                        <Grid x:Name="Root" >
                            <Grid.Resources>
                                <SolidColorBrush x:Key="WatermarkBrush" Color="#FFAAAAAA"/>
                            </Grid.Resources>
                            <vsm:VisualStateManager.VisualStateGroups>
                                <vsm:VisualStateGroup x:Name="CommonStates">
                                    <vsm:VisualStateGroup.Transitions>
                                        <vsm:VisualTransition GeneratedDuration="0" />
                                        <vsm:VisualTransition To="MouseOver" GeneratedDuration="0:0:0.1" />
                                    </vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualState x:Name="Normal" />
                                    <vsm:VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                                                <SplineColorKeyFrame KeyTime="0" Value="#FF99C1E2"/>
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="ContentElement2" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                                                <SplineColorKeyFrame KeyTime="0" Value="#FF99C1E2"/>
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name="WatermarkStates">
                                    <vsm:VisualStateGroup.Transitions>
                                        <vsm:VisualTransition GeneratedDuration="0" />
                                    </vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualState x:Name="Unwatermarked" />
                                    <vsm:VisualState x:Name="Watermarked">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Opacity" To="0" Duration="0" />
                                            <DoubleAnimation Storyboard.TargetName="Watermark" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name="FocusStates">
                                    <vsm:VisualStateGroup.Transitions>
                                        <vsm:VisualTransition GeneratedDuration="0" />
                                    </vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualState x:Name="Unfocused" />
                                    <vsm:VisualState x:Name="Focused">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                            </vsm:VisualStateManager.VisualStateGroups>
    
    
                            <!--Start UI-->
                            <Border x:Name="Border" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" Opacity="1" BorderBrush="{TemplateBinding BorderBrush}">
                                <Grid x:Name="WatermarkContent" Background="{TemplateBinding Background}">
                                    <Border x:Name="ContentElement" Background="{TemplateBinding Background}" BorderThickness="1" Padding="{TemplateBinding Padding}">
                                        <Border.BorderBrush>
                                            <SolidColorBrush Color="#FFFFFFFF"/>
                                        </Border.BorderBrush>
                                    </Border>
                                    <Border x:Name="ContentElement2" BorderThickness="1">
                                        <Border.BorderBrush>
                                            <SolidColorBrush Color="#FFFFFFFF"/>
                                        </Border.BorderBrush>
                                        <ContentControl
                                      x:Name="Watermark"
                                      Opacity="0"
                                      IsTabStop="False"
                                      IsHitTestVisible="False"
                                      Content="{TemplateBinding Watermark}"
                                      Foreground="{StaticResource WatermarkBrush}"
                                      FontSize="{TemplateBinding FontSize}"
                                      Background="{TemplateBinding Background}"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                      Padding="2"/>
                                    </Border>
                                    <Border x:Name="FocusVisual" BorderBrush="#FF6DBDD1" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" Opacity="0" IsHitTestVisible="False"/>
                                </Grid>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    2009年8月2日 15:23
  • 自分もSilverlight初心者です。
    XAMLの勉強がてらサンプルを作成してみました。

    DatePcikerを拡張したコントロールを作成して、
    イベント時に値を設定することで望みの動作は実装できそうです。

    ただし自分のサンプルだと一度文字入力後に再び文字が空になるとデフォルトのウォーターマークが表示されますので、もう一工夫必要そうです。

    下記URLに紹介記事を書きました。
    http://coelacanth.heteml.jp/site/silverlight/article_10

    sleeping_coelacanthさんの紹介記事のOnApplyTemplateのところでTextBoxにTextChangedイベントを登録して
    そこでWatermarkプロパティに空文字を入れ続けると、とりあえずウォーターマークは出なくなります。

    動作確認はしてないですが、イメージとしてはこんな感じになります。
    var text = GetTemplateChild("TextBox") as DatePickerTextBox;
    text.Watermark = "";
    text.TextChanged += (sender, e) => text.Watermark = "";

    Templateとかの差し替えだけでさくっとできればいいんですけどね…
    私が見た範囲では見つかりませんでした。
    かずき Blog:http://blogs.wankuma.com/kazuki/
    • 回答としてマーク 鹿児島 2009年8月3日 9:36
    2009年8月3日 7:01
  • sleeping_coelacanth 様
    BlackB 様
    a_かずき_ 様

    皆様、ご回答有難う御座いました。
    sleeping_coelacanth様、a_かずき_様の方法で回避する事を確認致しました。
    ただ、BlackB様の構想で実現できると言う事無しですね。
    今回は質問を閉じさせて頂きますが、引き続き、勉強を兼ねて調査したいと思います。

    きっかけを与えて下さった皆様に感謝します。有難う御座いました。
    2009年8月3日 9:34