ErrorTemplate for PasswordBox with AttachedProperty - wpf

I know that a passwordbox in wpf could not use the Validation.ErrorTemplate, anyhow i have to show the user, that something is wrong.
My Passwordbox has a binding like this
<PasswordBox Name="Password" local:PasswordHelper.Text="{Binding PasswordProp, Mode=TwoWay}" />
Is it possible to get the same style like the default errortemplate (red border) for this passwordbox, if something is wrong?
This is my ErrorTemplate that I use for the other controls
<Style x:Key="baseControlStyle">
<Setter Property="Control.FontFamily" Value="Verdana" />
<Setter Property="Control.FontSize" Value="12" />
<Setter Property="ToolTipService.ShowOnDisabled" Value="True" />
<Setter Property="Validation.ErrorTemplate" >
<Setter.Value>
<ControlTemplate>
<DockPanel LastChildFill="True">
<Image x:Name="Bild"
DockPanel.Dock="Right"
Source="../Resources/Nein.ico"
Margin="-5 0 0 0"
MaxHeight="16"
MaxWidth="16"
VerticalAlignment="Center"
ToolTip="{Binding ElementName=myControl, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}">
</Image>
<Border BorderBrush="Red" BorderThickness="1" CornerRadius="2">
<AdornedElementPlaceholder x:Name="myControl" />
</Border>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="Control.ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}"/>
</Trigger>
</Style.Triggers>
</Style>
Thanks

One solution would be to put an actual TextBox underneath the PasswordBox and bind the Text property to PasswordProp too and give the TextBox the ErrorTemplate:
<Grid>
<TextBox Template="{x:Null}" Style="{StaticResource baseControlStyle}" Text="{Binding PasswordProp, Mode=TwoWay}" />
<PasswordBox Name="Password" local:PasswordHelper.Text="{Binding PasswordProp, Mode=TwoWay}" />
</Grid>
Since the controls of the ErrorTemplate will be put on an adorner layer, your error template will be displayed on top of the PasswordBox event though the TextBox is underneath the PasswordBox.
Also note that I have set the TextBox controltemplate to null. Since it is not supposed to be visible it doesn't need to be rendered.

Related

How can I get a strikethrough decoration applied to a label via a trigger?

There are a zillion examples of how to do this to a TextBlock, but I need it on a label. I thought the default template for a label included a TextBlock, so I tried this:
<Grid>
<Grid.Resources>
<Style TargetType="{x:Type Label}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Included}" Value="False">
<Setter Property="TextBlock.TextDecorations" Value="Strikethrough" />
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<Label Grid.Column="0" BorderThickness="0,1,0,0" BorderBrush="White"
Background="Transparent" Padding="5,0,5,0"
Content="{Binding Path=BillingDefinitionId}"
IsEnabled="{Binding Path=Included}" />
</Grid>
The effect I am going for is when Included is false, the label should be disabled and have strikethrough text. But this is not working for the strikethrough bit.
If I explicity declare the TextBlock, then it seems to work:
<Grid.Resources>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Included}" Value="False">
<Setter Property="TextDecorations" Value="Strikethrough" />
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<Label Grid.Column="0" BorderThickness="0,1,0,0" BorderBrush="White"
Background="Transparent" Padding="5,0,5,0"
HorizontalContentAlignment="Right" VerticalContentAlignment="Center"
IsEnabled="{Binding Path=Included}">
<TextBlock Text="{Binding Path=BillingDefinitionId}" />
</Label>
I suppose that's fairly simple, not sure why it didn't occur to me prior to posting, but it seems a bit overkill if the default template is a TextBlock… Regardless, it works.

WPF apply triggers to listview items to change background

