I'm trying to create a style for my textbox :
<Style TargetType="{x:Type TextBox}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="KeyboardNavigation.TabNavigation" Value="None" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="MinWidth" Value="100" />
<Setter Property="MinHeight" Value="25" />
<Setter Property="AllowDrop" Value="true" />
<Setter Property="BorderBrush" Value="{DynamicResource CouleurBouton}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="FontFamily" Value="Helvetica" />
<Setter Property="FontSize" Value="14" />
<Setter Property="Foreground" Value="{DynamicResource CouleurTexte}" />
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBoxBase}">
<Border Name="Border"
CornerRadius="7"
Padding="2"
BorderThickness="2"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}">
<ScrollViewer Margin="0"
x:Name="PART_ContentHost" />
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<!-- Mouse Over -->
<Condition Property="IsEnabled" Value="True" />
<Condition Property="IsMouseOver" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="BorderBrush" Value="{DynamicResource CouleurBoutonHover}"/>
<Setter Property="Foreground" Value="{DynamicResource CouleurTexte}" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<!-- Desactivé-->
<Condition Property="IsEnabled" Value="False" />
</MultiTrigger.Conditions>
<Setter Property="BorderBrush" Value="{DynamicResource CouleurBoutonDisabled}"/>
<Setter Property="Foreground" Value="{DynamicResource CouleurBoutonDisabled}"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<!-- Focus-->
<Condition Property="IsEnabled" Value="True" />
<Condition Property="IsFocused" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="BorderBrush" Value="{DynamicResource CouleurBoutonPressed}"/>
<Setter Property="Foreground" Value="{DynamicResource CouleurTexte}" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This style fits my needs but I'd like to customize the color of the "cursor" (vertical line) in the textbox (pointed in this image :
How can I do this ?
Thank you !
set CaretBrush property in style for the desired color
example
<Setter Property="CaretBrush" Value="Aqua" />
Related
I'm trying to style the PasswordBox in WPF so that it can show Hint.
I'm doing this by using the following code in ResourceDictionary:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:BudgetBuddy.Styles">
<Style x:Key="PBHintStyle" TargetType="{x:Type PasswordBox}">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="BorderBrush" Value="#FFABADB3"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="AllowDrop" Value="True"/>
<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type PasswordBox}">
<Border
x:Name="border"
BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"
SnapsToDevicePixels="True"
CornerRadius="4"
Padding="5 2 0 0">
<Grid>
<ScrollViewer x:Name="PART_ContentHost" Focusable="False" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
<TextBlock x:Name="WARKTEXT" Text="{TemplateBinding Tag}" Foreground="DimGray" Visibility="Collapsed" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="border" Value="0.56"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="border" Value="#FF7EB4EA"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter Property="BorderBrush" TargetName="border" Value="#FF569DE5"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsFocused" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="Visibility" TargetName="WARKTEXT" Value="Visible"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsInactiveSelectionHighlightEnabled" Value="True"/>
<Condition Property="IsSelectionActive" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="SelectionBrush" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
</MultiTrigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
This code works but with a problem. It shows the hint, shows chars as password chars but the problem is after typing a password in the field it shows the hint over the password chars.
Here are some the screenshots:
Here is the Problem:
How do I fix this? Thanks in advance. :)
You can try this :
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsFocused" Value="False"/>
<Condition Property="Text" Value=""/>
</MultiTrigger.Conditions>
<Setter Property="Visibility" TargetName="WARKTEXT" Value="Visible"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsFocused" Value="False"/>
<Condition Property="Text" Value="{x:Null}"/>
</MultiTrigger.Conditions>
<Setter Property="Visibility" TargetName="WARKTEXT" Value="Visible"/>
</MultiTrigger>
If the text is not empty or null, the hint will be shown, otherwise no.
Hope that will help you.
I am in the proccess of making some Style resources to be aplied to all datagrids I need this formatting on, but no matter what I try I can't seem to find what will allow me to set the DataGrid selected row's borders to Transparent?
This is the XAML so far,
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="FontWeight" Value="Normal" />
</Style>
<Style TargetType="{x:Type DataGridRow}">
<Setter Property="Background" Value="White" />
<Setter Property="FontWeight" Value="Normal" />
<Style.Triggers>
<Trigger Property="AlternationIndex" Value="1">
<Setter Property="Background" Value="LightGray" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Gray" />
<Setter Property="Foreground" Value="White" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="DarkGray" />
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type DataGridCell}">
<Setter Property="FontWeight" Value="Light" />
<Setter Property="VerticalAlignment" Value="Center" />
<Style.Triggers>
<Trigger Property="DataGridCell.IsSelected" Value="True">
<Setter Property="Background" Value="DarkGray" />
<Setter Property="BorderBrush" Value="Black" />
</Trigger>
</Style.Triggers>
</Style>
And this is the result,
How do I set the selected columns boarders to transparent? What Trigger Property do I need to use and where?
I think u are looking for this:
<Setter Property="BorderThickness" Value="0" />
I am working with the fluent:ToggleButton, but I cannot find how I can disable the icon. I don't use it, at it takes up place that I don't have.
Is there a default way to disable it, or do I need to do something special?
This is my work-around:
from the Properties Window you can convert the Template to new Resource and delete the ContentPresenter x:Name="iconImage"
Usage
<!--Tabs-->
<Fluent:RibbonTabItem Header="Tab">
<Fluent:RibbonGroupBox Header="Group">
<Fluent:ToggleButton Height="30" x:Name="buttonGreen" VerticalContentAlignment="Center"
VerticalAlignment="Top" Header="NoIcon" Template="{DynamicResource NoIconToggleButtonControlTemplate}" />
with the auto-generated resource (after the icon's deletion)
<fluent:RibbonWindow.Resources>
<ControlTemplate x:Key="NoIconToggleButtonControlTemplate" TargetType="{x:Type fluent:ToggleButton}">
<Border x:Name="border" BorderBrush="{DynamicResource TransparentBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{DynamicResource TransparentBrush}" HorizontalAlignment="Left" Height="Auto" VerticalAlignment="Stretch">
<Grid Height="Auto">
<StackPanel x:Name="stackPanel" Orientation="Vertical" Width="Auto">
<fluent:TwoLineLabel x:Name="controlLabel" Focusable="False" HorizontalAlignment="Stretch" Margin="2,-3,2,1" Style="{DynamicResource TwoLineLabelStyle}" Text="{TemplateBinding Header}" VerticalAlignment="Stretch"/>
</StackPanel>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Size" Value="Small">
<Setter Property="Orientation" TargetName="stackPanel" Value="Horizontal"/>
<Setter Property="Visibility" TargetName="controlLabel" Value="Collapsed"/>
<Setter Property="HasTwoLines" TargetName="controlLabel" Value="False"/>
<Setter Property="Margin" TargetName="controlLabel" Value="2,-2,2,2"/>
</Trigger>
<Trigger Property="Size" Value="Middle">
<Setter Property="Orientation" TargetName="stackPanel" Value="Horizontal"/>
<Setter Property="Width" TargetName="stackPanel" Value="Auto"/>
<Setter Property="HasTwoLines" TargetName="controlLabel" Value="False"/>
<Setter Property="Margin" TargetName="controlLabel" Value="2"/>
<Setter Property="VerticalAlignment" TargetName="border" Value="Stretch"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource ButtonPressedOuterBorderBrush}"/>
<Setter Property="Background" TargetName="border" Value="{DynamicResource ButtonPressedOuterBackgroundBrush}"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource ButtonCheckedBrush}"/>
<Setter Property="Background" TargetName="border" Value="{DynamicResource ButtonCheckedBrush}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="controlLabel" Value="0.5"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
<Condition Property="IsPressed" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="border" Value="{DynamicResource ButtonHoverOuterBackgroundBrush}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource ButtonHoverOuterBorderBrush}"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
<Condition Property="IsPressed" Value="False"/>
<Condition Property="IsChecked" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="border" Value="{DynamicResource ButtonHoverOuterBackgroundBrush}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource ButtonHoverOuterBorderBrush}"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</fluent:RibbonWindow.Resources>
I've looked through every answer here on StackOverflow but nothing fixed my problem.. I have following style written in App.xaml for my buttons. And this style is linked to my class in another assembly where data is being taken from.
This WORKS at runtime, but it's giving me a hard time inside designer.
There are no errors in the style itself, the error begings with ControlTemplate.
<Style x:Key="HeaderBTN" TargetType="{x:Type Button}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Width" Value="36" />
<Setter Property="Padding" Value="5" />
<Setter Property="Background" Value="{Binding Path=(style:AppStyle.AccentMain)}" />
<Setter Property="Foreground" Value="{Binding Path=(style:AppStyle.AccentText)}" />
<Setter Property="FontSize" Value="20" />
<Setter Property="FontFamily" Value="Times New Roman" />
<Setter Property="Margin" Value="0" />
<Setter Property="DockPanel.Dock" Value="Right" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Name="border" BorderThickness="0" CornerRadius="0" Background="{TemplateBinding Background}">
<Grid>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Name="content"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{Binding Path=(style:AppStyle.AccentHover)}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{Binding Path=(style:AppStyle.AccentButtonDown)}" />
<Setter Property="Foreground" Value="{Binding Path=(style:AppStyle.AccentTextDown)}" />
</Trigger>
<Trigger Property="IsDefaulted" Value="True">
<Setter Property="Background" Value="#3b3b3b" />
</Trigger>
<Trigger Property="IsFocused" Value="True">
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="#505050" />
<Setter Property="Foreground" Value="#A7A7A7" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Is there any alternative to this that would leave everything functional? It's important that these resources are dynamic because Users have to be able to change the theme.
Any help is appreciated.
P.S. I use Visual Studio 2013 Professional with Update 5
I have a ToggleButton custom control which changes the text and size when toggled. I can change/set fonts and change the background/foreground properties and it works fine.
But as soon as I set the FontSize property of the ContentPresenter the text in the button gets misaligned! Specifically the vertical position seems to be off (Moves way down in the button)
I can't figure out what's causing this. If I don't set the fontsize everything works as intended. Here is my button.
<Style x:Key="PlusSelectedToggleButton" TargetType="{x:Type ToggleButton}" BasedOn="{x:Null}">
<Setter Property="Background" Value="#FF3498DB" />
<Setter Property="BorderBrush" Value="DarkGray" />
<Setter Property="Padding" Value="1"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border x:Name="Border" Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" CornerRadius="4">
<ContentPresenter x:Name="ContentPresenter" RecognizesAccessKey="True"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Background" Value="Black" TargetName="Border" />
<Setter Property="BorderBrush" Value="White" TargetName="Border" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="TextBlock.Foreground" Value="Black" TargetName="ContentPresenter" />
</Trigger>
<Trigger Property="IsEnabled" Value="true">
<Setter Property="Foreground" Value="White" />
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content" Value="Selected" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="TextBlock.Foreground" Value="DarkGray" TargetName="ContentPresenter" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Width" Value="75" TargetName="Border" />
<Setter Property="Height" Value="40" TargetName="Border" />
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Content" Value="+"/>
<Setter Property="TextBlock.FontSize" Value="50" TargetName="ContentPresenter"/>
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Background" Value="#FF3498DB" />
<Setter Property="Width" Value="40"/>
<Setter Property="Height" Value="40"/>
<Setter Property="TextBlock.Foreground" Value="White" TargetName="ContentPresenter" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Update: I got it to work but I still don't fully understand why I have to do this.
<Trigger Property="IsChecked" Value="False">
<Setter Property="Content" Value="+"/>
<Setter Property="TextBlock.Foreground" Value="White" TargetName="ContentPresenter" />
<Setter Property="TextBlock.FontSize" Value="27" TargetName="ContentPresenter"/>
<Setter Property="TextBlock.FontWeight" Value="Thin"></Setter>
<Setter Property="TextBlock.Height" Value="40" TargetName="ContentPresenter"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Background" Value="#FF3498DB" />
<Setter Property="Width" Value="35"/>
<Setter Property="Height" Value="35"/>
</Trigger>
I had to set the TextBlock.Height property to a much larger value (even larger then button height) to get the text to center vertically. Horizontally it stays at the same place. I'm not sure why it behaves like this.