Have added a command button to WatermarkTextBox

[stefanolson]

I have added a command button like what you see in the search charm (with the magnifying glass) to the WatermarkTextBox. I'm not totally clear how to provide the code, so here it is, in case anybody is interested: in WatermarkTextBox.cs: ///

/// ShowCommandButton Dependency Property ///

public static readonly DependencyProperty ShowCommandButtonProperty = DependencyProperty.Register("ShowCommandButton", typeof(bool), typeof(WatermarkTextBox), new PropertyMetadata((bool)false));

///

/// Gets or sets the ShowCommandButton property. This dependency property /// indicates .... ///

public bool ShowCommandButton { get { return (bool)GetValue(ShowCommandButtonProperty); } set { SetValue(ShowCommandButtonProperty, value); } }

///

/// CommandButtonCommand Dependency Property ///

public static readonly DependencyProperty CommandButtonCommandProperty = DependencyProperty.Register("CommandButtonCommand", typeof(ICommand), typeof(WatermarkTextBox), new PropertyMetadata(null));

///

/// Gets or sets the CommandButtonCommand property. This dependency property /// indicates .... ///

public ICommand CommandButtonCommand { get { return (ICommand)GetValue(CommandButtonCommandProperty); } set { SetValue(CommandButtonCommandProperty, value); } }

///

/// CommandButtonStyle Dependency Property ///

public static readonly DependencyProperty CommandButtonStyleProperty = DependencyProperty.Register("CommandButtonStyle", typeof(Style), typeof(WatermarkTextBox), new PropertyMetadata((Style)null));

///

/// Gets or sets the CommandButtonStyle property. This dependency property /// indicates .... ///

public Style CommandButtonStyle { get { return (Style)GetValue(CommandButtonStyleProperty); } set { SetValue(CommandButtonStyleProperty, value); } }

In Generic.Xaml: In the WatermarkTextBox grid resources

<converters:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>

and in the grid

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border x:Name="BackgroundElement"
        Background="{TemplateBinding Background}"
        Margin="{TemplateBinding BorderThickness}"
        Grid.ColumnSpan="3"/>
<Border x:Name="BorderElement"
        BorderBrush="{TemplateBinding BorderBrush}"
        BorderThickness="{TemplateBinding BorderThickness}"
        Grid.ColumnSpan="3"/>
<ScrollViewer x:Name="ContentElement"
                HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                Margin="{TemplateBinding BorderThickness}"
                Padding="{TemplateBinding Padding}"
                IsTabStop="False"
                ZoomMode="Disabled"/>
<TextBlock x:Name="PART_Watermark"
            Text="{TemplateBinding Watermark}"
            Foreground="{StaticResource TextBoxDisabledForegroundThemeBrush}"
            FontStyle="Italic"
            IsHitTestVisible="False"
            Visibility="Collapsed"
            Margin="{StaticResource TextControlBorderThemeThickness}"
            Padding="{StaticResource TextControlThemePadding}"
            FontFamily="{StaticResource ContentControlThemeFontFamily}"
            FontSize="{StaticResource ControlContentThemeFontSize}"/>
<Button x:Name="DeleteButton"
        Style="{StaticResource DeleteButtonStyle}"
        BorderThickness="{TemplateBinding BorderThickness}"
        IsTabStop="False"
        Grid.Column="1"
        Visibility="Collapsed"
        FontSize="{TemplateBinding FontSize}"
        VerticalAlignment="Stretch"/>
<Button x:Name="CommandButton"
        Style="{TemplateBinding CommandButtonStyle}"
        BorderThickness="{TemplateBinding BorderThickness}"
        IsTabStop="False"
        Grid.Column="2"
        Command="{TemplateBinding CommandButtonCommand}"
        Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ShowCommandButton, Converter={StaticResource BooleanToVisibilityConverter}}"
        FontSize="{TemplateBinding FontSize}"
        VerticalAlignment="Stretch"/>

And finally to use it, set up a style in your page:

<Style x:Name="CommandButtonStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundElement"
                                                                                        Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TextBoxButtonPointerOverBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement"
                                                                                        Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TextBoxButtonPointerOverBorderThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement"
                                                                                        Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TextBoxButtonPointerOverForegroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundElement"
                                                                                        Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement"
                                                                                        Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TextBoxButtonPressedBorderThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement"
                                                                                        Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TextBoxButtonForegroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="BackgroundElement"
                                                                            Storyboard.TargetProperty="Opacity"
                                                                            To="0"
                                                                            Duration="0" />
                                    <DoubleAnimation Storyboard.TargetName="BorderElement"
                                                                            Storyboard.TargetProperty="Opacity"
                                                                            To="0"
                                                                            Duration="0" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="BorderElement"
                                                BorderBrush="{StaticResource TextBoxButtonBorderThemeBrush}"
                                                BorderThickness="{TemplateBinding BorderThickness}"/>
                    <Border x:Name="BackgroundElement"
                                                Background="{StaticResource DialogBackgroundBrush}"
                                                Margin="{TemplateBinding BorderThickness}" Width="28" Height="28"/>
                    <TextBlock x:Name="GlyphElement"
                                                        Foreground="{StaticResource ApplicationForegroundThemeBrush}"
                                                        VerticalAlignment="Center"
                                                        HorizontalAlignment="Center"
                                                        Text="&#xE11A;"
                                                        FontFamily="{StaticResource SymbolThemeFontFamily}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

and use it:

<Controls:WatermarkTextBox x:Name="FindBox" KeyUp="SearchTextChanged" KeyDown="SearchTextKeyDown" Grid.Column="1" ShowCommandButton="True" CommandButtonStyle="{StaticResource CommandButtonStyle}"/>

[timheuer]

I understand what this is, but not going to pull it into the project. This can be accomplished by subclass-retemplate and not a general purpose control currently.