I am trying to create a sort of left menu for navigation inside the desktopapplication. My idea is to use Buttons as Listview items which should behave in this way: when i hover with the mouseover them theri background should change color (becomes darkCyan) and when i click one its background color should change persistently (to darkCyan) until i click on another button of the list. The problem is that i am using a the DataTemplate property to specify how the buttons should look like and I am tryin to apply the triggers to change the background color on the ControlTemplate of the ListView. The result is that sometimes the background color changes but the command related to the button is not fired other times the contrary. I think that I am doing the things in the wrong element of the tree view, but I don't have enough knowledge of the tree view so I am not understanding what I am doing wrong. Here is the code of the XAML in which i define the styles for the Buttons and the ListView
<Window.Resources>
<DataTemplate DataType="{x:Type viewModels:TripViewModel}">
<views:TripView />
</DataTemplate>
<Style TargetType="{x:Type Button}">
<Setter Property="Height"
Value="50" />
<Setter Property="Background"
Value="#555D6F" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border>
<Grid Background="Transparent">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border BorderBrush="Transparent"
BorderThickness="0"
Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Background"
Value="DarkCyan" />
</Trigger>
<Trigger Property="IsSelected"
Value="True">
<Setter Property="Background"
Value="DarkCyan" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
And here is the code in which I create the ListView
<ListView Name="MenuButtons"
ItemsSource="{Binding PageViewModels}"
Background="Transparent"
IsSynchronizedWithCurrentItem="True">
<ListView.ItemTemplate>
<DataTemplate>
<Button Content="{Binding Name}"
Command="{Binding DataContext.ChangePageCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
Margin="0" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Anyone can help?
Thanks
I have solved the issue by using a ListBox instead of a ListView and setting the ItemContainer to be a button in the following way
<ListBox.ItemTemplate>
<ItemContainerTemplate>
<Button Content="{Binding Name}"
Command="{Binding DataContext.ChangePageCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
Margin="0" />
</ItemContainerTemplate>
</ListBox.ItemTemplate>

WPF slider to a "selected textbox" (on got focus)

How is the right way to bind dynamically a TextBox to a Slider?
The idea is to have many textboxes. When the user click over a TextBox, it changes his Background Color (showing thats it has the focus) and then if the user change the value of the Slider, the Text property of the Selected Textbox should change.
I would so this by embedding the TextBoxes in a ListBox. That way you can use list box to handle the definition of what is focused by its SelectedItem, and then bind the slider to the listboxes selecteditem too.
As #AlSki mentioned you could use a ListBox to hold all your TextBoxes and bind to the SelectedItem
Example:
<StackPanel>
<Slider Value="{Binding SelectedItem.Text, ElementName=listbox}"/>
<ListBox Name="listbox">
<TextBox />
<TextBox />
<TextBox />
<TextBox />
</ListBox>
</StackPanel>
Or if the TextBoxes are layed out in a fashion that cant be used with an ItemsControl you could do this with by creating a TextBox Style and setting the Binding to the Slider in a Trigger
Example:
<StackPanel>
<StackPanel.Resources>
<Style TargetType="TextBox">
<Setter Property="Text" Value="{Binding RelativeSource={RelativeSource Self}, Path=Text, Mode=OneWay}" />
<Setter Property="Background" Value="White" />
<Style.Triggers>
<Trigger Property="IsFocused" Value="true">
<Setter Property="Background" Value="Yellow" />
<Setter Property="Text" Value="{Binding ElementName=slider, Path=Value, Mode=OneWay}" />
</Trigger>
</Style.Triggers>
</Style>
</StackPanel.Resources>
<Slider Name="slider" Focusable="False"/>
<TextBox />
<TextBox />
<TextBox />
<TextBox />
</StackPanel>

WPF Creating a multi use control

