So, I'm trying to design as minimalistic a UI as possible, and to that end, I need to provide hints inside textboxes, like android does. I've found many solutions to the problem (see Watermark / hint text / placeholder TextBox in WPF , How can I add a hint text to WPF textbox?) but every solution seems to use lots of XAML code, styles, triggers and the sort. What I want to do is, I want to have a textbox subclass that has a HintText property which I can use everywhere, but so far, I haven't managed to even get close. This is the closest I got:
<TextBox x:Class="MyProgram.CustomControls.HintTextBox"
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" Text="ASDF"
d:DesignHeight="174" d:DesignWidth="708">
<TextBox.Resources>
<VisualBrush x:Key="VB">
<VisualBrush.Visual>
<Label Content="{Binding Path=HintText}" Foreground="LightGray" FontSize="25"/>
</VisualBrush.Visual>
</VisualBrush>
</TextBox.Resources>
<TextBox.Style>
<Style TargetType="TextBox">
<Setter Property="Background" Value="{StaticResource VB}"/>
</Style>
</TextBox.Style>
</TextBox>
and:
public partial class HintTextBox : TextBox
{
public HintTextBox()
{
InitializeComponent();
}
public static DependencyProperty HintTextProperty = DependencyProperty.Register("HintText", typeof(String), typeof(HintTextBox));
}
Which is missing the trigger definitions, but that's not the main problem here. My primary problem is that I can't seem to bind the HintText property. I can't assign it through XAML, and I can't bind to it for some reason. I also tried binding to the TextBox's own Text property just to see if it would work, and it didn't. What am I doing wrong? Or am I barking up the wrong tree entirely?
EDIT: I also need the same functionality for a PasswordBox, getting nowhere with that either... Why the hell did they separate TextBox and PasswordBox anyway?
The problem is, that the VisualBrush resource "VB" can be shared between all elements and label content can't be binded.
You can try use my sample TextBox with null text hint
Related
Here is a fully reproducible example:
<Window x:Class="DemoWPF.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"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid Name="GridMain">
<Grid.Resources>
<Style x:Key="{x:Type Grid}">
<Setter Property="Control.Background" Value="Red"/>
</Style>
</Grid.Resources>
<StackPanel>
<Label>First Content</Label>
<TextBox>First Edit</TextBox>
<StackPanel>
<Label>Second Content</Label>
<TextBox>Second Edit</TextBox>
</StackPanel>
</StackPanel>
</Grid>
</Window>
The output of this is as follows:
What I find confusing is that the TextBox control has a BackgroundProperty which inherits from Control - no different than the Label. However, as can be seen the TextBoxes do not have their background colour changed. Although the Grid does not have a Control.Background property, but has a Panel.Background property, yet it still has its background property set, even though the property being set is Control.Background.
Short answer:
Because it's not transparent, it has a color by default:
A text box is an input field so it should be easy to spot.
On the other hand, Label is transparent for convenience/design:
Assuming it had a default color (in this case, blue) it wouldn't be very convenient, right ?
We get to the point, labels should melt into background, while fields such as textboxes should be easily distinguishable by nature.
What I find confusing is that the TextBox class has a BackgroundProperty which inherits from Control - no different than the Label. However, as can be seen the TextBoxes do not have their background colour changed.
Each control has a default style and control template. They define the required parts of a control, its apprearance and its visual states. The Background is one of the properties that may or may not be defined, depending on the control. For the controls that you use, the backgrounds are defined like this:
Label: Transparent
TextBox: SystemColors.WindowBrushKey
Grid: None, default value.
StackPanel: None, default value.
Consequently, the Label appears to be red, but is not. It is the StackPanel or Grid background that you see through its Transparent background. For the TextBox, the background does not change because of dependency property setting precedence. The background value of the default implicit style of TextBox just has a higher precedence than your local style setter.
What to do now? Assign the background with a higher precedence, e.g.:
Add it as a local value.
Define a style and assign it directly to the Style property of TextBox.
Define an implicit style for TextBox
<Style x:Key="{x:Type TextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
<Setter Property="Control.Background" Value="Red"/>
</Style>
Although the Grid does not have a Control.Background property, but has a Panel.Background property, yet it still has its background property set, even though the property being set is Control.Background.
That is another implementation detail in WPF. As you can see in the reference source for Panel, it defines the Background property, but when you look at the reference source for Control, you can see that it does not define a Background property itself, but adds itself as the owner of the property defined by Panel. From the documentation of AddOwner:
Typically, AddOwner is used to add dependency properties to classes that do not already expose that dependency property through managed class inheritance (class inheritance would cause the wrapper properties to be inherited by the derived class, and thus would provide general members-table access to the dependency property already). AddOwner enables the property system to recognize a dependency property on a type that did not register that dependency property initially.
In other words, the properties work as if they were inherited and the XAML processor is smart enough to recognize that the Control.Background and Panel.Background properties are essentially the same.
Used BaseOn property For inherited
<Grid.Resources>
<Style x:Key="DefaultStyle" TargetType="{x:Type FrameworkElement}">
<Setter Property="Control.Background" Value="Red"/>
</Style>
<Style TargetType="TextBox" BasedOn="{StaticResource DefaultStyle}"/>
<Style TargetType="Label" BasedOn="{StaticResource DefaultStyle}"/>
</Grid.Resources>
<StackPanel>
<Label>First Content</Label>
<TextBox>First Edit</TextBox>
<StackPanel>
<Label>Second Content</Label>
<TextBox>Second Edit</TextBox>
</StackPanel>
</StackPanel>
</Grid>
I want to access one of the named elements within the original control template that another element is using, in the code-behind.
This is an example of the XAML code (obviously the original is more complicated, or I'd just be doing this in XAML):
<Window x:Class="Temp.MainWindow" Title="MainWindow">
<Window.Resources>
<ControlTemplate x:Key="MyTemplate" TargetType="{x:Type Expander}">
<Expander Header="Some header">
<StackPanel>
<Grid Name="MyGrid"/>
</StackPanel>
</Expander>
</ControlTemplate>
</Window.Resources>
<Grid>
<Expander Name="expander" Template="{DynamicResource MyTemplate}"/>
</Grid>
</Window>
What I've tried:
public MainWindow()
{
InitializeComponent();
Grid grid = expander.Template.FindName("MyGrid", expander) as Grid;
}
I've also tried
Grid grid = expander.Template.Resources.FindName("MyGrid") as Grid;
But g is always null.
I've looked at:
How do I access an element of a control template from within code behind?
How to access a WPF control located in a ControlTemplate
How do I programmatically interact with template-generated elements Part I
The links above are how I got the code I'm working with, but for some reason, g is just always null. Am I doing something wrong with the ContentTemplate? Any help would be appreciated!
You need to wait until the template is applied to the control
protected override OnApplyTemplate()
{
Grid grid = Template.FindName("YourTemplateName") as Grid;
}
The real problem here is that you're mixing technologies. You're attempting to use something meant for grabbing the template of a lookless control, in the behind code of the main window. I would be surprised if you didn't run into more issues.
Instead, I would suggest looking into How to Create Lookless Controls and redesigning your application. It wouldn't take much effort and it would all play nice together.
I have a DataTemplate which contains a TextBox. The DataTemplate is bound to the ContentTemplate property of a Style for the DevExpress FlyoutControl. The Flyout Control itself is within the ControlTemplate of another TextBox.
When the TextBox with the FlyoutControl is focused, I want to redirect focus to the first TextBox in the FlyoutControl's ContentTemplate (from the DataTemplate). Setting FocusManager.FocusedElement={Binding RelativeSource={RelativeSource Self}} on the TextBox I want focused accomplishes this the first time, but once the Flyout has loaded it no longer works.
I have tried every suggestion I can find and nothing so far has worked. I can get the TextBox I want to reference in code and call Focus(), but it always returns false. At best, when I try to focus it in code, the Flyout is focused instead, but never the TextBox within the Flyout.
Here is what each relevant part looks like (irrelevant code omitted):
<DataTemplate x:Key="FlyoutTemplate">
<Grid>
<dxe:TextEdit x:Name="TextThatWantsFocus"
FocusManager.FocusedElement={Binding RelativeSource={RelativeSource Self}}" />
</Grid>
</DataTemplate>
...
<Style x:Key="FlyoutStyle" TargetType="dxe:FlyoutControl">
<Setter Property="ContentTemplate" Value="{StaticResource FlyoutTemplate}"/>
</Style>
...
<dxe:TextEdit>
<dxe:TextEdit.Template>
<ControlTemplate>
<StackPanel>
<dxe:TextEdit x:Name="InnerTextEdit" />
<dxe:FlyoutControl Style="{StaticResource FlyoutStyle}"/>
</StackPanel>
</ControlTemplate>
</dxe:TextEdit.Template>
</dxe:TextEdit>
The flyout is being opened in code. It is here that I also would like to focus the TextBox (TextThatWantsFocus). However, nothing I have tried will give it focus (except for FocusManager handling it the first time), including the typical SO answer involving triggers. Any ideas would be greatly appreciated.
I took DmitryG's advice and submitted a DevExpress support ticket, and they were able to provide a solution.
The issue was resolved by handling the Loaded event of the TextEdit I want focused and using the dispatcher to focus it:
private void TextThatWantsFocus_Loaded(object obj, RoutedEventArgs e)
{
var text = obj as FrameworkElement;
Dispatcher.CurrentDispatcher.BeginInvoke(new Action(delegate()
{ text.Focus(); }));
}
I suggest you using the FocusBehavior from DevExpress MVVM Framework:
<DataTemplate x:Key="FlyoutTemplate">
<Grid>
<dxe:TextEdit>
<dxmvvm:Interaction.Behaviors>
<local:FocusBehavior/>
</dxmvvm:Interaction.Behaviors>
</dxe:TextEdit>
</Grid>
</DataTemplate>
Edit (as commented: XY-Problem) - Problem:
I want to create my own control which has predefined styles and positions for special elements (Button,...), but in general everything should be able to be placed inside my custom control. The custom control in my case is just a "menubar" which should be able to be used anywhere in the "GUI code" - but there is no need it has to be there. But when it is used it should be the same style and behavior everywhere. A style is - I think - not enough, because there are also predefined elements in this menubar (e.g. Help is already in menubar)
Edit end.
I want to build a custom control (just a special stackpanel) in WPF with the following requirements:
can be used as any other control within a xaml
has defined styles for controls within the custom control
First I simply tried to create a UserControl containing a stackpanel with defined styles (in the xaml) for containing elements (e.g. Button). This UserControl contained the
<ContentPresenter />
in the xaml. With this method it is not possible to name the containing elements. E.g.:
<mynamespace:MyStackPanel>
<Button Name="w00t">This does not work!</Button>
</mynamespace:MyStackPanel>
Next try was to create a "real" custom control. This custom control is just a class without the xaml. Code is very simple. Class inherits from UserControl and just contains:
StackPanel sp = new StackPanel();
sp.Children.Add(new ContentPresenter());
this.AddChild(sp);
Woooohoooo, now it's possible to name the containing elements. But still a big problem: How to define the styles?
I could define the style for my very own custom control in a ResourceDictionary. But i have to add the ResourceDictionary to the global (App.xaml) Resources. And then I can define styles only for my custom control - not for the containing elements? - But anyway... doing it like this just feels wrong!
So the main question is: WHAT is the "correct" way of creating a custom control which can be used in xaml like any other control? If the second way is the correct way - how is it possible to set the style like I do it in a xaml (e.g. every Button in this element has a special style) and has it to be a "global" ResourceDictionary?
How is it implemented in third-party stuff?
Ok I made an example for you, which involves Custom Controls (as Opposed to UserControls)
Step 1:
Create a new class (code only, no XAML) derived from ContentControl (or whatever UI element that has a behavior similar to what you need)
public class ReusableContainer : ContentControl
{
public static readonly DependencyProperty ButtonProperty = DependencyProperty.Register("Button", typeof(Button), typeof(ReusableContainer), new PropertyMetadata(default(Button)));
public Button Button
{
get { return (Button)GetValue(ButtonProperty); }
set { SetValue(ButtonProperty, value); }
}
}
See how I'm defining the Button property as a DependencyProperty here. You can add more DPs for whatever "content placeholders" that you need in your custom control.
Step 2:
Have your predefined Styles for the UI elements inside the container in a separate ResourceDictionary:
CustomStyles.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="Button">
<Setter Property="Background" Value="Green"/>
</Style>
</ResourceDictionary>
Step 3: in app.xaml, define an application-wide style for the ReusableContainer, which defines it's template:
<Application x:Class="WpfApplication14.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication14"
StartupUri="MainWindow.xaml">
<Application.Resources>
<Style TargetType="{x:Type local:ReusableContainer}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:ReusableContainer}">
<ControlTemplate.Resources>
<ResourceDictionary Source="CustomStyles.xaml"/>
</ControlTemplate.Resources>
<ContentPresenter Content="{TemplateBinding Button}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
</Application>
See how I'm using the TemplateBinding expression to define that the ContentPresenter's content is going to be defined by the Button property in the ReusableContainer.
Also notice how I'm Adding the Resources in CustomStyles.xaml to the ControlTemplate.Resources collection. This makes these resources available to all UI elements inside the Template.
Step 4:
Place your ReusableContainer in a Window:
<Window x:Class="WpfApplication14.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication14"
Title="MainWindow" Height="350" Width="525">
<StackPanel>
<local:ReusableContainer>
<local:ReusableContainer.Button>
<Button x:Name="Button1" Content="Hello! Button 1"/>
</local:ReusableContainer.Button>
</local:ReusableContainer>
<local:ReusableContainer>
<local:ReusableContainer.Button>
<Button x:Name="Button2" Content="Hello! Button 2"/>
</local:ReusableContainer.Button>
</local:ReusableContainer>
<local:ReusableContainer>
<local:ReusableContainer.Button>
<Button x:Name="Button3" Content="Hello! Button 3"/>
</local:ReusableContainer.Button>
</local:ReusableContainer>
</StackPanel>
</Window>
First of all let me say that I'm rather new to WPF, so excuse me for any silly mistakes, but I've been cracking my head at this for a while now.
I have a simple sollution with three classes:
public class MyCustomItem
public class MyCustomLayout : ThirdPartyLayout<MyCustomItem>
public class MyViewController : INotifyPropertyChanged
MyCustomItem is a simple class with some properties ("Name" being one of them). ThirdPartyLayoutTool is a generic component inside an SDK that inherits from System.Windows.Controls.Panel. And MyViewController is the view controller I'm using as a data content.
I then created this simple XAML as the projects main window:
<Window x:Class="DependencyViewer.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sdk="clr-namespace:Sdk;assembly=Sdk"
xmlns:local="clr-namespace:MyNamespace"
Title="MainWindow" Height="350" Width="525">
<local:MyCustomLayout x:Name="myLayout"/>
</Window>
Everything displays accordingly.Now my objective is to enhance the display of one of the sub components that is displayed by the ThirdPartyLayout panel, called TargetControl. So I add the following code:
<Window.Resources>
<Style TargetType="{x:Type sdk:TargetControl}">
<Style.Resources>
<ToolTip x:Key="ToolTipContent">
<StackPanel>
<TextBlock FontWeight="Bold" Text="Testing 1 2 3"/>
<TextBlock Text="{Binding Name}"/>
</StackPanel>
</ToolTip>
</Style.Resources>
<Setter Property="ToolTip" Value="{StaticResource ToolTipContent}"/>
</Style>
</Window.Resources>
When I run the code, the "Testing 1 2 3" message appears correctly, however, I don't see the Name property. On the output window, I get the following message:
BindingExpression path error: 'Name' property not found on 'object' ''MyViewController' (HashCode=31884011)'
What I don't get is why the binding is happening on the MyViewController class, instead of TargetControl class. Any ideas?
Best regards,
Carlos Jourdan
EDIT:
After tinkering guide mainly by the recommendations given by newb, I eventually found out that the source of the error is in fact in the SDK. The current release is still faulty, but when compiling from source I get the expected behavior.
Thanks for the help.
When you create a binding in XAML, you are, by default, binding to the current DataContext. In this isntance, it seems that MyViewController is the DataContext of the sdk:TargetControl. To bind to the Name property of the skd:TargetControl instead, try the following:
<TextBlock Text="{Binding Name, RelativeSource={RelativeSource AncestorType={x:Type sdk:TargetControl}}}"/>
Seems like DataContext of xaml.cs of MyViewController has the reference of MyCustomItem.
If you want you can set in xaml.cs, MyCustomLayout.ItemsSource = this.DataContext.
Or you can do MyCustomLayout.ItemsSource = specific property of MyCustomItem.