Is it possible updating the parent border with triggers from the TextBox is Valid? I tried with Using a Data Template approach. I can not use it because I am trying to pass two properties in data context. One for placeholder and another to bind the User.Email.
If exists a better way to accomplish that achievement, I started using WPF.
I also tried using this approach. Created a ControlTemplate and use ScrollViewer x:Name="PART_ContentHost" but the styles don't update.
The point is how a can keep the binding and update the parent border in the more efficient way?
In View:
<Border Style="{DynamicResource TextBoxBorderStyle}" >
<Grid>
<TextBlock Text="{Binding Path=UserPlaceholder}"
Style="{StaticResource PlaceHolderTextStyle}">
<TextBlock.Visibility>
<MultiBinding Converter="{StaticResource textInputToVisibilityConverter}">
<Binding ElementName="Email" Path="Text.IsEmpty" />
<Binding ElementName="Email" Path="IsFocused" />
</MultiBinding>
</TextBlock.Visibility>
</TextBlock>
<TextBox Name="Email"
Background="Transparent"
Style="{StaticResource textBoxBase}"
Text="{Binding Path=UserCredentials.Email,
Mode=TwoWay,
TargetNullValue='',
ValidatesOnDataErrors=True,
UpdateSourceTrigger=PropertyChanged}">
</TextBox>
</Grid>
</Border>
In App Border Style:
<Style x:Key="TextBoxBorderStyle"
TargetType="{x:Type Border}">
<Setter Property="BorderBrush"
Value="{DynamicResource TextBoxBorderBrush}"/>
<Setter Property="Background"
Value="{StaticResource TextBoxBackgroundBrush}"/>
<Setter Property="HorizontalAlignment"
Value="Stretch"/>
<Setter Property="VerticalAlignment"
Value="Center"/>
<Setter Property="BorderThickness"
Value="2"/>
<Setter Property="CornerRadius"
Value="{StaticResource DefaultBorder}"/>
<Setter Property="Height"
Value="50"/>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type TextBox}}, Path=Validation.HasError}" Value="True">
<Setter Property="BorderBrush"
Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>
In App Textblock Style:
<Style x:Key="textBoxBase" TargetType="{x:Type TextBox}">
<Setter Property="HorizontalAlignment"
Value="Stretch"/>
<Setter Property="VerticalAlignment"
Value="Center"/>
<Setter Property="Foreground"
Value="{StaticResource TextBoxForegroundBrush}"/>
<Setter Property="FontSize"
Value="16"/>
<Setter Property="Margin"
Value="{StaticResource DefaultMargin}"/>
<Setter Property="FontFamily"
Value="{StaticResource DefaultFontFamily}"/>
<Setter Property="BorderThickness"
Value="0"/>
</Style>
To display some elements on error in a control you need to use Validation.ErrorTemplate attached property. You may find this post useful or look at the error template in the MahApps.Metro.
Related
This question already has answers here:
WPF set border background in trigger
(1 answer)
WPF Trigger won't set property if set in Element
(3 answers)
Closed last year.
Below is the sample code of my WPF xaml file. My intention is to change the foreground of the label in the listboxitem to Red colour when the item is selected. However, no changes was seen on the foreground? What mistake had I done?
<UserControl.Resources>
<Style x:Key="WishlistListBoxStyle" TargetType="{x:Type ListBox}">
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontSize" Value="18"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Background" Value="#282C2F"/>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ListBoxItem">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="WishlistBorder" Style="{DynamicResource WishlistBorderContent}">
<ContentPresenter />
</Border>
<ControlTemplate.Resources>
<Style x:Key="WishlistBorderContent" TargetType="Border">
<Setter Property="BorderThickness" Value="0 0 0 2"/>
<Setter Property="BorderBrush" Value="#50D3D3D3"/>
</Style>
</ControlTemplate.Resources>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="WishlistBorder" Property="BorderThickness" Value="2"/>
<Setter TargetName="WishlistBorder" Property="BorderBrush" Value="#63C5DA"/>
<Setter Property="Foreground" Value="Red"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="WishlistBorder" Property="Background" Value="#50D3D3D3"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<ListBox ItemsSource="{Binding SymbolList}" SelectedItem="{Binding SelectedSymbol}"
Style="{StaticResource WishlistListBoxStyle}" HorizontalContentAlignment="Stretch" Width="200" Padding="0">
<ListBox.ItemTemplate>
<DataTemplate>
<Label Content="{Binding}" Foreground="White"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I am using MahApps.Metro for wpf UI. I want to change textalignment of MetroTabItem.
I set HorizontalContentAlignment to center. The below code is not working.
<metroControls:MetroAnimatedTabControl
metroControls:TabControlHelper.Underlined="SelectedTabItem"
ItemsSource="{Binding TabControlCollection}" SelectedIndex="0">
<metroControls:MetroAnimatedTabControl.Resources>
<Style TargetType="{x:Type metroControls:MetroTabItem}">
<Setter Property="metroControls:ControlsHelper.HeaderFontSize" Value="34"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="Width" Value="200"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Header" Value="{Binding Header}"/>
</Style>
How to center in this case?
Ok. I am solved this question.
I added some code in source. It is perfect working.
<Style TargetType="{x:Type metroControls:MetroTabItem}">
<Setter Property="metroControls:ControlsHelper.HeaderFontSize" Value="34"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="Width" Value="200"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate DataType="{x:Type TabItem}">
<TextBlock Text="{Binding Header}" HorizontalAlignment="Center"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
I have a WPF project, where i want to do implicit styling for all Windows of my program.
I am facing problems with the DataGridTextColumn in my DataGrid. This is a TextBlock in view mode and a TextBox in EditMode, but my styles to not apply to them.
My Implicit Styling
<System:Double x:Key="FontSize">14</System:Double>
<Style x:Key="TextBoxStyle" TargetType="TextBox">
<Setter Property="Margin" Value="3" />
<Setter Property="MinWidth" Value="30" />
<Setter Property="Height" Value="20" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Background" Value="White" />
<Setter Property="FontSize" Value="{StaticResource FontSize}" />
<Style.Triggers>
<Trigger Property="IsReadOnly" Value="True">
<Setter Property="Background" Value="LightGray" />
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="TextBox" BasedOn="{StaticResource TextBoxStyle}" />
This styling is not applied to DataGridTextColumn in Edit mode.
I found some help in this StackOverflow Question
<Style TargetType="DataGridCell">
<Setter Property="TextElement.FontSize" Value="{StaticResource FontSize}" />
</Style>
The end result is that the FontSize is now applied, but the Content is Vertically Top Aligned
I then found a solution to Vertically CenterAlign the content of the DataGridTextColumn
<Style TargetType="DataGridCell">
<Setter Property="TextElement.FontSize" Value="{StaticResource FontSize}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Unfortunately, i now face Borders in my EditMode
I have tried various solutions to try and remove the Borders around the TextBox, but i have been unable.
Is there anyway where i can specify that my implicit TextBox style should also apply to the DataGridTextColumn Editmode?
I am finding WPF Styling to be limiting and hard to understand. I hope someone can provide some clarity
You could set the EditingElementStyle of all columns to your TextBoxStyle, e.g.:
<DataGrid ...>
<DataGrid.Resources>
<System:Double x:Key="FontSize">14</System:Double>
<Style x:Key="TextBoxStyle" TargetType="TextBox">
<Setter Property="Margin" Value="3" />
<Setter Property="MinWidth" Value="30" />
<Setter Property="Height" Value="20" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Background" Value="White" />
<Setter Property="FontSize" Value="{StaticResource FontSize}" />
<Style.Triggers>
<Trigger Property="IsReadOnly" Value="True">
<Setter Property="Background" Value="LightGray" />
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Property1}" EditingElementStyle="{StaticResource TextBoxStyle}" />
<DataGridTextColumn Binding="{Binding Property2}" EditingElementStyle="{StaticResource TextBoxStyle}" />
</DataGrid.Columns>
</DataGrid>
There is no implicit styling for these TextBoxes so you need to set the EditingElementStyle property of each individual column I am afraid.
I have a DatePicker in my application, that consists of DockPanels in a StackPanel in a ScrollViewer in a UserControl.
The (simplified) xaml of the UserControl looks like this:
<UserControl x:Class="project.UI1"
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"
xml:lang="de-DE"
mc:Ignorable="d" >
<UserControl.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Width" Value="250"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="TextAlignment" Value="Right"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="2"/>
<Setter Property="Padding" Value="3"/>
</Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="DockPanel.Dock" Value="Top"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="MaxWidth" Value="{Binding RelativeSource={RelativeSource AncestorType=Border},Path=ActualWidth}"/>
<Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
</Style>
<Style TargetType="{x:Type DatePicker}">
<Setter Property="Margin" Value="2"/>
<Setter Property="Width" Value="105"/>
<Setter Property="MaxWidth" Value="105"/>
<Setter Property="Height" Value="24"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
</Style>
<Style TargetType="{x:Type DockPanel}">
<Setter Property="DockPanel.Dock" Value="Top"/>
</Style>
<Style TargetType="{x:Type Border}">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="2"/>
</Style>
<Style TargetType="{x:Type ScrollViewer}">
<Setter Property="HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
</Style>
</UserControl.Resources>
<ScrollViewer>
<StackPanel>
<DockPanel>
<TextBlock Text="IK-Nummer des Absenders (z.B. D-Arzt)"/>
<Border>
<TextBox Text="{Binding p_1}"/>
</Border>
</DockPanel>
<DockPanel>
<TextBlock Text="IK-Nummer der UNI-DAV aus UV-Träger-Verzeichnis"/>
<Border>
<TextBox Text="{Binding p_2}" />
</Border>
</DockPanel>
<DockPanel>
<TextBlock Text="Datum der Erstellung durch den Leistungserbringer"/>
<DatePicker SelectedDate="{Binding p_3}"/>
</DockPanel>
</StackPanel>
</ScrollViewer>
</UserControl>
The TextBlocks have a 250px fixed width and hold the description of the fields while the TextBoxes for the user input are supposed to grow & shrink dynamically as the user resizes the window, to fit the rest of the window width.This is why I came up with packing every TextBlock/TextBox-combo in a DockPanel, and stack those in a StackPanel.
However, when I click on the DatePicker, the calendar beyond spans across the whole screen:
Even though this looks quite funky, I would prefer to get the common square calendar "popup" back.
Unfortunately, I don't know what causes the calendar to go wild like this at the moment...
The problem is your TextBlock style. It is being applied to the DateTimePicker because it has no key and so applies to all TextBlocks down the visual tree.
Can you give the style a key and only apply it to certain TextBlocks?
<Style TargetType="{x:Type TextBlock}" x:Key="TextBlockStyle">
<Setter Property="Width" Value="250"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="TextAlignment" Value="Right"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="2"/>
<Setter Property="Padding" Value="3"/>
</Style>
....
<TextBlock Text="IK-Nummer der UNI-DAV aus UV-Träger-Verzeichnis"
Style="{StaticResource TextBlockStyle}"/>
UPDATE:
OR, you could just add a new TextBlock style to the DatePicker's resource to override the style higher up in the visual tree:
<DatePicker SelectedDate="{Binding p_3}">
<DatePicker.Resources>
<Style TargetType="{x:Type TextBlock}"/>
</DatePicker.Resources>
</DatePicker>
Here is my xaml code...
The hover color is still that yellow goldish out of the box color... Am I doing something wrong. I want to change it so that I can specify the mouse over color.
<telerik:RadDropDownButton Height="16" HorizontalAlignment="Left" IsOpen="False" Margin="999,16,0,0" Name="RDDLocations" VerticalAlignment="Top" Width="15" Content=" " Background="#FF25B7DB" Foreground="White" BorderThickness="0">
<telerik:RadDropDownButton.DropDownContent>
<telerik:RadListBox x:Name="UIOptionsList" ItemsSource="{Binding LocationItems}" Background="#FF25B7DB">
<telerik:RadListBox.ItemTemplate>
<DataTemplate>
<telerik:RadButton>
<telerik:RadButton.Style>
<Style TargetType="telerik:RadButton">
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Height" Value="32"/>
<Setter Property="Width" Value="200"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontFamily" Value="Franklin Gothic Book"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="Content" Value="{Binding Text}"/>
<Setter Property="ToolTip" Value="{Binding ToolTip}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Background" Value="Transparent"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#FF25B7DB"/>
<Setter Property="Foreground" Value="Orange"/>
</Trigger>
</Style.Triggers>
</Style>
</telerik:RadButton.Style>
</telerik:RadButton>
</DataTemplate>
</telerik:RadListBox.ItemTemplate>
</telerik:RadListBox>
</telerik:RadDropDownButton.DropDownContent>
</telerik:RadDropDownButton>
My solution was to use a regular button instead of a telerik radbutton.