Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Watermark Searchbox in Ribbon

0.00/5 (No votes)
26 Aug 2016 1  
How to solve the problem to show a searchbox in Ribbon including watermark in explorer style

Introduction

The published example demonstrates how to create a WatermarkTextBox in WPF shown in the Ribbon. The main problem was, in Ribbon, no images are shown...

Using the Code

Let's just jump right to it:

<RibbonWindow x:Class="Watermarksearchbar.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Watermarksearchbar" Height="350" Width="525" Icon="Images/ersatzteile.ico" 
         ResizeMode="NoResize" WindowStartupLocation="CenterScreen">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Ribbon x:Name="Ribbon" ShowQuickAccessToolBarOnTop="True">
            <RibbonTab x:Name="HomeTab" Header="Start">
                <RibbonGroup Header="Test" x:Name="Group5" IsEnabled="True">
                    <Grid x:Name="WatermarkWrapper" Margin="5,5,0,0">
                        <DockPanel>
                            <Button x:Name="Searchbutton" Click="Searchbutton_Click" 
                             DockPanel.Dock="Right" HorizontalAlignment="Right" Height="22" 
                             Width="22" Foreground="Black"  
                             ScrollViewer.VerticalScrollBarVisibility="Disabled" Focusable="False" >
                                <Button.Resources>
                                    <Style BasedOn="{StaticResource 
                                    {x:Static ToolBar.ButtonStyleKey}}" TargetType="Button">
                                        <Setter Property="Foreground" 
                                        Value="{DynamicResource 
                                        {x:Static SystemColors.ControlTextBrushKey}}"/>
                                        <Setter Property="Padding" Value="5"/>
                                        <Setter Property="BorderThickness" Value="0,1,1,1"/>
                                        <Setter Property="Background" Value="White"/>
                                        <Setter Property="BorderBrush" Value="#FFB9C9DA"/>
                                        <Setter Property="HorizontalAlignment" Value="Left"/>
                                        <Setter Property="VerticalAlignment" Value="Top"/>
                                        <Setter Property="HorizontalContentAlignment" Value="Center"/>
                                        <Setter Property="VerticalContentAlignment" Value="Center"/>
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="{x:Type Button}">
                                                    <Border x:Name="Bd" SnapsToDevicePixels="true" 
                                                    Background="{TemplateBinding Background}"
                                                     BorderBrush="{TemplateBinding BorderBrush}" 
                                                     BorderThickness="{TemplateBinding BorderThickness}" 
                                                     Padding="{TemplateBinding Padding}">
                                                        <ContentPresenter HorizontalAlignment="
                                                        {TemplateBinding HorizontalContentAlignment}" 
                                                        SnapsToDevicePixels=
                                                        "{TemplateBinding SnapsToDevicePixels}" 
                                                        VerticalAlignment="Top" Height="16" 
                                                        Margin="0,-4,0,0"/>
                                                    </Border>
                                                    <ControlTemplate.Triggers>
                                                        <Trigger Property="IsEnabled" 
                                                        Value="False">
                                                            <Setter Property="Background" 
                                                            Value="#FFE8EDF9"/>
                                                        </Trigger>
                                                    </ControlTemplate.Triggers>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </Button.Resources>
                                <StackPanel>
                                    <Path x:Name="Search_Cross" Data="M0,0 L6,6 M6,0 L0,6" 
                                    StrokeThickness="2" Stroke="#FF386BB1" 
                                    VerticalAlignment="Center" Margin="0,6,0,0" 
                                    Visibility="Collapsed" />
                                    <Path x:Name="Search_Lupe" 
                                    Data="M44,12 C32,12 22,22 22,34 22,46 32,56 44,56 56,
                                    56 66,46 66,34 66,22 56,12 44,12z M44,0 C63,0 78,15 78,
                                    34 78,53 63,68 44,68 40,68 36.5,67.5 33,66 L32.5,66 14,90 0,
                                    79.5 18,55.5 17,55 C13,49 10,42 10,34 10,15 25,0 44,0z" 
                                    StrokeThickness="0" Stroke="#FF386BB1" Fill="#FF386BB1" 
                                    VerticalAlignment="Center" Margin="0,2,0,0" Stretch="Uniform" />
                                </StackPanel>
                            </Button>
                            <TextBox ContextMenu="{x:Null}" x:Name="txtFilter" 
                            TextChanged="txtFilter_TextChanged" MinWidth="100" 
                            MaxWidth="100" Width="100" Text="">
                                <TextBox.Resources>
                                    <!-- colors and brushes -->
                                </TextBox.Resources>
                                <TextBox.Style>
                                    <Style TargetType="{x:Type TextBox}">
                                        <!-- styling -->
                                    </Style>
                                </TextBox.Style>
                            </TextBox>
                        </DockPanel>
                        <TextBlock IsHitTestVisible="False" Text="Search" 
                        VerticalAlignment="Center" HorizontalAlignment="Left" 
                        Margin="10,0,0,0" Foreground="Gray" FontStyle="Italic">
                            <TextBlock.Style>
                                <Style TargetType="{x:Type TextBlock}">
                                    <Setter Property="Visibility" Value="Collapsed" />
                                    <Style.Triggers>
                                        <MultiDataTrigger>
                                            <MultiDataTrigger.Conditions>
                                                <Condition Binding="{Binding Text, 
                                                ElementName=txtFilter}" Value="" />
                                                <Condition Binding="{Binding ElementName=txtFilter, 
                                                Path=IsKeyboardFocused}" Value="False" />
                                            </MultiDataTrigger.Conditions>
                                            <MultiDataTrigger.Setters>
                                                <Setter Property="Visibility" Value="Visible" />
                                            </MultiDataTrigger.Setters>
                                        </MultiDataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </TextBlock.Style>
                        </TextBlock>
                    </Grid>
                </RibbonGroup>
            </RibbonTab>
        </Ribbon>
        <Border BorderBrush="Black" BorderThickness="0" Grid.Row="1">
            <ListView x:Name="lvUsers" 
                UseLayoutRounding="True" AlternationCount="2" Margin="0" 
                FocusVisualStyle="{x:Null}" BorderThickness="0" >
                <ListView.View>
                    <GridView x:Name="gv" AllowsColumnReorder="False">
                        <GridViewColumn Width="150" >
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding Name}" 
                                    Height="21" VerticalAlignment="Center" />
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                            <GridViewColumnHeader Content="Name"/>
                        </GridViewColumn>
                        <GridViewColumn Width="80" >
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <Grid Margin="-10,0,0,0">
                                        <TextBlock Margin="0,0,5,0" Padding="0,0,0,0" 
                                        Text="{Binding Age}" TextAlignment="Left" 
                                        Height="21" VerticalAlignment="Center" />
                                    </Grid>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                            <GridViewColumnHeader Content="Age"/>
                        </GridViewColumn>
                    </GridView>
                </ListView.View>
            </ListView>
        </Border>
    </Grid>
