Watermark on AutoCompleteBox

10-30-2009 7:51 AM |

I am trying to implement the watermark on the AutoCompleteBox. There is no direct provision so I am tweaking with the template of AutoCompleteBox. Here is the doe by default for AutoCompleteBox...Here there is TextBox control that control I want to replace by my custome WaterMarkTextBox...but just wondering How can I fet the control object from code behind. I tried this.MyTextBox or this.GetTemplateChild...nothing is working for me to reach to the Textbox what is the best way for this

-->

<UserControl
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:input="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input" xmlns:System="clr-namespace:System;assembly=mscorlib"
 x:Class="SilverlightApplication3.MainPage"
 Width="640" Height="480">

 <UserControl.Resources>
  <ControlTemplate x:Key="CommonValidationToolTipTemplate" TargetType="ToolTip">
   <Grid x:Name="Root" Margin="5,0" Opacity="0" RenderTransformOrigin="0,0">
    <VisualStateManager.VisualStateGroups>
     <VisualStateGroup x:Name="OpenStates">
      <VisualStateGroup.Transitions>
       <VisualTransition GeneratedDuration="0"/>
       <VisualTransition GeneratedDuration="0:0:0.2" To="Open">
        <Storyboard>
         <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="Translation" Storyboard.TargetProperty="X" To="0">
          <DoubleAnimation.EasingFunction>
           <BackEase Amplitude=".3" EasingMode="EaseOut"/>
          </DoubleAnimation.EasingFunction>
         </DoubleAnimation>
         <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1"/>
        </Storyboard>
       </VisualTransition>
      </VisualStateGroup.Transitions>
      <VisualState x:Name="Closed">
       <Storyboard>
        <DoubleAnimation Duration="0" Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="0"/>
       </Storyboard>
      </VisualState>
      <VisualState x:Name="Open">
       <Storyboard>
        <DoubleAnimation Duration="0" Storyboard.TargetName="Translation" Storyboard.TargetProperty="X" To="0"/>
        <DoubleAnimation Duration="0" Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1"/>
       </Storyboard>
      </VisualState>
     </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid.RenderTransform>
     <TranslateTransform x:Name="Translation" X="-25"/>
    </Grid.RenderTransform>
    <Border Margin="4,4,-4,-4" Background="#052A2E31" CornerRadius="5"/>
    <Border Margin="3,3,-3,-3" Background="#152A2E31" CornerRadius="4"/>
    <Border Margin="2,2,-2,-2" Background="#252A2E31" CornerRadius="3"/>
    <Border Margin="1,1,-1,-1" Background="#352A2E31" CornerRadius="2"/>
    <Border Background="#FFDC000C" CornerRadius="2">
     <TextBlock Margin="8,4,8,4" MaxWidth="250" UseLayoutRounding="false" Foreground="#FFFFFFFF" Text="{Binding (Validation.Errors)[0].Exception.Message}" TextWrapping="Wrap"/>
    </Border>
   </Grid>
  </ControlTemplate>
  <Style x:Key="AutoCompleteBoxStyle1" TargetType="input:AutoCompleteBox">
   <Setter Property="IsTabStop" Value="False"/>
   <Setter Property="Padding" Value="2"/>
   <Setter Property="BorderThickness" Value="1"/>
   <Setter Property="BorderBrush">
    <Setter.Value>
     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
      <GradientStop Color="#FFA3AEB9" Offset="0"/>
      <GradientStop Color="#FF8399A9" Offset="0.375"/>
      <GradientStop Color="#FF718597" Offset="0.375"/>
      <GradientStop Color="#FF617584" Offset="1"/>
     </LinearGradientBrush>
    </Setter.Value>
   </Setter>
   <Setter Property="Background" Value="#FFFFFFFF"/>
   <Setter Property="Foreground" Value="#FF000000"/>
   <Setter Property="MinWidth" Value="45"/>
   <Setter Property="Template">
    <Setter.Value>
     <ControlTemplate TargetType="input:AutoCompleteBox">
      <Grid Opacity="{TemplateBinding Opacity}">
       <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="PopupStates">
         <VisualStateGroup.Transitions>
          <VisualTransition GeneratedDuration="0:0:0.1" To="PopupOpened"/>
          <VisualTransition GeneratedDuration="0:0:0.2" To="PopupClosed"/>
         </VisualStateGroup.Transitions>
         <VisualState x:Name="PopupOpened">
          <Storyboard>
           <DoubleAnimation Storyboard.TargetName="PopupBorder" Storyboard.TargetProperty="Opacity" To="1.0"/>
          </Storyboard>
         </VisualState>
         <VisualState x:Name="PopupClosed">
          <Storyboard>
           <DoubleAnimation Storyboard.TargetName="PopupBorder" Storyboard.TargetProperty="Opacity" To="0.0"/>
          </Storyboard>
         </VisualState>
        </VisualStateGroup>
        <VisualStateGroup x:Name="ValidationStates">
         <VisualState x:Name="Valid"/>
         <VisualState x:Name="InvalidUnfocused">
          <Storyboard>
           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement" Storyboard.TargetProperty="Visibility">
            <DiscreteObjectKeyFrame KeyTime="0">
             <DiscreteObjectKeyFrame.Value>
              <Visibility>Visible</Visibility>
             </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
           </ObjectAnimationUsingKeyFrames>
          </Storyboard>
         </VisualState>
         <VisualState x:Name="InvalidFocused">
          <Storyboard>
           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement" Storyboard.TargetProperty="Visibility">
            <DiscreteObjectKeyFrame KeyTime="0">
             <DiscreteObjectKeyFrame.Value>
              <Visibility>Visible</Visibility>
             </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
           </ObjectAnimationUsingKeyFrames>
           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="validationTooltip" Storyboard.TargetProperty="IsOpen">
            <DiscreteObjectKeyFrame KeyTime="0">
             <DiscreteObjectKeyFrame.Value>
              <System:Boolean>True</System:Boolean>
             </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
           </ObjectAnimationUsingKeyFrames>
          </Storyboard>
         </VisualState>
        </VisualStateGroup>
       </VisualStateManager.VisualStateGroups>
       <TextBox x:Name="Text" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Foreground="{TemplateBinding Foreground}" IsTabStop="True" Padding="{TemplateBinding Padding}" Margin="0" Style="{TemplateBinding TextBoxStyle}"/>
       <Border x:Name="ValidationErrorElement" Visibility="Collapsed" BorderBrush="#FFDB000C" BorderThickness="1" CornerRadius="1">
        <ToolTipService.ToolTip>
         <ToolTip x:Name="validationTooltip" Template="{StaticResource CommonValidationToolTipTemplate}" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" Placement="Right" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}">
          <ToolTip.Triggers>
           <EventTrigger RoutedEvent="Canvas.Loaded">
            <BeginStoryboard>
             <Storyboard>
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="validationTooltip" Storyboard.TargetProperty="IsHitTestVisible">
               <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                 <System:Boolean>true</System:Boolean>
                </DiscreteObjectKeyFrame.Value>
               </DiscreteObjectKeyFrame>
              </ObjectAnimationUsingKeyFrames>
             </Storyboard>
            </BeginStoryboard>
           </EventTrigger>
          </ToolTip.Triggers>
         </ToolTip>
        </ToolTipService.ToolTip>
        <Grid Height="12" HorizontalAlignment="Right" Margin="1,-4,-4,0" VerticalAlignment="Top" Width="12" Background="Transparent">
         <Path Fill="#FFDC000C" Margin="1,3,0,0" Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 z"/>
         <Path Fill="#ffffff" Margin="1,3,0,0" Data="M 0,0 L2,0 L 8,6 L8,8"/>
        </Grid>
       </Border>
       <Popup x:Name="Popup">
        <Grid Opacity="{TemplateBinding Opacity}">
         <Border x:Name="PopupBorder" HorizontalAlignment="Stretch" Opacity="0" Background="#11000000" BorderThickness="0">
          <Border.RenderTransform>
           <TranslateTransform X="1" Y="1"/>
          </Border.RenderTransform>
          <Border HorizontalAlignment="Stretch" Opacity="1.0" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" Padding="0">
           <Border.RenderTransform>
            <TransformGroup>
             <TranslateTransform X="-1" Y="-1"/>
            </TransformGroup>
           </Border.RenderTransform>
           <Border.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
             <GradientStop Color="#FFDDDDDD" Offset="0"/>
             <GradientStop Color="#AADDDDDD" Offset="1"/>
            </LinearGradientBrush>
           </Border.Background>
           <ListBox x:Name="Selector" Background="{TemplateBinding Background}" BorderThickness="0" Foreground="{TemplateBinding Foreground}" ItemTemplate="{TemplateBinding ItemTemplate}" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" ItemContainerStyle="{TemplateBinding ItemContainerStyle}"/>
          </Border>
         </Border>
        </Grid>
       </Popup>
      </Grid>
     </ControlTemplate>
    </Setter.Value>
   </Setter>
  </Style>
 </UserControl.Resources>

 <Grid x:Name="LayoutRoot" Background="White">
  <input:AutoCompleteBox Height="28" HorizontalAlignment="Left" Margin="72,56,0,0" Style="{StaticResource AutoCompleteBoxStyle1}" VerticalAlignment="Top" Width="191"/>
 </Grid>
