Watermark Searchbox in Ribbon
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ü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
Credits
- http://www.codeproject.com/Tips/882990/XAML-only-WPF-Watermarked-TextBox
- http://www.wpf-tutorial.com/listview-control/listview-filtering/
History
- 2016-08-26: Initial post
And that's it!