I'm trying to create a WPF window that has a single control and 2 buttons displayed.
The control can be either a TextBox, ComboBox or Slider dependent on the type of object selected to launch this window.
Is it possible to do this or will I have to create a window with 3 conrtols and manipulate their position at runtime?
Regards
Tony
additions to original question
My implementation is as follows
<Window.Resources>
<Style TargetType="TextBox" x:Key="TextBoxTemplate">
<Setter Value="{Binding ElementName=MyWindow, Path=m_csValue}" />
</Style>
<Style TargetType="{x:Type ComboBox}" x:Key="ComboBoxTemplate">
<Setter Value="{Binding ElementName=MyWindow, Path=ItemsForSelection}" />
</Style>
<Style TargetType="{x:Type Slider}" x:Key="SliderTemplate">
<Setter Value="{Binding ElementName=MyWindow, Path=SliderDetail}" />
</Style>
<Style TargetType="{x:Type ContentControl}" x:Key="DisplayValues">
<!-- Default Template -->
<Setter Property="ContentTemplate" Value="{StaticResource TextBoxTemplate}" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=MyWindow, Path=eType}" Value="{x:Static local:eTagDisplay.Text}">
<Setter Property="ContentTemplate">
<Setter.Value>
<ControlTemplate Template="{StaticResource TextBoxTemplate}" />
</Setter.Value>
</Setter>
</DataTrigger>
<!-- DataTrigger Binding="{Binding ElementName=MyWindow, Path=eType}" Value="{x:Static local:eTagDisplay.Combo}">
<Setter Property="ContentTemplate">
<Setter.Value>
<ControlTemplate Template="{StaticResource ComboBoxTemplate}" />
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=MyWindow, Path=eType}" Value="{x:Static local:eTagDisplay.Slider}">
<Setter Property="ContentTemplate">
<Setter.Value>
<ControlTemplate Template="{StaticResource SliderTemplate}" />
</Setter.Value>
</Setter>
</DataTrigger -->
</Style.Triggers>
</Style>
</Window.Resources>
<Grid Width="267">
<StackPanel Name="TagEditor1">
<!-- Text="{Binding ElementName=MyWindow, Path=m_csValue}" / -->
<ContentControl Style="{StaticResource DisplayValues}" />
</StackPanel>
<Button Content="OK" Height="23" HorizontalAlignment="Left" Margin="12,154,0,0" Name="btnOK" VerticalAlignment="Top" Width="75" Click="OnClkOK" />
<Button Content="Cancel" Height="23" HorizontalAlignment="Left" Margin="180,154,0,0" Name="btnCancel" VerticalAlignment="Top" Width="75" Click="OnClkCancel" IsCancel="True" />
</Grid>
I'm getting an error 'System.Windows.Style' is not a valid value for the 'System.Windows.Controls.ContentControl.ContentTemplate' property on a setter. I don't know why this is happening.
My Binding is OK, i believe, as it picks up string OK....
I would do this with a <ContentControl> that has a different <ContentTemplate> depending on what type of control is needed.
You didn't specify how the control type is being passed to the window, so your DataTrigger bindings would probably look a bit different from mine, but this should give you the right idea:
<DataTemplate TargetType="{x:Type ContentControl}" x:Key="TextBoxTemplate">
<TextBox ... />
</DataTemplate>
<DataTemplate TargetType="{x:Type ContentControl}" x:Key="ComboBoxTemplate">
<ComboBox ... />
</DataTemplate>
<DataTemplate TargetType="{x:Type ContentControl}" x:Key="SliderTemplate">
<Slider ... />
</DataTemplate>
<Style x:Key="MyStyle" TargetType="{x:Type ContentControl}">
<!-- Default Template -->
<Setter Property="ContentTemplate"
Value="{StaticResource TextBoxTemplate}" />
<Style.Triggers>
<DataTrigger Binding="{Binding SomeBoundValue}" Value="ComboBox">
<Setter Property="ContentTemplate"
Value="{StaticResource ComboBoxTemplate}" />
</DataTrigger>
<DataTrigger Binding="{Binding SomeBoundValue}" Value="Slider">
<Setter Property="ContentTemplate"
Value="{StaticResource SliderTemplate}" />
</DataTrigger>
</Style.Triggers>
</Style>
...
<ContentControl Style="{StaticResource MyStyle}" />
You could also allow users to specify a Content for your UserControl or Window, and simply display it using a ContentPresenter bound to the Content. Something like this:
<UserControl.Template>
<StackPanel>
<ContentPresenter Content="{TemplateBinding Content}" />
<Button ... />
<Button ... />
</StackPanel>
</UserControl.Template>
then you could use it like this:
<local:MyUserControl>
    <TextBox ... />
</local:MyUserControl>
<local:MyUserControl>
<ComboBox ... />
</local:MyUserControl>
<local:MyUserControl>
<Slider ... />
</local:MyUserControl>
I think it is possible with single window.By exposing a property that sets visibilty based on some condition.
i.e textbox visibility is set to visibility.visible and combobox,slider visibilty is set to visibility.collpased.similarly if you want to have combobox visible you make that visible and others collapsed.similarly for slider.
example:
public Visibility TextboxVisibility
{
set
{
Visibility visible = value;
Textboxname.Visibility = visible ;
}
}
I hope this answers your question