</UserControl> 

Re: Watermark on AutoCompleteBox

10-31-2009 7:47 AM |

Have you had a read about how Tim Heuer did this for a textbox. I imagine the same concept can be ported quite easily to the text portion of a combo/autocomplete box.

http://timheuer.com/blog/archive/2008/10/22/silverlight-watermark-text-box-control.aspx

Re: Re: Watermark on AutoCompleteBox

10-31-2009 10:53 AM |

Thanks but its not useful for me in this situation. It talks about Silverlight Beta when Watermark was included in the TextBox. in SL3 its removed. My question is, how to get the control (TextBox) in the Control.Resources of AutoCompleteBox. So that I can programatically change the setting for TextBox. I may replace TextBox with my own Custom WatermarkTesxtBox...but my issue is I am not getting the control itself programatically.....thanks

Re: Re: Re: Watermark on AutoCompleteBox

10-31-2009 1:30 PM |

If you look at the source code it shows you how to do what you want which is manipulate the various visual states on a control to give the effect you want.

The control wasn't part of SL2 it was just an excellent example of what you could do with the visual state manager. Take some time to look at the source and you'll see it's doing the same sort of thing you want for your autocompletebox.

Re: Re: Watermark on AutoCompleteBox

11-02-2009 3:55 PM |

This seems to be a common issue.  You want to use the VisualTreeHelper.  See this post:

http://forums.silverlight.net/forums/p/139431/311462.aspx#311462

Re: Re: Re: Watermark on AutoCompleteBox

11-03-2009 12:10 AM |

Can anyone help me with the sample code. Using VisualTreeHelper I am unable to reach to the TextBox control as mentioned in my original XAML code. Thanks.