what is the best practice to show text label (e.g. "Name") with the TextBox in WPF?
I want a label "Name" above the TextBox and many similar Labels/TextBoxes.
Should I put the pairs Label/TextBox into the vertical StackPanel?
Is there a simpler solution?
Here is a control that does it:
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
public class KeyValueControl : Control
{
public static readonly DependencyProperty KeyProperty = DependencyProperty.Register(
"Key",
typeof(string),
typeof(KeyValueControl),
new PropertyMetadata(default(string)));
public static readonly DependencyProperty ValueProperty = DependencyProperty.Register(
"Value",
typeof(object),
typeof(KeyValueControl),
new FrameworkPropertyMetadata
{
DefaultValue = null,
BindsTwoWayByDefault = true,
DefaultUpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged,
});
static KeyValueControl()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(KeyValueControl), new FrameworkPropertyMetadata(typeof(KeyValueControl)));
}
public string Key
{
get
{
return (string)GetValue(KeyProperty);
}
set
{
SetValue(KeyProperty, value);
}
}
public object Value
{
get
{
return GetValue(ValueProperty);
}
set
{
SetValue(ValueProperty, value);
}
}
}
Style:
<Style TargetType="{x:Type local:KeyValueControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:KeyValueControl}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Key, RelativeSource={RelativeSource TemplatedParent}}"/>
<TextBox Grid.Column="1" Text="{Binding Value, RelativeSource={RelativeSource TemplatedParent}, UpdateSourceTrigger=PropertyChanged}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Usage (create a property grid):
<ItemsControl>
<customControls:KeyValueControl Key="First" Value="{Binding Value1}" />
<customControls:KeyValueControl Key="Second" Value="{Binding Value2}" />
<customControls:KeyValueControl Key="Last" Value="{Binding Value3}" />
<customControls:KeyValueControl Key="Bool1" Value="{Binding Bool1}" Style="{StaticResource CheckBoxStyle}"/>
<customControls:KeyValueControl Key="Bool2" Value="{Binding Bool2}" Style="{StaticResource CheckBoxStyle}"/>
</ItemsControl>
It really depends on what you want to do with these controls in the future. If you want to reuse this kind of control multiple times (and maybe create it on the fly), it would be the best to create UserControl and program it. You can then easily reuse it in a very simple manner (like putting in on StackPanel).
Code for LabelTextBox.xaml
<UserControl x:Class="YourProject.LabelTextBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="49" d:DesignWidth="314" MinHeight="49" MaxHeight="49">
<Grid>
<Label Content="Label" Height="28" HorizontalAlignment="Left" Name="BaseLabel" VerticalAlignment="Top" />
<TextBox Height="23" Margin="0,26,0,0" Name="BaseTextBox" VerticalAlignment="Top" />
</Grid>
</UserControl>
Code for LabelTextBox.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
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;
namespace YourProject
{
/// <summary>
/// Interaction logic for LabelTextBox.xaml
/// </summary>
public partial class LabelTextBox : UserControl
{
public LabelTextBox()
{
InitializeComponent();
}
string LocalLabel = "";
string LocalTextBox = "";
public string Label
{
get { return LocalLabel; }
set
{
LocalLabel = value;
BaseLabel.Content = value;
}
}
public string TextBox
{
get { return LocalTextBox; }
set
{
LocalTextBox = value;
BaseTextBox.Text = value;
}
}
}
}
You can change Label text and TextBox content with Label and TextBox property of new control (hidden in "Other" part of Properties in designer. You can also program additional functions for the UserControl.
If you don't need to reuse these controls so much, other solutions will suffice.
If you want the flexibility to manipulate this text label structure I suggest to wrap each TextBox and Label in a dock panel, and set the docking in a style that will apply on all labels and text boxes.
so it'll be like
<StackPanel>
<StackPanel.Resources>
<Style TargetType={x:Type Label}>
<Setter Property="DockPanel.Dock" Value="Top"/>
</Style>
</StackPanel.Resources>
<DockPanel>
<Label></Label>
<TextBox></TextBox>
</DockPanel>
<DockPanel>
<Label></Label>
<TextBox></TextBox>
</DockPanel>
</StackPanel>
I usually do something like this:
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Margin="5">Repository URL:</Label>
<TextBox Grid.Column="1" Margin="5"></TextBox>
</Grid>
</StackPanel>
If you did this often enough, you could create a UserControl or Datatemplate. But WPF is just a verbose markup language...
I use this
<Style TargetType="{x:Type TextBox}">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock x:Name="ControlLabel" Grid.Column="0"
VerticalAlignment="Top" HorizontalAlignment="Left"
Text="{TemplateBinding Tag}" />
<Line x:Name="LineColumnLabel" Grid.Column="1" X1="0" X2="0" Y1="0" Y2="{TemplateBinding Height}"
Stroke="#B31C1C1C" StrokeThickness="0.5" Margin="5,0,5,0" />
<ScrollViewer Grid.Column="2" x:Name="PART_ContentHost"
IsTabStop="{TemplateBinding ScrollViewer.IsTabStop}"
TextElement.Foreground="{TemplateBinding Foreground}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Tag" Value="{x:Null}">
<Setter TargetName="ControlLabel" Property="Visibility" Value="Collapsed" />
<Setter TargetName="ControlLabel" Property="Margin" Value="0" />
<Setter TargetName="LineColumnLabel" Property="Visibility" Value="Collapsed" />
<Setter TargetName="LineColumnLabel" Property="Margin" Value="0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And
<Grid>
<TextBox Tag="The Name"/>
</Grid>
Create a class X that holds label and text that implements INotifyPropertyChanged. Make an ObservableCollection. This will be the ItemsSource for ListBox, ComboBox, StackPanel.. whatever you choose. Create a DataTemplate that displays X the way you want it to.
Related
The latest in my endeavors - I've managed to populate a treeview with elements, and populate a listbox next to it with related elements.
The trick is that, I'm trying to think of a way to assign each listbox item and corresponding treeview item it's own grid row, that would be generated probably in back C# code to with corresponding row definitions based on the control's number of children, if that makes any sense.
I've tried looking at the post below to see if I can select each treeview item this way, but to no avail:
How to programmatically select an item in a WPF TreeView?
Here's some example code that tries to implement this - I keep getting null values, though, and using UpdateLayout() before the loop on the controls doesn't seem to help. :/
for (int i = 0; i < loadedAR.Item2.Count; i++)
{
DABsAndIssuesGrid.RowDefinitions.Add(new RowDefinition());
var selectedItemObjectDAB = DABView.Items.GetItemAt(i);
var DABParent = DABView.Parent;
TreeViewItem currentItemDAB = DABView.ItemContainerGenerator.ContainerFromItem(selectedItemObjectDAB)
as TreeViewItem;
if (currentItemDAB != null)
Grid.SetRow(currentItemDAB, i);
var selectedItemObjectErr = IssueBox.Items.GetItemAt(i);
TreeViewItem currentItemErr = DABView.ItemContainerGenerator.ContainerFromItem(selectedItemObjectErr)
as TreeViewItem;
if (currentItemErr != null)
Grid.SetRow(currentItemErr, i);
}
Is there a better way to do this than the way I'm trying to do it? I've tried using a converter to assign the row dynamically too as they would get generated, but that still appears to put all of my children in the same first grid row...
Here's my XAML:
<Window x:Class="Client_Invoice_Auditor.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Client_Invoice_Auditor"
xmlns:self="clr-namespace:Client_Invoice_Auditor.CoreClient"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="1000">
<Window.Resources>
<self:SelfPayConverter x:Key="FINConverter"/>
<self:ErrorExpandConverter x:Key="ErrorExpandConverter"/>
<self:AssignRowConverter x:Key="AssignRowConverter"/>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20*"/>
<RowDefinition Height="80*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Grid.Column="0">
<StackPanel Orientation="Vertical">
<DockPanel VerticalAlignment="Top" Height="20" Panel.ZIndex="1">
<Menu Name="fileMenu" Width="Auto" DockPanel.Dock="Top">
<MenuItem Header="File">
<MenuItem Header="Open Account File" Click="menuOpenFile_Click"/>
<MenuItem Header="Exit" Click="menuExit_Click"/>
</MenuItem>
<MenuItem Header="Options">
<!--<MenuItem Header="Update" Click="update_Click"/>-->
<MenuItem Header="About" Click="about_Click"/>
</MenuItem>
</Menu>
</DockPanel>
<WrapPanel Orientation="Horizontal" HorizontalAlignment="Center" Height="Auto">
<StackPanel Width="Auto" Orientation="Horizontal" HorizontalAlignment="Center">
<Border BorderBrush="MediumAquamarine" BorderThickness="2">
<Label Name="AccountNumber"/>
</Border>
<Border BorderBrush="MediumAquamarine" BorderThickness="2">
<Label Name="AcctDesc"/>
</Border>
<Border BorderBrush="MediumAquamarine" BorderThickness="2">
<Label Name="Organization"/>
</Border>
</StackPanel>
</WrapPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Label Margin="20,10,0,0" Content="Activity Date Time" />
<Label Margin="60,10,0,0" Content="Beginning Balance" />
<Label Margin="10,10,0,0" Content="Charge Amount" />
<Label Margin="30,10,0,0" Content="Adjustments" />
<Label Margin="40,10,0,0" Content="Payments" />
<Label Margin="60,10,0,0" Content="End Balance" />
<Label Margin="50,10,0,0" Content="Issues" />
</StackPanel>
</StackPanel>
</Grid>
<Grid Grid.Row="1" Grid.Column="0">
<Grid Name="DABsAndIssuesGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80*"/>
<ColumnDefinition Width="20*"/>
</Grid.ColumnDefinitions>
<TreeView Name="DABView" Grid.Column="0">
<!--<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="IsExpanded"
Value="{Binding FinClass, Converter={StaticResource ErrorExpandConverter}}" />
</Style>-->
<TreeView.ItemContainerStyle>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="IsExpanded"
Value="{Binding Dummies, Converter={StaticResource ErrorExpandConverter}}" />
</Style>
</TreeView.ItemContainerStyle>
<TreeView.ItemTemplate>
<HierarchicalDataTemplate DataType="{x:Type self:dailyAccountBalance}" ItemsSource="{Binding Dummies}">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" IsEnabled="False">
<TextBlock Width="150" Text="{Binding DabActivityDate}" />
<TextBlock Width="100" Margin="20,0,0,0" Text="{Binding BegBalance}"/>
<TextBlock Width="100" Margin="20,0,0,0" Text="{Binding ChrgAmount}" />
<TextBlock Width="100" Margin="20,0,0,0" Text="{Binding AdjAmount}" />
<TextBlock Width="100" Margin="20,0,0,0" Text="{Binding PmtAmount}" />
<TextBlock Width="100" Margin="20,0,0,0" Text="{Binding EndBalance}" />
</StackPanel>
<HierarchicalDataTemplate.ItemTemplate>
<DataTemplate DataType="{x:Type self:DummyItem}">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<!--<TextBlock Text="{Binding Text}" />-->
<DataGrid ItemsSource="{Binding ChargeActivities}" AutoGenerateColumns="False">
<DataGrid.Style>
<Style TargetType="{x:Type DataGrid}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Items.Count,
RelativeSource={RelativeSource Self}}" Value="0">
<Setter Property="Visibility" Value="Collapsed" />
</DataTrigger>
</Style.Triggers>
</Style>
</DataGrid.Style>
<DataGrid.Columns>
<DataGridTextColumn x:Name="ChrgID" Header=" Charge" Binding="{Binding ChargeID}" />
<DataGridTextColumn x:Name="ChrgType" Header="Charge Type" Binding="{Binding ChargeType}">
<DataGridTextColumn.ElementStyle>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="Text" Value="CR">
<Setter Property="Foreground" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</DataGridTextColumn.ElementStyle>
</DataGridTextColumn>
<DataGridTextColumn x:Name="ChrgAmt" Header="Amount" Binding="{Binding ChargeAmount}">
<DataGridTextColumn.ElementStyle>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger Binding="{Binding ChargeType}" Value="CR">
<Setter Property="Foreground" Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGridTextColumn.ElementStyle>
</DataGridTextColumn>
<DataGridTextColumn x:Name="FIN" Header="FIN" Binding="{Binding EncntrAlias}" />
<DataGridTextColumn x:Name="FINClass" Header="FIN Class" Binding="{Binding FinClass}">
<DataGridTextColumn.ElementStyle>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Foreground" Value="{Binding FinClass, Converter={StaticResource FINConverter}}"/>
</Style>
</DataGridTextColumn.ElementStyle>
</DataGridTextColumn>
</DataGrid.Columns>
</DataGrid>
</StackPanel>
</DataTemplate>
</HierarchicalDataTemplate.ItemTemplate>
</HierarchicalDataTemplate>
<!--<TreeViewItem x:Key="Test">
<TextBlock Text="Me gusta"></TextBlock>
</TreeViewItem>-->
</TreeView.ItemTemplate>
</TreeView>
<Border Grid.Column="1" BorderBrush="Black" BorderThickness="2">
<ListBox Name="IssueBox" ItemsSource="{Binding}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="Hi"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Border>
</Grid>
</Grid>
</Grid>
</Window>
And, here's the code behind:
using Client_Invoice_Auditor.CoreClientAR;
using System;
using System.Collections.Generic;
using System.Data;
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;
namespace Client_Invoice_Auditor
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public string accountFile;
public MainWindow()
{
InitializeComponent();
OpenaccountFile();
}
private void OpenaccountFile()
{
accountFile = "";
//errorFilters.Clear();
// Displays an OpenFileDialog so the user can select a file.
Microsoft.Win32.OpenFileDialog openFileDialog1 = new Microsoft.Win32.OpenFileDialog();
openFileDialog1.Filter = "Account Files|*.acct";
openFileDialog1.Title = "Select an account File";
if (openFileDialog1.ShowDialog() == true)
{
// Assign the cursor in the Stream to the Form's Cursor property.
accountFile = openFileDialog1.FileName;
//claimFile = openFileDialog1.OpenFile().ToString();
//openFileDialog1.Dispose();
}
if (accountFile == "")
{
/*System.Windows.MessageBox.Show("File must be selected in order to continue - exiting now."
, "No File Selected", MessageBoxButton.OK);
this.Close();*/
if (!AcctDesc.HasContent)
{
AcctDesc.Content = "No Account File Loaded";
//Version version = Assembly.GetExecutingAssembly().GetName().Version;
//manualBreakItem.IsEnabled = false;
//manualValidateItem.IsEnabled = false;
}
}
else
{
//openFileDialog1 = null;
Console.WriteLine("Account file path is: " + accountFile);
//claimFile = "C:\\Users\\KO054202\\Documents\\pft_1450_out\\pft_1450_out\\CAR837I125114220170601.out";
DataTable dataAR = new DataTable();
try
{
Tuple<accountARHeader, List<dailyAccountBalance>, DataTable> loadedAR = dabARLoader.LoadARData(accountFile);
//dataAR = loadedAR.Item2;
AccountNumber.Content = "Account Number: " + loadedAR.Item1.AccountNumber;
AcctDesc.Content = "Description: " + loadedAR.Item1.AccountDescription;
Organization.Content = "Client Organization: " + loadedAR.Item1.OrganizationName;
//TreeViewItem dummy = new TreeViewItem();
//dummy.DataContext = "Hi";
//DummyItem testThis = new DummyItem("Test2");
//testThis.Text = "Hi";
//loadedAR.Item2.First().Dummies.Add(testThis);
DABView.ItemsSource = loadedAR.Item2;
IssueBox.ItemsSource = dabARLoader.loadIssues(loadedAR.Item2);
DABView.UpdateLayout();
for (int i = 0; i < loadedAR.Item2.Count; i++)
{
DABsAndIssuesGrid.RowDefinitions.Add(new RowDefinition());
var selectedItemObjectDAB = DABView.Items.GetItemAt(i);
var DABParent = DABView.Parent;
TreeViewItem currentItemDAB = DABView.ItemContainerGenerator.ContainerFromItem(selectedItemObjectDAB)
as TreeViewItem;
if (currentItemDAB != null)
Grid.SetRow(currentItemDAB, i);
var selectedItemObjectErr = IssueBox.Items.GetItemAt(i);
TreeViewItem currentItemErr = DABView.ItemContainerGenerator.ContainerFromItem(selectedItemObjectErr)
as TreeViewItem;
if (currentItemErr != null)
Grid.SetRow(currentItemErr, i);
}
//DABView.DisplayMemberPath = "A";
}
catch (Exception e)
{
System.Windows.MessageBox.Show("I don't wanna open this file! Try another. Error: " + e.Message);
OpenaccountFile();
}
}
}
private void menuOpenFile_Click(object sender, RoutedEventArgs e)
{
OpenaccountFile();
}
private void menuExit_Click(object sender, RoutedEventArgs e)
{
Close();
}
private void about_Click(object sender, RoutedEventArgs e)
{
System.Windows.MessageBox.Show("I heard you like clicking buttons.");
}
}
}
I have a TreeView inside of a Grid, along with a ListBox control. The
idea is that the TreeView would populate parent items by a daily
account balance, and then for each one of those an adjacent list of
issues would be displayed in the neighboring ListBox
I would make specialized Data Transfer Object (DTO)s where each instance item generates the values for the properties to be shown and where required creates child DTOs for that instance. Then those DTOs are bindable between all the controls. Meaning that you have this class defined
<Top Level Class used by the grid<DTO>>
<Properties et all>
<List of Items in for treeview>
<Treeview class <DTO>>
<Properties et all>
<List of Items in for listbox>
<Listbox class <DTO>>
<Properties et all>
Then bind the grid to the above top level DTO list.
Bind the treeview to the current row's treeview list items.
Bind the listbox to the current treeview's selected item's Listbox items list.
Once the DTOs are created then it simply becomes an exercise in binding.
I want to change the icon on my button. Here is the xaml of my button:
<Button Name="InitPurgeBtn" Click="InitPurgeClick">
<Rectangle Width="35" Height="45" Margin="0,0,0,0">
<Rectangle.Fill>
<VisualBrush Stretch="Fill" Visual="{StaticResource InitIcon}" />
</Rectangle.Fill>
</Rectangle>
</Button>
The probleme is I don't know how to acces the Visual property of the Rectangle of my button in my controller to change "InitIcon" by "PurgeIcon"
All my icon are implement in xaml:
<Viewbox x:Key="ExtinctionIcon" Stretch="Uniform" x:Shared="False">
<Canvas Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="40" Height="40" Stretch="Fill" Fill="{Binding Foreground,
RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}"
Data="M15,24H17V22H15M16.56,{...}24H13V22H11M7,24H9V22H7V24Z"/>
</Canvas>
</Viewbox>
Edit :
I change my button and he is like this now :
<Button Name="InitBtn" Style="{StaticResource RoundButton}" Width="70" Height="70"
Click="InitPurgeClick" Content="{StaticResource InitIcon}">
</Button>
I want to change the icon in my code so I try to set Content property like this :
InitBtn.Content = "{StaticResource ExtinctionIcon}";
But this way just replace my icon with the string "StaticResource.."
Updated to reflect new information
You updated your question with some new information that changes things a lot.
Since you are trying to update Button.Content in code, you won't be able to use the MarkupExtension. MarkupExtensions (the stuff inside { } in the XAML) are only evaluated when the view is initially created. After that, they behave just like regular strings, so trying to set one in code won't work.
To set the value in code, you will need to manually do what the MarkupExtension is doing; find the resource by name, and set the value directly. You can do this with the following code (assuming a reference to InitPurgeBtn).
InitPurgeBtn.Content = InitPurgeBtn.FindResource("ExtinctionIcon");
Previous Answer
You should be able to add your icon to the Content of the Button directly, as it seems to be defined as a resource somewhere (because of the x:Key attribute). Your code doesn't show where exactly that is though, so I can't grantee this will work without some modification.
<Button Name="InitPurgeBtn"
Width="100"
Height="40"
Content="{StaticResource ExtinctionIcon}" />
In order for that to work the ExtinctionIcon resource will have to be defined someplace accessible to the button, meaning either in an ancestor of the button, or in App.xaml.
The fact that the resource is defined with x:Shared="false" seems to indicate that it was designed to be used in exactly this way, as that is required for visual elements that can possibly be hosted in multiple places simultaneously.
Alternatively, you could just copy and embed the icon directly in to the button.
<Button Name="InitPurgeBtn"
Click="InitPurgeClick">
<Viewbox Stretch="Uniform">
<Canvas Width="76"
Height="76"
Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="40"
Height="40"
Stretch="Fill"
Fill="{Binding Foreground,
RelativeSource={RelativeSource
Mode=FindAncestor,
AncestorType=Button}}"
Data="M15,24H17V22H15M16.56,{...}24H13V22H11M7,24H9V22H7V24Z"/>
</Canvas>
</Viewbox>
</Button>
You may use Content property.
<Button Name="InitPurgeBtn" Width="100" Height="40">
<Button.Content>
<Image Source=".\Icon.PNG"/>
</Button.Content>
</Button>
If you just want a single (xaml) icon, you can bind the content property of your button to your icon resource.
The control below gives an enhanced display - a xaml icon plus a text caption, including two colours for the icon and support for disabled state.
MyXamlIconHost.cs
public enum CaptionPosition { None, ToLeftOfIcon, AboveIcon, ToRightOfIcon, BelowIcon }
public enum IconSize { Small, Medium, Large, XLarge, XxLarge }
public class myXamlIconHost : Control
{
private static readonly Brush DefaultForeground = new SolidColorBrush(Color.FromRgb(32,32,32));
private static readonly Brush DefaultHighlight = Brushes.DarkOrange;
private static readonly Brush DefaultDisabledForeground = new SolidColorBrush(Color.FromRgb(192, 192, 192));
private static readonly Brush DefaultDisabledHighlight = new SolidColorBrush(Color.FromRgb(128, 128, 128));
static myXamlIconHost()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(myXamlIconHost), new FrameworkPropertyMetadata(typeof(myXamlIconHost)));
}
public FrameworkElement XamlIcon
{
get { return (FrameworkElement)GetValue(XamlIconProperty); }
set { SetValue(XamlIconProperty, value); }
}
public static readonly DependencyProperty XamlIconProperty =
DependencyProperty.Register("XamlIcon", typeof(FrameworkElement), typeof(myXamlIconHost), new PropertyMetadata(null));
public IconSize IconSize
{
get { return (IconSize)GetValue(IconSizeProperty); }
set { SetValue(IconSizeProperty, value); }
}
public static readonly DependencyProperty IconSizeProperty =
DependencyProperty.Register("IconSize", typeof(IconSize), typeof(myXamlIconHost), new PropertyMetadata(IconSize.Medium));
public string Caption
{
get { return (string)GetValue(CaptionProperty); }
set { SetValue(CaptionProperty, value); }
}
public static readonly DependencyProperty CaptionProperty =
DependencyProperty.Register("Caption", typeof(string), typeof(myXamlIconHost), new PropertyMetadata(null));
public CaptionPosition CaptionPosition
{
get { return (CaptionPosition)GetValue(CaptionPositionProperty); }
set { SetValue(CaptionPositionProperty, value); }
}
public static readonly DependencyProperty CaptionPositionProperty =
DependencyProperty.Register("CaptionPosition", typeof(CaptionPosition), typeof(myXamlIconHost), new PropertyMetadata(CaptionPosition.ToRightOfIcon));
public Brush StandardForeground
{
get { return (Brush)GetValue(StandardForegroundProperty); }
set { SetValue(StandardForegroundProperty, value); }
}
public static readonly DependencyProperty StandardForegroundProperty =
DependencyProperty.Register("StandardForeground", typeof(Brush), typeof(myXamlIconHost), new PropertyMetadata(DefaultForeground));
public Brush StandardHighlight
{
get { return (Brush)GetValue(StandardHighlightProperty); }
set { SetValue(StandardHighlightProperty, value); }
}
public static readonly DependencyProperty StandardHighlightProperty =
DependencyProperty.Register("StandardHighlight", typeof(Brush), typeof(myXamlIconHost), new PropertyMetadata(DefaultHighlight));
public Brush DisabledForeground
{
get { return (Brush)GetValue(DisabledForegroundProperty); }
set { SetValue(DisabledForegroundProperty, value); }
}
public static readonly DependencyProperty DisabledForegroundProperty =
DependencyProperty.Register("DisabledForeground", typeof(Brush), typeof(myXamlIconHost), new PropertyMetadata(DefaultDisabledForeground));
public Brush DisabledHighlight
{
get { return (Brush)GetValue(DisabledHighlightProperty); }
set { SetValue(DisabledHighlightProperty, value); }
}
public static readonly DependencyProperty DisabledHighlightProperty =
DependencyProperty.Register("DisabledHighlight", typeof(Brush), typeof(myXamlIconHost), new PropertyMetadata(DefaultDisabledHighlight));
}
// ==============================================================================================================================================
public class myXamlIconSizeConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
const int defaultSize = 24;
if (!(value is IconSize))
return defaultSize;
var iconSizeValue = (IconSize)value;
switch (iconSizeValue)
{
case IconSize.Small:
return defaultSize * 2 / 3;
case IconSize.Large:
return defaultSize * 3 / 2;
case IconSize.XLarge:
return defaultSize * 2;
case IconSize.XxLarge:
return defaultSize * 5 / 2;
default:
return defaultSize;
}
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
return null;
}
}
MyXamlIconHost.xaml
<Style TargetType="{x:Type ctrl:myXamlIconHost}">
<Setter Property="Focusable" Value="False" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="Padding" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ctrl:myXamlIconHost}">
<Grid Margin="{TemplateBinding Padding}">
<Grid.Resources>
<ctrl:myXamlIconSizeConverter x:Key="IconSizeConverter" />
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock x:Name="PART_CaptionTextBlock"
Grid.Row="1"
Grid.Column="0"
Margin="8,0,8,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="{TemplateBinding StandardForeground}"
Text="{TemplateBinding Caption}" />
<!-- Set DataContext to "self" so that the Xaml Icon item can bind to the Foreground and BorderBrush properties -->
<ContentControl x:Name="PART_IconPresenter"
Grid.Row="1"
Grid.Column="1"
Width="{TemplateBinding IconSize,
Converter={StaticResource IconSizeConverter}}"
Height="{TemplateBinding IconSize,
Converter={StaticResource IconSizeConverter}}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
BorderBrush="{TemplateBinding StandardHighlight}"
Content="{TemplateBinding XamlIcon}"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
Focusable="False"
Foreground="{TemplateBinding StandardForeground}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="PART_CaptionTextBlock" Property="Foreground" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DisabledForeground}" />
<Setter TargetName="PART_IconPresenter" Property="BorderBrush" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DisabledHighlight}" />
<Setter TargetName="PART_IconPresenter" Property="Foreground" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DisabledForeground}" />
</Trigger>
<Trigger Property="CaptionPosition" Value="None">
<Setter TargetName="PART_CaptionTextBlock" Property="Visibility" Value="Collapsed" />
</Trigger>
<Trigger Property="CaptionPosition" Value="ToLeftOfIcon">
<Setter TargetName="PART_CaptionTextBlock" Property="Grid.Column" Value="0" />
<Setter TargetName="PART_CaptionTextBlock" Property="Grid.Row" Value="1" />
<Setter TargetName="PART_CaptionTextBlock" Property="Margin" Value="8,0,8,0" />
</Trigger>
<Trigger Property="CaptionPosition" Value="ToRightOfIcon">
<Setter TargetName="PART_CaptionTextBlock" Property="Grid.Column" Value="2" />
<Setter TargetName="PART_CaptionTextBlock" Property="Grid.Row" Value="1" />
<Setter TargetName="PART_CaptionTextBlock" Property="Margin" Value="8,0,8,0" />
</Trigger>
<Trigger Property="CaptionPosition" Value="AboveIcon">
<Setter TargetName="PART_CaptionTextBlock" Property="Grid.Column" Value="1" />
<Setter TargetName="PART_CaptionTextBlock" Property="Grid.Row" Value="0" />
<Setter TargetName="PART_CaptionTextBlock" Property="Margin" Value="8,0,8,4" />
</Trigger>
<Trigger Property="CaptionPosition" Value="BelowIcon">
<Setter TargetName="PART_CaptionTextBlock" Property="Grid.Column" Value="1" />
<Setter TargetName="PART_CaptionTextBlock" Property="Grid.Row" Value="2" />
<Setter TargetName="PART_CaptionTextBlock" Property="Margin" Value="8,4,8,0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
Example Usage
<Window ... >
<Window.Resources>
<Grid x:Key="TestIcon" x:Shared="False" Background="Transparent">
<Path Stretch="Fill" Data=" M 0,0 M 100,100 M 0,0 L 0,100 L 100,100 L 100,60 L 90,60 L 90,90 L 10,90 L 10,10 L 90,10 L 90,40 L 100,40 L 100,0 z" Fill="{ Binding Foreground, FallbackValue=Cyan}"/>
<Path Stretch="Fill" Data=" M 0,0 M 100,100 M 70,45 L 100,45 L 100,55 L 70,55 z" Fill="{ Binding BorderBrush, FallbackValue=Magenta}"/>
</Grid>
</Window.Resources>
<Button HorizontalAlignment="Center" VerticalAlignment="Center">
<Border Background="LightBlue">
<ctrls:myXamlIconHost Caption="The Caption" XamlIcon="{StaticResource TestIcon}" IconSize="XxLarge" Padding="20" />
</Border>
</Button>
</Window>
I want my textbox to have a watermark style.
I have the code below which I got here https://stackoverflow.com/a/21672408/9928363
<Grid>
<TextBox Width="250" VerticalAlignment="Center" HorizontalAlignment="Left" x:Name="SearchTermTextBox" Margin="5"/>
<TextBlock IsHitTestVisible="False" Text="Enter Search Term Here" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10,0,0,0" Foreground="DarkGray">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Text, ElementName=SearchTermTextBox}" Value="">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
I have lots of Textbox and I only want some of it to use the style but not all.
How will I do that?
There are a number of ways to add a watermark to a textbox, including replacing the ControlTemplate of your TextBox (as your question implies). However, replacing the ControlTemplate of the TextBox may not be ideal because in so doing you become responsible for drawing the entire control, including the border, styling different states etc. This is not too difficult (you can use Visual Studio or Espression Blend to copy the template from your current theme), but unless you do a lot of work you will lose the WPF feature of adapting the styling of common controls to the current Windows theme.
If you want a simple, re-usable, pure XAML approach that doesn't require changing the control template, then declaring a style resource using a VisualBrush is one effective approach.
See below, where we have 3 text boxes, the watermark style is applied to two of them. This style goes a little further than your example by removing the watermark when the textbox has the input focus.
<Window ...>
<Window.Resources>
<Style TargetType="TextBox" x:Key="Watermark">
<Style.Resources>
<VisualBrush x:Key="WatermarkBrush" AlignmentX="Left" AlignmentY="Center" Stretch="None">
<VisualBrush.Visual>
<Label Content="Enter Search Term Here" Foreground="LightGray" />
</VisualBrush.Visual>
</VisualBrush>
</Style.Resources>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Text}" Value="">
<Setter Property="Background" Value="{StaticResource WatermarkBrush}" />
</DataTrigger>
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter Property="Background" Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<StackPanel>
<TextBox Width="250" VerticalAlignment="Center" FontSize="20"
HorizontalAlignment="Left" Style="{StaticResource Watermark}"/>
<TextBox Width="250" VerticalAlignment="Center"
HorizontalAlignment="Left"/>
<TextBox Width="250" VerticalAlignment="Center"
HorizontalAlignment="Left" Style="{StaticResource Watermark}"/>
</StackPanel>
</Window>
If you need the watermark to react to different font sizes, you could make use of the Stretch property:-
<VisualBrush x:Key="WatermarkBrush" AlignmentX="Left" AlignmentY="Center" Stretch="Uniform">
<VisualBrush.Visual>
<Label Padding="2 1" Content="Enter Search Term Here" Foreground="LightGray" />
</VisualBrush.Visual>
</VisualBrush>
As stated in an earlier answer, sometimes it is preferable not to replace the ControlTemplate of the standard controls. So here's a method to create a watermark via an attached property, that keeps the existing control template intact. This has the advantage that you can set the watermark to any text, including setting it at runtime via data binding.
For demonstration the XAML will create 3 textboxes (see below). The bottom textbox has a watermark whose Text property is bound to the Text property of the top textbox, which demonstrates the dynamic nature of the watermark text. Typing a number into the second textbox will change the font size of the Text (and watermark) of the bottom textbox.
The above image is taken from Windows 10 standard theme. Here is is again after setting the Windows theme to High Contrast. As you can see the existing ControlTemplate (and color scheme) has been respected.
XAML
<Window x:Class="WpfApp2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:behaviors="clr-namespace:WpfApp2.Behaviors"
mc:Ignorable="d"
Title="MainWindow" Height="250" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label Content="Watermark" Grid.Row="0"/>
<TextBox Grid.Row="0" Grid.Column="1" Margin="5"
x:Name="watermark" Width="250" HorizontalAlignment="Left" Text="enter search term here"/>
<Label Content="Font Size" Grid.Row="1"/>
<TextBox Grid.Row="1" Grid.Column="1" Margin="5"
x:Name="fontSize" Width="250" VerticalAlignment="Center" HorizontalAlignment="Left"
behaviors:TextBoxExtensions.Watermark="Enter a font size"/>
<Label Content="Result" Grid.Row="2"/>
<TextBox Grid.Row="2" Grid.Column="2" Margin="5"
Width="200" VerticalAlignment="Center" HorizontalAlignment="Left"
FontSize="{Binding Text, ElementName=fontSize}"
behaviors:TextBoxExtensions.Watermark="{Binding Path=Text, ElementName=watermark}" />
</Grid>
</Window>
TextBoxExtensions.cs
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
namespace WpfApp2.Behaviors
{
public class TextBoxExtensions
{
public static readonly DependencyProperty WatermarkProperty = DependencyProperty.RegisterAttached(
"Watermark",
typeof(string),
typeof(TextBoxExtensions),
new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.AffectsRender, OnWatermarkTextChanged)
);
private static void OnWatermarkTextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var tb = d as TextBox;
if (tb != null)
{
var textChangedHandler = new TextChangedEventHandler((s, ea) => ShowOrHideWatermark(s as TextBox));
var focusChangedHandler = new DependencyPropertyChangedEventHandler((s, ea) => ShowOrHideWatermark(s as TextBox));
var sizeChangedHandler = new SizeChangedEventHandler((s, ea) => ShowOrHideWatermark(s as TextBox));
if (string.IsNullOrEmpty(e.OldValue as string))
{
tb.TextChanged += textChangedHandler;
tb.IsKeyboardFocusedChanged += focusChangedHandler;
// We need SizeChanged events because the Background brush is sized according to the control size
tb.SizeChanged += sizeChangedHandler;
}
if (string.IsNullOrEmpty(e.NewValue as string))
{
tb.TextChanged -= textChangedHandler;
tb.IsKeyboardFocusedChanged -= focusChangedHandler;
tb.SizeChanged -= sizeChangedHandler;
}
ShowOrHideWatermark(tb);
}
}
public static string GetWatermark(DependencyObject element)
{
return (string)element.GetValue(WatermarkProperty);
}
public static void SetWatermark(DependencyObject element, string value)
{
element.SetValue(WatermarkProperty, value);
}
private static void ShowOrHideWatermark(TextBox tb)
{
// Restore TextBox background to style/theme value
tb.ClearValue(TextBox.BackgroundProperty);
if (string.IsNullOrEmpty(tb.Text) && !tb.IsKeyboardFocused)
{
var wm = GetWatermark(tb);
if (!string.IsNullOrEmpty(wm))
{
tb.Background = CreateTextBrush(wm, tb);
}
}
}
private static Brush CreateTextBrush(string text, TextBox tb)
{
Grid g = new Grid
{
Background = tb.Background,
Width = tb.ActualWidth,
Height = tb.ActualHeight
};
g.Children.Add(new Label
{
Padding = new Thickness(2,1,1,1),
FontSize = tb.FontSize,
FontFamily = tb.FontFamily,
Foreground = Brushes.LightGray,
Content = text
});
VisualBrush vb = new VisualBrush
{
Visual = g,
Stretch = Stretch.None,
AlignmentX = AlignmentX.Left,
AlignmentY = AlignmentY.Center,
};
return vb;
}
}
}
None of the watermark mechanisms is perfect for every scenario. This particular solution has the benefit of preserving the default theme, will use the font size and family of the TextBox, and will respect the background color set on the TextBox control via a style or theme. However it will not work correctly if you attempt to set the Background property of the TextBox directly in XAML as this value will be wiped out by the watermark.
I have a winforms application that I'd like to add a WPF user control to. The issue is when I run the program the WPF user control does not respond to mouse events. I can tab through the control and use the keyboard just fine, but the control does not respond to mouse clicks (the buttons don't even recognize when you hover over them). I have attempted the solution in this SO question but it did not help: WPF WinForms Interop issue with Enable / Disable . Please see the code below.
User Control XAML
<UserControl x:Class="WinformsWPF.ucNotes"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="400" d:DesignWidth="460" Background="#FFD7DFEC" IsHitTestVisible="False" Loaded="Window_Loaded">
<UserControl.Resources>
<LinearGradientBrush x:Key="DataGridHeaderBackgroundBrush" StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#b3dbcc" Offset="0" />
<GradientStop Color="#61a99b" Offset="1" />
</LinearGradientBrush>
</UserControl.Resources>
<Grid x:Name="LayoutRoot">
<Label Content="Notes" HorizontalAlignment="Left" Margin="8,8,0,0" VerticalAlignment="Top" FontSize="16" FontWeight="Bold"/>
<DataGrid x:Name="dgNotes" Margin="8,50,8,0" VerticalAlignment="Top" Height="121.28" d:LayoutOverrides="HorizontalAlignment" Background="#FFE4EEF3" AutoGenerateColumns="False" HorizontalGridLinesBrush="{x:Null}" VerticalGridLinesBrush="{x:Null}" ColumnWidth="Auto" CanUserDeleteRows="False" CanUserAddRows="False" CanUserReorderColumns="False" CanUserResizeRows="False" IsReadOnly="True" SelectionMode="Single" SelectionChanged="dgNotes_SelectionChanged" RowHeaderWidth="0" BorderBrush="{x:Null}" SelectedIndex="0">
<DataGrid.Columns>
<DataGridTextColumn x:Name="nDate" Header="Date"/>
<DataGridTextColumn x:Name="nEmployee" Header="Employee"/>
<DataGridTextColumn x:Name="nText" Header="Note" Width="*"/>
</DataGrid.Columns>
<DataGrid.Resources>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Padding" Value="6" />
<Setter Property="BorderBrush" Value="#489283" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Background" Value="{StaticResource DataGridHeaderBackgroundBrush}" />
</Style>
<Style TargetType="{x:Type DataGridRow}">
<Setter Property="Background" Value="Transparent" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#66D7DFEC" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="#DDD7DFEC" />
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type DataGridCell}">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Margin" Value="3" />
<Setter Property="Padding" Value="3" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="Black" />
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.Resources>
</DataGrid>
<Grid Margin="8,175.28,8,8" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="25.96"/>
<RowDefinition Height="Auto" MinHeight="25.96"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="61.757"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label Content="Date" d:LayoutOverrides="Height" HorizontalAlignment="Left"/>
<Label Content="Employee" Grid.Row="1" d:LayoutOverrides="Width"/>
<Label Content="Notes" Grid.Row="2" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<Label x:Name="lblDate" Content="lblDate" Grid.Column="1" HorizontalAlignment="Left" d:LayoutOverrides="Height"/>
<Label Content="lblEmployee" Grid.Column="1" HorizontalAlignment="Left" Grid.Row="1" d:LayoutOverrides="Height" Name="lblEmployee" />
<TextBox x:Name="txtNotes" Grid.Column="1" Grid.Row="2" TextWrapping="Wrap" d:LayoutOverrides="Width" LostFocus="txtNotes_LostFocus" />
</Grid>
<Button x:Name="btnDelete" HorizontalAlignment="Right" Margin="0,8,8,0" VerticalAlignment="Top">
</Button>
<Button x:Name="btnAdd" HorizontalAlignment="Right" Margin="0,8,50,0" VerticalAlignment="Top" Click="btnAdd_Copy_Click">
</Button>
</Grid>
</UserControl>
User Control CS
using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
namespace WinformsWPF
{
/// <summary>
/// Interaction logic for ucNotes.xaml
/// </summary>
public partial class ucNotes : UserControl
{
List<noteItem> notes;
List<string> noteColumns;
public ucNotes()
{
InitializeComponent();
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
notes = new List<noteItem>
{
new noteItem{nID = 0, nDate = Convert.ToDateTime("9/5/2012 2:48 PM"), nEmployee = "Gardner, John", nText = "This is a test note"},
new noteItem{nID = 1, nDate = Convert.ToDateTime("9/5/2012 2:51 PM"), nEmployee = "Gardner, John", nText = "This is another test note. This test note is very long. It should cause overlap."}
};
noteColumns = new List<string> { "nDate", "nEmployee", "nText" };
dgNotes.GenerateColumns(noteColumns);
dgNotes.ItemsSource = notes;
}
private void dgNotes_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
noteItem noteInfo = (noteItem)dgNotes.SelectedItem;
lblDate.Content = noteInfo.nDate;
lblEmployee.Content = noteInfo.nEmployee;
txtNotes.Text = noteInfo.nText;
}
private void txtNotes_LostFocus(object sender, RoutedEventArgs e)
{
((noteItem)dgNotes.SelectedItem).nText = txtNotes.Text;
dgNotes.Items.Refresh();
}
private void btnAdd_Copy_Click(object sender, RoutedEventArgs e)
{
notes.Add(new noteItem { nDate = DateTime.Now, nEmployee = "Gardner, John" });
dgNotes.SelectedIndex = dgNotes.Items.Count - 1;
dgNotes.Items.Refresh();
txtNotes.Focus();
}
}
public static class dataGridExtension
{
public static void GenerateColumns(this DataGrid dataGrid, List<string> columns)
{
List<DataGridColumn> oldColumns = dataGrid.Columns.ToList();
dataGrid.Columns.Clear();
int index = 0;
foreach (var column in oldColumns)
{
var newCol = (DataGridTextColumn)column;
newCol.Binding = new Binding(columns[index++]);
dataGrid.Columns.Add(newCol);
}
}
}
public class noteItem
{
public int nID { set; get; }
public DateTime nDate { set; get; }
public string nEmployee { set; get; }
public string nText { set; get; }
}
}
The windows form is empty except for the ElementHost (ie, it's a fresh project with nothing changed). Let me know if you would like that code as well.
Any help would be appreciated.
You inadvertently had IsHitTestVisible="False" set on the UserControl....take that off and it works.
That will stop the control getting mouse messages when hit.
http://msdn.microsoft.com/en-us/library/system.windows.uielement.ishittestvisible.aspx
I have encountered this issue too, however the accepted solution did not work. For posterity I will add what I found out here.
TLDR
Disable XAML Hot Reload in Visual Studio.
Debug -> Options -> Debugging -> Hot Reload -> Uncheck Enable XAML Hot Reload
Problem
I have a WPF UserControl hosted in a WinForms project in an ElementHost control. The WPF UserControl contains a number of labels and textboxes along with two buttons, Save and Cancel.
The problem is fairly similar to OPs: You can navigate the UserControl with the tab key and can fire the Click event on the buttons with the space bar. Hovering over the buttons with the mouse causes the focus color to flash almost imperceptibly and the click event will only be raised if you happen to click at the exact moment the Button has focus.
It looks like something on the UserControl is "stealing" back focus after mouse movement ends, and apparently buttons can only be clicked if they have focus in WPF. That something turns out to be the debugger and Hot Reload.
Another hint that this problem can also be caused by the debugger is that disabling Hot Reload also solved another issue I had: the WinForms components of the project will loose their DPI-awareness and cause all sorts of wonky issues with presentation.
Edit: not caused by Hot Reload. Everything else is as described.
For reference I am using Visual Studio Professional 2019 (Version 16.8.2)
I am merging two examples found on the internet. One about stretched selection styles and one about multi-selection in a treeview.
I have everything working, except for the indentations of the treeview. I could give all my code, but that wouldn't solve it.
My problem lies in the following method:
public static class TreeViewItemExtensions
{
public static int GetDepth(this TreeViewItem item)
{
FrameworkElement elem = item;
while (elem.Parent != null)
{
var tvi = elem.Parent as TreeViewItem;
if (tvi != null)
return tvi.GetDepth() + 1;
elem = elem.Parent as FrameworkElement;
}
return 0;
}
}
This method tries to retrieve the depth of a treeviewItem in the tree. The problem is: elem.Parent is always null. Which results in depths of 0.
I think this is happening, because I am using an HierarchicalDataTemplate. A part of my xaml looks like this.
<TreeView Name="folderTree"
ItemsSource="{Binding Folders}"
SelectedItemChanged="folderTree_SelectedItemChanged"
HorizontalContentAlignment="Stretch">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Folders}"
DataType="{x:Type Model:IFolder}">
<StackPanel Orientation="Horizontal">
<StackPanel.Style>
<Style TargetType="{x:Type StackPanel}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected}"
Value="True">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
<Image Source="{Binding Converter={StaticResource iconConverter}}" Height="{Binding ElementName=theFile,Path=ActualHeight}"/>
<TextBlock Text="{Binding FileName}" Name="theFile"/>
</StackPanel>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
The XAML for my style of the treeview looks like this:
<Style x:Key="{x:Type TreeViewItem}" TargetType="{x:Type TreeViewItem}">
<!-- leaving some stuff out here -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeViewItem}">
<ControlTemplate.Resources>
<local:LeftMarginMultiplierConverter Length="19" x:Key="lengthConverter" />
</ControlTemplate.Resources>
<StackPanel>
<!-- The upper part of the TreeViewItem -->
<Border Name="Bd"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<!-- The margin is what we try to measure, how can we get the parents from the templatedParents? -->
<Grid Margin="{Binding Converter={StaticResource lengthConverter},
RelativeSource={RelativeSource TemplatedParent},
Path=.}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="19" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ToggleButton x:Name="Expander"
Style="{StaticResource ExpandCollapseToggleStyle}"
IsChecked="{Binding Path=IsExpanded,
RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press"/>
<ContentPresenter x:Name="PART_Header"
Grid.Column="1"
ContentSource="Header"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
</Grid>
</Border>
<!-- the children of the TreeViewItem -->
<ItemsPresenter x:Name="ItemsHost" />
</StackPanel>
<!-- leaving some stuff out here with triggers -->
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
How can I make the HierarchicalDataTemplate fill the Parent property?
I'd scan the visual tree instead.
Here is a simple (even not-so-elegant) solution:
public static class TreeViewItemExtensions
{
public static int GetDepth(this TreeViewItem item)
{
DependencyObject target = item;
var depth = 0;
while (target != null)
{
if (target is TreeView)
return depth;
if (target is TreeViewItem)
depth++;
target = VisualTreeHelper.GetParent(target);
}
return 0;
}
}
Cheers.