WPF Validation Errors: Setting Tooltip with Error Message

Why is there no tooltip text on errors?
<Style TargetType="{x:Type TextBox}">
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<StackPanel>
<Border ...>
<AdornedElementPlaceholder ...
ToolTip="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}" />
</Border>
...
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I also noticed that
<AdornedElementPlaceholder ...
ToolTip="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}" />
fails but the below suceeds, even with the same binding, why is this so? Doesn't AdornedElementPlaceholder refer to the text box? Even if it doesn't, shouldn't a tooltip appear somewhere?
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}" />
</Trigger>
</Style.Triggers>
I know I'm late, but let me share a solution I found studying this question: WPF custom validator with tooltip.
In it's simplest form this ErrorTemplate shows only a Tooltip with the ErrorContent for the whole AdornedElement.
<ControlTemplate x:Key="validationTemplate">
<Grid Background="Transparent"
ToolTip="{Binding Path=/ErrorContent}">
<AdornedElementPlaceholder />
</Grid>
</ControlTemplate>
But of course you can decorate it as desired e.g. with a Tooltip for just a marker.
<ControlTemplate x:Key="validationTemplate">
<Grid>
<Ellipse Fill="Red" Opacity="0.8" Width="10" Height="10"
HorizontalAlignment="Right" VerticalAlignment="Top"
ToolTip="{Binding Path=/ErrorContent}" />
<AdornedElementPlaceholder />
</Grid>
</ControlTemplate>
Put this Template in Resources and all you have to do is setting the Validation.ErrorTemplate.
Validation.ErrorTemplate="{StaticResource validationTemplate}"
Even this annoying Trigger is no longer needed.
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}" />
</Trigger>
</Style.Triggers>
You can't place a tooltip on the AdornedElementPlaceholder, I don't think it's visible at all, it's just reserving space for whoever uses it (in your case a TextBox). Looking at the Visual Tree with Snoop we can see that the TemplatedAdorner ends up in a different place in the VisualTree than the TextBox so there will be now way for us to find the TextBox from the VisualTree. We can find it through AdornedElement, but we still won't be able to set a tooltip.
The only thing visible here in the TemplatedAdorner is the Border. The Border knows its Child - the TemplatedAdorner - which in turn knows its AdornedElement - the TextBox. So we could set the ToolTip for the Border with this. (However, this Binding seems to fail to update the Tooltip for the Border. It works when I look at it with Snoop and after that it displays.)
<Border BorderBrush="Red"
BorderThickness="4"
ToolTip="{Binding RelativeSource={RelativeSource self},
Path=Child.AdornedElement.(Validation.Errors)[0].ErrorContent}">
So, the TextBox has its AttachedProperty Validation where we can find the ErrorContent so it must set its own ToolTip like you did at your last example, otherwise it won't work.
I found a way to implement ToolTip with the returned error message from the validation class that you might create to validate your input.
First: Binding the error message
Adding <Style> for the TextBox with Style.Trigger as followed:
<Style TargetType="{x:Type TextBox}" x:Key="ToolTipError">
<!-- Some style setters -->
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip" Value="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=(Validation.Errors)[0].ErrorContent}"/>
</Trigger>
</Style.Triggers>
</Style>
Second: Add the style to TextBox
<TextBox
Style="{StaticResource ToolTipError}"
Validation.ErrorTemplate="{StaticResource validationTemplate}">
<TextBox.Text>
<Binding
Path="YourViewModelProperty"
UpdateSourceTrigger="PropertyChanged"
ValidatesOnNotifyDataErrors="True"
ValidatesOnDataErrors="True"
NotifyOnValidationError="True">
<Binding.ValidationRules>
<ExceptionValidationRule:DateValidationRule ValidatesOnTargetUpdated="True"/>
</Binding.ValidationRules>
</Binding>
</TextBox.Text>
</TextBox>
Bonus!
You can change the ugly red border with other thing.
For example you can change it to red exclamation mark:
<Window.Resources>
<ControlTemplate x:Key="validationTemplate">
<StackPanel>
<TextBlock Text="!" FontSize="26" Foreground="Red"/>
<AdornedElementPlaceholder/>
</StackPanel>
</ControlTemplate>
<Window.Resources>

Resources