</RibbonWindow>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Controls.Ribbon;
using System.Windows.Forms;
using System.Drawing;

namespace Watermarksearchbar
{
    /// <summary>
    /// Interaktionslogik f&uuml;r MainWindow.xaml
    /// </summary>
    public partial class MainWindow : RibbonWindow
    {
        public MainWindow()
        {
            System.Windows.Forms.Application.EnableVisualStyles();
            InitializeComponent();
            List<User> items = new List<User>();
            items.Add(new User() { Name = "John Doe", Age = 42 });
            items.Add(new User() { Name = "Jane Doe", Age = 39 });
            items.Add(new User() { Name = "Sammy Doe", Age = 13 });
            items.Add(new User() { Name = "Donna Doe", Age = 13 });
            lvUsers.ItemsSource = items;

            CollectionView view = 
            (CollectionView)CollectionViewSource.GetDefaultView(lvUsers.ItemsSource);
            view.Filter = UserFilter;
        }

        private bool UserFilter(object item)
        {
            if (String.IsNullOrEmpty(txtFilter.Text))
                return true;
            else
                return ((item as User).Name.IndexOf
                (txtFilter.Text, StringComparison.OrdinalIgnoreCase) >= 0);
        }

        private void txtFilter_TextChanged
        (object sender, System.Windows.Controls.TextChangedEventArgs e)
        {
            if (txtFilter.Text.Length > 0)
            {
                Search_Cross.Visibility = System.Windows.Visibility.Visible;
                Search_Lupe.Visibility = System.Windows.Visibility.Collapsed;
            }
                else
            {
                Search_Cross.Visibility = System.Windows.Visibility.Collapsed;
                Search_Lupe.Visibility = System.Windows.Visibility.Visible;
            }
            CollectionViewSource.GetDefaultView(lvUsers.ItemsSource).Refresh();
        }

        private void Searchbutton_Click(object sender, RoutedEventArgs e)
        {
            txtFilter.Text = "";
        }

    }
    public enum SexType { Male, Female };

    public class User
    {
        public string Name { get; set; }
        public int Age { get; set; }
        public string Mail { get; set; }
        public SexType Sex { get; set; }
    }
}

Screenshot

<img alt="" src="1120566/2ymh9oy.png" style="width: 525px; height: 350px;" />

Credits

History

  • 2016-08-26: Initial post

And that's it!

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here